Pull to refresh

Настоящее скругление углов картинок на клиенте

Reading time 3 min
Views 27K
О скруглении углов в html-верстке сказано уже столько, что я пойму тех кто прочитав заголовок иронично улыбнется и подумает «опять 25, ну сколько можно...». Поэтому я постараюсь кратко изложить суть, и сразу предупрежу, что этот метод вы едва ли могли видеть раньше.


Задача

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

Процесс решения

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

Начал я с того что «по-честному» скруглить прямоугольную картинку, выколов углы, может только CSS3-свойство border-radius, пока забудем что оно не поддерживается в IE6-8.

И так, берем картинку неизвестного размера и применяем к ней border-radius:

HTML:

<img class="b-img-radius" src="i/tmp/1.jpg" />

* This source code was highlighted with Source Code Highlighter.


CSS:

/* IMG radius */

.b-img-radius {
  border: 1px solid #000;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

/* ----------- */


* This source code was highlighted with Source Code Highlighter.


Получаем:



Совсем не то что надо, рамка живет своей жизнью, изображение своей. Попробуем по другому, положим картинку на фон inline-block элемента, но придется задавать ему размер картинки.

HTML:

<div class="b-img-radius" style="background: url(i/tmp/1.jpg); width: 250px; height: 167px"></div>

* This source code was highlighted with Source Code Highlighter.


CSS тот же.

Получаем:



Уже лучше, скругление работает, но указывать размеры совсем не хочется, поэтому вставляем внутрь нашего inline-block элемента эту же картинку без указания размеров и скрываем через visibility: hidden; таким образом она будет распирать наш блок с бэкграундом до нужного размера.

HTML:

<div class="b-img-radius" style="background: url(i/tmp/1.jpg)"><img src="i/tmp/1.jpg" /></div>

* This source code was highlighted with Source Code Highlighter.


CSS:

/* IMG radius */

.b-img-radius {
  zoom: 1;
  position: relative;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  display: inline-block;
  vertical-align: top;
}

  .b-img-radius img {
    display: block;
    visibility: hidden;
  }
  
/* ----------- */


* This source code was highlighted with Source Code Highlighter.


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

А что же IE?

Все до банальности просто. Есть очень мощная библиотека CSS3 Pie которая реализует на VML многие CSS3 свойства для IE6-8, включая border-radius, она невероятно проста и весит всего 28кб. Все что нам нужно это добавить в CSS строчку:

/* IMG radius */
.b-img-radius {
.......

behavior: url(css/PIE.htc);
}


* This source code was highlighted with Source Code Highlighter.


IE6 легко с этим справляется и не подтормаживает даже если таких элементов на странице больше 10. А главное что добавление VML-объектов никак не сказывается на кликабельности картинки. Например мы можем сделать ее ссылкой просто заменив div на a:

HTML:

<a href="#" class="b-img-radius" style="background: url(i/tmp/1.jpg); width: 250px; height: 167px"><img src="i/tmp/1.jpg" /></a>

* This source code was highlighted with Source Code Highlighter.


Итог

В результате мы получили что хотели, элемент остается инлайновым как обычная картинка, не нуждается в указании размеров картинка сама займет столько места сколько нужно, мы можем гибко менять радиус скругления углов, задавать или не задавать рамку любого размера и цвета через CSS, а главное не думать о том на какой фон ложится картинка, и еще, внимание(!), можно задавать тень через box-shadow что тоже будет работать в IE6++!

Финальный пример, (Зеркало1)

Кроссбраузерность: IE6++ и все современные версии FF, Opera, Chrome, Safari.

Этот компонент идеально подойдет тем кто верстает независимыми блоками, добавив его себе в набор, вы сильно упростите себе жизнь.

Буду рад ответить на любые ваши вопросы, коллеги.
Tags:
Hubs:
+125
Comments 122
Comments Comments 122

Articles