Как сделать рамку вокруг изображение (аналог Instagram)?

Question

[Владислав Маликов]

В общем очень захотел себе сделать редизайн и скомуниздить плюшку в инсте
В общем надо такое

Как сделать ?
Мой код

Чтобы также было один в один, можно без анимации этого кружка, просто главное чтобы была градиент рамка вокруг изображение (круглая) и с отступом от изображения.

Answer 1

[Дмитрий Кузнецов]

Чисто случайно нашёл: https://bootsnipp.com/snippets/featured/instagram-... Не знаю как подойдёт, но может к чему-то подтолкнуть.

Comments

[Владислав Маликов]

Спасибочки)

[Дмитрий Кузнецов]

Владислав Маликов, Не за что. Надеюсь поможет.

Answer 2

[Aleksey Solovyev]

https://jsfiddle.net/d1sgepwb/1/
Ну пусть будет так с анимацией :hover

Или используя border https://jsfiddle.net/wyjfg5qn/1/ :

.image{
  width: 200px;
  height: 200px;
  border: 4px solid transparent;
  border-radius: 50%;
  background-image: linear-gradient(white, white), radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
  background-origin: border-box;
  background-clip: content-box, border-box;
}

только контролировать сложнее

Comments

[Владислав Маликов]

Восхитительно

Answer 3

[dimasis]

Adobe Photoshop CC

Comments

[Дмитрий Кузнецов]

Сомневаюсь, что автор это спрашивал.

[hackuun]

Отличный вариант для криворуких говно-верстальщиков