Просмотров: 10 788

Как сделать картинку в круге только с помощью CSS.

Просматривая разные сайты в Интернет вы наверняка могли видеть вот такие изображения, которые обрезаны по кругу:

28-02-2014 6-09-42

 

или такое

28-02-2014 6-10-25

Особенно часто это можно встретить в Google+.

Каким же образом такие картинки создаются?

Сначала я подумал, что картинки каким-то образом специально обрабатываются в графических редакторах, а затем вставляются на странице. На самом деле это не так.

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

Итак, давайте для примера я возьму свое фото:

<img style="width:130px;" src="//webgyry.info/images/myphoto.png">

Сейчас оно квадратное. Нужно это исправить.

На самом деле добавить такой эффект довольно легко, нужно воспользоваться свойтсвом border-radius.

Я добавляю к своему изображению класс «round» и в этот классе размещаю стили для кроссбраузерного отображения этого свойства.

Выглядит это следующим образом:

HTML код:

 <img style="width:130px;" src="//webgyry.info/images/myphoto.png" class="round">

CSS: 

.round {
 -moz-border-radius: 100px; /* Firefox */
 -webkit-border-radius: 100px; /* Safari, Chrome */
 -khtml-border-radius: 100px; /* KHTML */
 border-radius: 100px; /* CSS3 */
 behavior: url(border-radius.htc); /*IE */
}

Смотрим, что получилось в итоге:

 

Играясь со значением border-radius вы можете добиться нужного радиуса скругления.

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

Далее. Следующие уроки по CSS.