Вводная (описание проблемы): в последние неск. лет появилась какая-то мода на скругленные углы у картинок (см. превью слева), а по умолчанию все эти изображения (будь то фото или скрины) делаются с прямым углом… Незадача?!🤨
Однако, благодаря CSS совсем не обязательно вручную редактировать картинки (выкладываемые на сайте/форуме или еще где) в графических редакторах. Можно немного отредактировать стили (CSS) и прямой угол на всех изображениях станет полукругом (с радиусом)! Т.е. браузер отобразит картинку/фото так, как будто у нее закругленные углы, а не прямые (а само изображение будет храниться неизменнным).
Ниже покажу неск. примеров, из которых будет понятно, как это сделать… 👌
Примечание! Закругленные углы поддерживают только современные браузеры: FireFox, Chrome, Яндекс-Браузер, и др. (не старше 2016г. выпуска).
*
Примеры с закруглением углов у картинок
✏️ Пример 1
Итак…
Возьмем для примера самую обычную картинку в формате png (см. ниже). Обратите внимание, что углы у нее прямые!
Картинка для примера (прямой угол)
Теперь, чтобы скруглить у нее углы нам (по стандарту CSS3) необходимо добавить стиль border-radius, например так:
border-radius: 20px;
(20px — здесь величина радиуса. Можно поставить свое значение)
Т.е. код картинки будет примерно такой (разумеется, вам нужно будет подставить в код ссылку на свою картинку):
<img style=»border-radius: 20px;» src=»https://ocomp.info/Kartinka-dlya-primera.png»/>
Картинка для примера (вместо прямого угла — радиус 20 пикселей)
*
✏️ Пример 2
Если есть желание добавить тени к картинке — то CSS немного изменится, необходимо будет добавить еще одну строку (box-shadow: 0 0 20px #333;), я ее выделил синим:
border-radius: 20px;
box-shadow: 0 0 20px #333;
(кстати, #333 — это код цвета, его можно менять).
Вот как код картинки изменится:
<img style=»border-radius: 20px; box-shadow: 0 0 20px #333;» src=»https://ocomp.info/wp-content/uploads/2024/04/Kartinka-dlya-primera.png»/>
Картинка для примера (радиус 20 пикселей + тень по контуру!)
Кстати, коды веб-цветов вы можете найти в одной моей 📌предыдущей заметке, рекомендую!
Таблицы с кодами HTML цветов: зеленый, красный, синий, пурпурный, неоновый и др. Неск. табличек в помощь вебмастеру, администратору
*
✏️ Пример 3
Также довольно часто используют обводку картинок линией совместно с закруглением углов (так выглядеть изображение может на порядок лучше, особенно в тех случаях, когда нужно отделить ее от стороннего контента).
Дописать в код нужно стиль border, например так:
border-radius: 20px;
border: 5px #00FF00 solid;
(примечание: вместо 5px — можно задать свою толщину обводки. #00FF00 — это код цвета)
Вот как код картинки будет выглядеть:
<img style=»border-radius: 20px; border: 5px #00FF00 solid;» src=»https://ocomp.info/wp-content/uploads/2024/04/Kartinka-dlya-primera.png»/>
Картинка для примера (радиус 20 пикселей + обводка цвета Lime| border: 5px #00FF00 solid;!)
*
✏️ Пример 4
Еще один итоговый пример ниже, как можно комбинировать всё вышесказанное…
Применим сразу и радиус, и обводку, и тени:
border-radius: 50%;
border: 5px #00FF00 solid;
box-shadow: 0 0 20px #333;
(примечание: кстати, border-radius можно задавать не только в пикселях, но и в процентах!)
Вот как код картинки будет выглядеть:
<img style=»border-radius: 50%; border: 5px #00FF00 solid; box-shadow: 0 0 20px #333;» src=»https://ocomp.info/wp-content/uploads/2024/04/Kartinka-dlya-primera.png»/>
Картинка для примера (радиус 50% + обводка цвета Lime + тени). Общее впечатление от изображения изменилось до неузнаваемости! 👌
✏️ Важно!
Если после изменения стилей у вас картинка отображается также — возможно вы просто не перезагрузили страничку со сбросом старого кэша (т.е. браузер загружает старую страничку в целях ускорения). Попробуйте нажать сочетание Ctrl+F5, или открыть страничку в другом браузере!
***
📌 Примечание!
В примерах выше мы редактировали код у каждой картинке по отдельности. Если вам нужно изменить отображение вообще всех изображений на странице (сайте) — тогда в файле style.css вашей темы необходимо прописать что-то вроде этого:
img { border-radius: 50%;
border: 5px #00FF00 solid;
box-shadow: 0 0 20px #333;
}
*
Иные рекомендации и способы — приветствуются в комментариях ниже.
За сим откланяюсь, удачи!
👋