Стили CSS3 для изображений

Стили CSS3 для изображений

Стили CSS3 для изображений

» » Сообщение:

Сегодня речь пойдет о стилях CSS3, которые можно применить к изображениям (код предоставлен в виде сниппетов, поэтому эти данные вы можете использовать в своих проектах).

Стоит отметить, что основные свойства, которые мы будем использовать - это box-shadow, border-radius и transition. Просто посмотрите на пример и увидите что у нас получилось.

Проблема
Взгляните на пример и отметьте, что на изображении применены свойства border-radius и inset box-shadow. При этом Firefox отрисовывает border-radius на элементе с изображением, но не рисует inset box-shadow. Chrome или Safari не отрисовывают border-radius и inset box-shadow.

rounded-corner-problem.jpg

Решение
Чтобы эти свойства заработали на элементе изображения, переведем его в background-image

Код: Выделить всё Развернуть
<div style="background:url(image.jpg) no-repeat center center; width:150px; height:150px;">

</div>

Динамический способ
Динамика достигается с помощью jQuery. С помощью скрипта все изображения будут переводиться в background-image. Техника перевода следующая — скрипт jQuery обвязывает все изображения тэгом span и применяет на них свойство background-image.

Код: Выделить всё Развернуть
<script type="text/javascript" src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("img").load(function() {
    $(this).wrap(function(){
      return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });
});
</script>

Результат
Вот что получается на выходе:

Код: Выделить всё Развернуть
<span class="image-wrap " style="position:relative; display:inline-block; background:url(image.jpg) no-repeat center center; width: 150px; height: 150px;">
   <img src="image.jpg" style="opacity: 0;">
</span>

Изображение в форме круга
Теперь, когда проблема решена, мы можем с легкостью применять стили CSS3. Для начала сделаем с помощью свойства border-radius все квадратные изображения круглыми.

CSS

Код: Выделить всё Развернуть
.circle .image-wrap {
   -webkit-border-radius: 50em;
   -moz-border-radius: 50em;
   border-radius: 50em;
}

Пример

transition, box-shadow, border-radius, background-image, span, jquery



Похожие темыКомментарии ПросмотрыПоследнее сообщение
0378Индексация изображений Яндексом + Q...
Сообщение от: Admin
0425Image to URI, простой способ конвер...
Сообщение от: Admin
0318th23 Autolinks исправление парсинга...
Сообщение от: Admin
0582PHP скрипт для упаковывания изображ...
Сообщение от: Admin
02350Дженнифер Нидерст Роббинс. HTML5, C...
Сообщение от: Admin