Просмотров: 5 102

Как сделать картинку в круге только с помощью 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/ Двадцать лет под кроватью

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

  • http://vk.com/id167699806 Олег Минюк

    Спасибо за лаконичное и понятное объяснение.
    Единственное, что хотелось бы добавить — решение работает на квадратных изображениях, а вот прямоугольные сначала нужно вписать в заданную область.