Округленные стили изображений с помощью jQuery и CSS3

В данном уроке мы разберемся как сделать скругленную стилизацию для картинок с помощью CSS3 и jQuery. Дело в том, что далеко не все браузеры корректно отображают свойства CSS3 border-radius и box-shadow. Но проблему можно решить с помощью тега span.

Цель

С помощью свойств CSS3 border-radius и box-shadow стилизовать изображения как на представленном ниже рисунке:

 

Проблема

Не все браузеры корректно выводят свойства CSS3 border-radius и box-shadow:

 

Трюк CSS

Трюк очень простой: оборачиваем тег span вокруг элемента изображения. Определяем оригинальное изображение в качестве фона. Скрываем оригинальное изображение с помощью свойства opacity:0 или display:none. Лучше использовать изменение прозрачности, так как остается возможность копировать или загружать изображение.

Окончательное решение с помощью jQuery

Для облегчения собственной жизни мы будем использовать jQuery для оборачивания тега вокруг span изображений.

Код jQuery, приведенный ниже, ищет элементы с классами ".rounded-img" или "rounded-img2" (в демонстрации именно данные классы используются для изображений) и оборачивает их в тег span. Скрипт получает значения атрибутов src, width, height, и класс CSS c оригинального изображения и использует их во встроенных стилях тега span. Затем оригинальному изображению устанавливается нулевая прозрачность, чтобы скрыть его.

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

<script type="text/javascript" src="/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(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>

 

Пример использования

Таким образом можно оформить аватарки в комментариях к блогу:


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/D66h38i-leQ/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Округленные стили изображений с помощью jQuery и CSS3 | | 2012-06-19 12:02:40 | | Статьи Web-мастеру | | В данном уроке мы разберемся как сделать скругленную стилизацию для картинок с помощью CSS3 и jQuery. Дело в том, что далеко не все браузеры корректно отображают свойства CSS3 border-radius и | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: