Круглые изображения с помощью CSS3
Привет всем!
Я раньше писал про политику конфиденциальности и это как бы была теория. А сегодня у нас практическое занятие — мы рассмотрим как можно сделать у себя на сайте круглые изображения не прибегая к фотошопу или аналогичным программам.
Я давно уже знал как используя 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; //фоновое изображение }
Получилась не большая статейка, но очень полезная. Может кто-то захочет сделать свои картинки на сайте круглыми и вот вам решение))).
На этом буду прощаться — до скорых встреч!