Скругление краев у картинок

Ведь иногда хочется, что бы некоторые элементы на странице выглядели более плавно. Как сделать такое с картинками я нашел на одном англоязычном блоге. Перевод его статьи доступен ниже.
Начало
Применяя border-radius к картинке в Mozilla FireFox мы не получаем необходимый результат. А почему бы не сделать тег span (обертку), для которого задать нашу картинку как background? Darcy Clarke уже написал код на jQuery, который делает такую обертку автоматически (за что ему спасибо).
Мы используем CSS3 border-radius, box-shadow feature для того, что бы получить результат как на скриншоте:
Скругленные края
Проблема
Современные браузеры сами по себе не отображают скругленные края так, как бы нам того хотелось. Webkit их отображает, но внутренняя тень в блоке невозможна. В Firefox скругленныен края не отображаются вовсе.
Проблемы в разных браузерах
CSS трюк
Трюк очень простой — мы создаем тег span вокруг изображения. А само изображение ставим как background-image. Что бы скрыть оригинальное изображение используем opacity:0 или display:none. Я нахожу использование метода непрозрачности лучшим, потому что изображение останется доступным для копии или загрузки.

<span style="background: url(img.jpg) no-repeat;">
<img style="opacity: 0;" src="img.jpg" alt="" />
</span>

Добавка jQuery
Чтобы было легче, мы будем использовать jQuery, чтобы автоматически обертывать тег span вокруг картинки.
JQuery-код находит все элементы класса «.rounded-img» или «rounded-img2» (можно укзаать свои) и будет обертывать их тегом span. Сценарий находит src, width, height и атрибут class исходного изображения, и применяют их как атрибуты обернутого тега span. Затем для исходного изображения ставится opacity: 0, что его скрыть.
код,который получается
Ну и вот сам javascript-код.

<script src="jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });
});
// ]]></script>

Оригинал статьи
Демо

Послесловие
Увы, в IE такой трюк не работает…. Я люблю IE..

, , , ,

Оставить комментарий

Top ↑ | Main page | Back