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

Статья читается: 1 мин.

Привет всем!

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

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

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

<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; //фоновое изображение
}

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

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

Вам понравилась статья?
плохохорошо (Пока оценок нет)
Загрузка...
Обо мне
Юрич:
Занимаюсь созданием сайтов на ВордПресс более 5 лет. Работал в нескольких веб-студиях, да и сейчас работаю. Иногда подрабатываю на фрилансе, как на нашем так и на зарубежном. Везде зарекомендовал себя очень хорошо. Если нужен сайт на вордресс, шаблон для сайта или лендинг - не стесняйтесь - пишите. Рад буду помочь!