Круглые изображения с помощью CSS3

Привет всем!

Я раньше писал про политику конфиденциальности и это как бы была теория. А сегодня у нас практическое занятие — мы рассмотрим как можно сделать у себя на сайте круглые изображения не прибегая к фотошопу или аналогичным программам.

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

Первым делом немного HTML:

Ко мне часто поступают вопросы про хостинг, которым я пользуюсь и поэтому решил указать хостинг в статье https://sprinthost.ru. Вы можете попробовать попользоваться хостингом 30 дней бесплатно. Чтобы понять, как будет работать Ваш сайт на этом хостинге просто перенести свой сайт (в этом поможет поддержка хостинга бесплатно) и и таким образом сможете понять подходит хостинг Вам или нет. На этом хостинге находятся сайты с 20 000 тысяч посещаемость и сайты чувствуют себя отлично. Рекомендую! Да, если делать оплату на 1 год то получаете скидку 25%. И что мне нравится - тех. поддержка всегда помогает в технических вопросах, за что им спасибо. Как Вы понимаете не всегда проходит всё гладко и нет желания, чтобы сайт не был доступен тем самым страдал трафик и доход.
<div class="my_image_circle"></div>

Не много, не правда ли? А теперь сам CSS:

.my_image_circle{
	width: 350px; //ширина изображения
	height: 350px; //высота изображения
	border-radius: 175px; //радиус 175 пикселей для всех браузеров
	-webkit-border-radius: 175px; //радиус 175 пикселей для Оперы, Хрома и Сафари
	-moz-border-radius: 175px; //радиус 175 пикселей для Мозилы
	background: url("http://your_site.ru/images/image.jpg") no-repeat; //фоновое изображение
}

Вышел полный круг, и для этого вам нужно сделать границы радиуса половиной высоты / ширины. И сложив это все вместе, ваше изображение выглядит одинаково во всех современных браузерах: Мозила, Сафари и Хром…

К изображению вы можете добавить border (границу) и shadow(тень). Получится вот так:

Я добавил к картинке темную тень с небольшой прозрачностью в 75%. И теперь CSS выглядит во так:

.my_image_circle{
	width: 350px; //ширина изображения
	height: 350px; //высота изображения
	border-radius: 175px; //радиус 175 пикселей для всех браузеров
	-webkit-border-radius: 175px; //радиус 175 пикселей для Оперы, Хрома и Сафари
	-moz-border-radius: 175px; //радиус 175 пикселей для Мозилы
	background: url("http://your_site.ru/images/image.jpg") no-repeat; //фоновое изображение
	box-shadow: 0 0 9px rgba(3, 3, 3, .75); //тень для всех браузеров
	-webkit-box-shadow: 0 0 9px rgba(3, 3, 3, .75); //тень для Оперы, Хрома и Сафари
	-moz-box-shadow: 0 0 9px rgba(3, 3, 3, .75); //тень для Мозилы
}

Есть другое практическое решение и оно будет очень хорошим для тех, кто хочет сохранить рисунок себе на компьютер, но этот метод требует немного больше HTML и CSS.

<div class="my_image_circle"><img src="http://your_site.ru/images/image.jpg" alt="описание вашей картинки" /></div>

.my_image_circle{
	width: 350px; //ширина изображения
	height: 350px; //высота изображения
	border-radius: 175px; //радиус 175 пикселей для всех браузеров
	-webkit-border-radius: 175px; //радиус 175 пикселей для Оперы, Хрома и Сафари
	-moz-border-radius: 175px; //радиус 175 пикселей для Мозилы
}

Использую вышеперечисленный метод вы позволяете пользователям вашего сайта скачать вашу картинку себе на компюьтер.

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

И еще один совет: если хотите чтобы круг получился абсолютно ровный и чтобы не высчитывать пиксели вашего изображения используйте следующий атрибут — border-radius: 50%;. Ниже пример использования:

.my_image_circle{
	width: 350px; //ширина изображения
	height: 350px; //высота изображения
	border-radius: 175px; //радиус 175 пикселей для всех браузеров
	-webkit-border-radius: 175px; //радиус 175 пикселей для Оперы, Хрома и Сафари
	-moz-border-radius: 175px; //радиус 175 пикселей для Мозилы
	background: url("http://your_site.ru/images/image.jpg") no-repeat; //фоновое изображение
}

Получилась не большая статейка, но очень полезная. Может кто-то захочет сделать свои картинки на сайте круглыми и вот вам решение))).

На этом буду прощаться — до скорых встреч!


Обо мне
Юрич:
Занимаюсь созданием сайтов на WordPress более 6 лет. Ранее работал в нескольких веб-студиях и решил делиться своим опытом на данном сайте. Пишите комментарии, буду рад общению.

Заказать сайт