• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Создать круглые изображение на HTML + CSS (Как самостоятельно создать круглые изображения?)
Создать круглые изображение на HTML + CSS
Kosten
Дата: Вторник, 2019-09-24, 02:29 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25011
Награды: 57


Для того, чтоб изображение было круглым, то здесь все делаем через CSS, а точнее через свойство border-radius, что отвечает за скругление углов. Где просто поставить 50px, где картинка, что идет аналогично по высоте и ширине станет круглой по своему формату.

Также здесь есть свою плюсы, которые заключаются в оформление, ведь border-radius является то, где можно прописать к элементу рамку, также тени, что будет все отображаться по контуру круга.



HTML

Код
<p><img src="http://zornet.ru/_fr/83/2760176.jpg" alt="" class="krugi-uglov">
<img src="http://zornet.ru/_fr/83/9896544.jpg" alt="" class="krugi-uglov">
<img src="http://zornet.ru/_fr/83/2478295.jpg" alt="" class="krugi-uglov"></p>

CSS

Код
.krugi-uglov {
    border-radius: 50%;
    border: 3px solid #006480;
    box-shadow: 0 0 5px #524d4d;
}

Здесь задаем класс под названием krugi-uglov и закрепляем за картинкой, и сразу добавляем оттенок цвета и теней, чтоб смотрелось красивей.

Демонстрация
Прикрепления: 0754825.jpg(28.9 Kb) · 6657803.zip(2.0 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Создать круглые изображение на HTML + CSS (Как самостоятельно создать круглые изображения?)
  • Страница 1 из 1
  • 1
Поиск: