Круглые изображения на сайте.

Рубрикатор статьи

Приветствую, Друзья. В прошлой статье я рассказывал, как закруглить углы элементов, используя CSS. И чтобы «добить» эту тему до конца решил написать этот небольшой пост, который хочу посвятить тому, как сделать круглые изображения, используя CSS и не только. При чем здесь прошлая статья? Да при том, что круглые изображения делаются тем же свойством, что и закругленные углы, только значения будут отличаться от тех, что были использованы в прошлый раз.

Для понимания этой статьи, я рекомендую Вам прочитать прошлый пост, который поможет лучше ориентироваться в теме.

Круглые изображения на сайте.

Как Вы могли заметить, я на блоге использую, как закругленные углы элементов, так и круглые изображения в комментариях. И все это сделано исключительно с помощью CSS3. На мой взгляд, это проще, чем возня с изображениями каждого угла и подгонка их на место. Однако, стоит учитывать, что круглые изображения способны отобразить не все версии веб-браузеров. Конечно, популярные браузеры последних версий справляются с этой задачей без проблем, но с более ранними версиями могут возникать проблемы. Поэтому, мы поговорим  и о том, как сделать так, чтобы круглые изображения работали во всех версиях браузеров.

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

Еще хотелось бы уточнить: Почему именно изображения? На самом деле не только изображения можно сделать круглыми, но и любые другие элементы. Просто мы разберем эту возможность именно на изображениях, так как подобные возможности применяются чаще к различным картинкам на сайте.

Круглые изображения, используя CSS.

Я возьму для примера изображение своего аватара на блоге. Код будет выглядеть следующим образом:

1
<img style="height:100px; width:100px;" alt="" src="путь к изображению">

Свойства прописываем с помощью атрибута style, но это только для примера. Правильнее использовать отдельный файл в формате CSS.

Вот так выглядит аватар без каких-либо манипуляций к границам углов:

Как я уже упомянул выше, чтобы сделать картинку круглой мы будем использовать то же свойство, что и при закруглении углов элементов: border-radius. Только в этот раз мы укажем значение в процентах, так как это самый простой способ сделать изображение любого размера круглым, ну или другой элемент, например DIV.

Добавим свойство border-radius, значение которого равно 50 процентам от ширины или высоты элемента:

1
<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.

1
<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, появится окошко, где в поле «Использовать» необходимо выбрать «Цвет…», и выбрать нужный цвет заливки. Помимо этого, необходимо снять галочку «Сохранить прозрачность», если она стоит

Круглые изображения во всех браузерах.

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

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

Теперь остается последний шаг. Нам необходимо вырезать середину, чтобы она стала прозрачной. Выбираем инструмент «Овальная область».

 Выбираем инструмент "Овальная область".

После чего этим инструментов выделяем круглую область в центре изображения. По сути, останутся только углы, а середина и края картинки станут прозрачными. Но по краям также можно оставить немного фона, например один пиксель. Здесь дело лично каждого, как сделать круг. Учтите, что круг, который мы сейчас выделим, и будет образовывать круглое изображение на сайте. Вот что получилось у меня.

После чего этим инструментов выделяем круглую область в центре изображения.

После того, как нужная область выделена, просто нажимаем на кнопку Delete и сохраняем изображение в формате PNG, чтобы сохранить его прозрачность. Конечный результат должен быть примерно таким:

просто нажимаем на кнопку Delete и сохраняем изображение в формате PNG

Теперь полученную картинку заливаем на сервер, с помощью ftp-клиента. Самым удобным вариантом залить туда, где у вас будут находиться изображения, которые нужно сделать круглыми. Теперь остается наложить это изображение на нужную картинку или элемент. В моем случае — это аватар. Для этого немного изменим код:

1
<img style="height:100px; width:100px; background: url('путь к изображению аватара') no-repeat;" alt="" src="путь к изображению, созданному в фотошоп">

И получим такой результат:

Обратите внимание, что аватар стал фоном, а изображение, подготовленное в графическом редакторе, стало как бы основным изображением.

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

У меня на этом все. Удачи!

Видеокурс "Технические секреты групп Вконтакте" доступен для скачивания!

Не получается сделать меню в группе Вконтакте? Устали платить другим за добавление меню в Вашу группу? Хотели бы научится всем техническим тонкостям и экономить свои деньги? Тогда скачайте курс прямо сейчас!

VN:F [1.9.22_1171]
Оценка статьи: 10.0/10 (3 голосов)
Автор: Михаил Веб Дата публикации: 04.12.2013