О скруглении углов в html-верстке сказано уже столько, что я пойму тех кто прочитав заголовок иронично улыбнется и подумает «опять 25, ну сколько можно...». Поэтому я постараюсь кратко изложить суть, и сразу предупрежу, что этот метод вы едва ли могли видеть раньше.
Если коротко, то задача была не имитировать скругление углов под определенный фон и с определенной рамкой, а реализовать реальное скругление углов изображения, не зависимо от фона и размеров картинки, с возможностью задавать любую рамку и радиус скругления. Конечно же это должно работать во всех браузерах, включая IE6.
Чтож, задача на первый взгляд просто нереальная и очень долго я даже не пытался ее решить, каждый раз вырезая под определенный фон уголки определенного радиуса и накладывая их сверху картинки. Но как-то раз я решил серьезно взяться за этот вопрос со всем упорством и всеми своими знаниями в области верстки.
Начал я с того что «по-честному» скруглить прямоугольную картинку, выколов углы, может только CSS3-свойство border-radius, пока забудем что оно не поддерживается в IE6-8.
И так, берем картинку неизвестного размера и применяем к ней border-radius:
HTML:
CSS:
Получаем:
Совсем не то что надо, рамка живет своей жизнью, изображение своей. Попробуем по другому, положим картинку на фон inline-block элемента, но придется задавать ему размер картинки.
HTML:
CSS тот же.
Получаем:
Уже лучше, скругление работает, но указывать размеры совсем не хочется, поэтому вставляем внутрь нашего inline-block элемента эту же картинку без указания размеров и скрываем через visibility: hidden; таким образом она будет распирать наш блок с бэкграундом до нужного размера.
HTML:
CSS:
На первый взгляд некрасиво дублировать путь к картинке но я считаю это того стоит, тем более раз этот элемент универсальный то его вполне можно вынести в отдельный контрол/хелпер в вашем проекте и код станет красивым.
Все до банальности просто. Есть очень мощная библиотека CSS3 Pie которая реализует на VML многие CSS3 свойства для IE6-8, включая border-radius, она невероятно проста и весит всего 28кб. Все что нам нужно это добавить в CSS строчку:
IE6 легко с этим справляется и не подтормаживает даже если таких элементов на странице больше 10. А главное что добавление VML-объектов никак не сказывается на кликабельности картинки. Например мы можем сделать ее ссылкой просто заменив div на a:
HTML:
В результате мы получили что хотели, элемент остается инлайновым как обычная картинка, не нуждается в указании размеров картинка сама займет столько места сколько нужно, мы можем гибко менять радиус скругления углов, задавать или не задавать рамку любого размера и цвета через CSS, а главное не думать о том на какой фон ложится картинка, и еще, внимание(!), можно задавать тень через box-shadow что тоже будет работать в IE6++!
Финальный пример, (Зеркало1)
Кроссбраузерность: IE6++ и все современные версии FF, Opera, Chrome, Safari.
Этот компонент идеально подойдет тем кто верстает независимыми блоками, добавив его себе в набор, вы сильно упростите себе жизнь.
Буду рад ответить на любые ваши вопросы, коллеги.
Задача
Если коротко, то задача была не имитировать скругление углов под определенный фон и с определенной рамкой, а реализовать реальное скругление углов изображения, не зависимо от фона и размеров картинки, с возможностью задавать любую рамку и радиус скругления. Конечно же это должно работать во всех браузерах, включая 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.
Этот компонент идеально подойдет тем кто верстает независимыми блоками, добавив его себе в набор, вы сильно упростите себе жизнь.
Буду рад ответить на любые ваши вопросы, коллеги.
