оригинальная версия версия для слабовидящих контрастная версия выключить изображения включить изображения RSS FEED K2 NEWS
Воскресенье, 02 Август 2020 16:11

Сделать круглую рамку для картинки в CSS

Когда-то давно, один из моих «учителей жизни» сказал одну фразу, про программирование, которая оказалась актуальной не только для программирования, но и, например, для стилизации объекта. Звучала она так: «Тебе не надо знать весь язык программирования, и то, как правильно пишется функция, тебе надо знать, что программа может это сделать, а как именно ей написать, что она должна это сделать, потом найдёшь в Интернете», не дословно конечно, но суть примерно такова.

Вот так я знал, что стилями могу настроить «рамку» изображению, осталось только сделать, приступим. Для начала возьмём фотографию за «основу», я для примера взял этого голубя:

( фото можно приобрести здесь )

Мой код вставки сейчас выглядит так:

<img src="/URL" style="" />

И здесь в style (я этого делать не стал), можно добавить ширину изображения, например, у меня «по умолчанию» голубь 500х500, а в Вашем случае, это может быть слишком много и тогда, можно сделать width:300px; опять же, если этого требует ситуация.

Текущее изображение квадратное, его конечно же можно «обрезать», например, в Adobe Photoshop, но так как речь идёт о работе в CSS, то начнём с того, что сделаем изображение «круглым», для этого добавим border-radius в style:

<img src="/URL" style="border-radius:50%;" />

Теперь дело за «рамкой», её можно сделать при помощи теней, в таком случае наши стили станут выглядеть так:

<img src="/URL" style="border-radius:50%; box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px rgba(255,255,255,0.5)" />

Иногда ситуация требует вмешательства отступов, это всё решается путём «margin»’а (margin, margin-top, margin-left, margin-right, margin-bottom).

Спонсоры: