Приветствую, Друзья. В прошлой статье я рассказывал, как закруглить углы элементов, используя CSS. И чтобы «добить» эту тему до конца решил написать этот небольшой пост, который хочу посвятить тому, как сделать круглые изображения, используя CSS и не только. При чем здесь прошлая статья? Да при том, что круглые изображения делаются тем же свойством, что и закругленные углы, только значения будут отличаться от тех, что были использованы в прошлый раз.
Для понимания этой статьи, я рекомендую Вам прочитать прошлый пост, который поможет лучше ориентироваться в теме.
Как Вы могли заметить, я на блоге использую, как закругленные углы элементов, так и круглые изображения в комментариях. И все это сделано исключительно с помощью CSS3. На мой взгляд, это проще, чем возня с изображениями каждого угла и подгонка их на место. Однако, стоит учитывать, что круглые изображения способны отобразить не все версии веб-браузеров. Конечно, популярные браузеры последних версий справляются с этой задачей без проблем, но с более ранними версиями могут возникать проблемы. Поэтому, мы поговорим и о том, как сделать так, чтобы круглые изображения работали во всех версиях браузеров.
Еще хотелось бы уточнить: Почему именно изображения? На самом деле не только изображения можно сделать круглыми, но и любые другие элементы. Просто мы разберем эту возможность именно на изображениях, так как подобные возможности применяются чаще к различным картинкам на сайте.
Круглые изображения, используя CSS.
Я возьму для примера изображение своего аватара на блоге. Код будет выглядеть следующим образом:
<img style="height:100px; width:100px;" alt="" src="путь к изображению">
Свойства прописываем с помощью атрибута style
, но это только для примера. Правильнее использовать отдельный файл в формате CSS.
Вот так выглядит аватар без каких-либо манипуляций к границам углов:
Как я уже упомянул выше, чтобы сделать картинку круглой мы будем использовать то же свойство, что и при закруглении углов элементов: border-radius
. Только в этот раз мы укажем значение в процентах, так как это самый простой способ сделать изображение любого размера круглым, ну или другой элемент, например DIV
.
Добавим свойство border-radius
, значение которого равно 50 процентам от ширины или высоты элемента:
<img style="height:100px; width:100px; border-radius:50%;" alt="" src="путь к изображению">
И тогда аватар станет выглядеть так:
Ну и конечно не забываем о префиксах, которые могут позволить заставить работать некоторые более старые версии веб-браузеров.
Chrome до версии 4.0, Safari до версии 5.0, iOS используют нестандартное свойство -webkit-border-bottom-left-radius.
Firefox до версии 4.0 использует нестандартное свойство -moz-border-radius-bottomleft.
<img style="height:100px; width:100px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;" alt="" src="путь к изображению">
Круглые изображения во всех браузерах.
Здесь есть два варианта:
Первый: Делать каждое изображение или элемент круглым в графическом редакторе и только потом загружать на сайт. Довольно муторный метод, и я бы не стал его использовать, ибо это просто устаревший вариант, на мой взгляд.
Второй: Второй вариант также не всегда применим из-за особенностей дизайна сайта, однако этот вариант гораздо лучше первого.
Заострим взгляд именно на нем. Для осуществления данной манипуляции нам также потребуется графический редактор, например, фотошоп. В котором мы можем сделать изображение цвет границ которого будет совпадать с цветом фона на сайте. А середина изображения будет образовывать прозрачный круг. Предположим, что фон сайта белый.
Для начала откроем графический редактор, который используем и создадим изображение равное размерам в данном случае аватара. То есть 100 на 100 пикселов. Я буду показывать на примере графического редактора фотошоп.
Для начала нажимаем сочетание клавиш Ctrl+N
. Появится окошко в котором мы можем задать параметры создаваемого изображения. В данном примере я создам изображение с одинаковыми сторонами равными 100 пикселам и прозрачным фоном.
После этого, заливаем изображение нужным цветом, в зависимости от цвета фона Вашего сайта. В нашем случае это будет белый. Для этого нажимаем сочетание клавиш Shift+F5
, появится окошко, где в поле «Использовать» необходимо выбрать «Цвет…», и выбрать нужный цвет заливки. Помимо этого, необходимо снять галочку «Сохранить прозрачность», если она стоит
В итоге у нас должно получиться изображение, полностью залитое цветом, который соответствует цвету фона на сайте. В моем случае — это белый.
Теперь остается последний шаг. Нам необходимо вырезать середину, чтобы она стала прозрачной. Выбираем инструмент «Овальная область».
После чего этим инструментов выделяем круглую область в центре изображения. По сути, останутся только углы, а середина и края картинки станут прозрачными. Но по краям также можно оставить немного фона, например один пиксель. Здесь дело лично каждого, как сделать круг. Учтите, что круг, который мы сейчас выделим, и будет образовывать круглое изображение на сайте. Вот что получилось у меня.
После того, как нужная область выделена, просто нажимаем на кнопку Delete
и сохраняем изображение в формате PNG
, чтобы сохранить его прозрачность. Конечный результат должен быть примерно таким:
Теперь полученную картинку заливаем на сервер, с помощью ftp-клиента. Самым удобным вариантом залить туда, где у вас будут находиться изображения, которые нужно сделать круглыми. Теперь остается наложить это изображение на нужную картинку или элемент. В моем случае — это аватар. Для этого немного изменим код:
<img style="height:100px; width:100px; background: url('путь к изображению аватара') no-repeat;" alt="" src="путь к изображению, созданному в фотошоп">
И получим такой результат:
Обратите внимание, что аватар стал фоном, а изображение, подготовленное в графическом редакторе, стало как бы основным изображением.
Если Вы обратили внимание, в данном примере круг не совсем плавный, но это зависит от качества картинки из фотошоп. Я поставил низкое качество, поэтому края не такие плавные, как хотелось бы.
У меня на этом все. Удачи!