Просмотров: 4 734

Как сделать картинку в круге только с помощью 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 вы можете добиться нужного радиуса скругления.

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

  • http://aizol.com.ua Макс

    Здравствуйте Дмитрий! Это все ясно было уже давно, лучше бы про скрипт .htc для IE написали, думаю новичкам будет интересно про него узнать. Мне как то приходилось с ним работать.

  • вика

    Это всё классно, только вот пользователи редко загружают квадратные фото.

  • http://bookashka.name/ru/b/30844/ Двадцать лет под кроватью

    Привет! Как сделать, чтобы картинка менялась при наведении на нее курсора мыши? Как добавить картинку на веб-страницу?