Просмотров: 6 841

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

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

  • http://www.odnoklassniki.ru/profile/84551160859 виктор гильман

    Лишнее подтверждение слов Джоан Роулинг — «Все до смешного просто, если знаешь как»