ZorNet.Ru — сайт для вебмастера » HTML и CSS » Овальная и круглая картинка с помощью CSS

Овальная и круглая картинка с помощью CSS

Круглые или овальные изображение стали популярны в дизайн любой тематики. И здесь разберем пару приемов, как сделать быстро такую форму. Будет 2 способа, где первый отвечает только за форму, что каждый веб мастер может поставить и тем украсить стилистику ресурса.

Второй имеет небольшой эффект при наведение, что по умолчанию круглая, но когда курсор на картинке, то автоматически становится по умолчанию, что думаю возможно кому то пригодится. Все производиться с помощью CSS и все они не сложные по установке.

1. С подключением стилей;

CSS:

Код

div.radius { border-radius: 20px; background: #e7d5c0; }

Там где считаете нужным.

Код

2. Рассмотрим на демонстраций.

Здесь отвечают эти элементы не считая стилистики.

Код

img {
width: 150px;
height: 150px;
border-radius: 50%;
}

На этом все, как видите, вы сами можете от себя что то для стильности дописать.

20 Октября 2017 Просмотров: 1783 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил