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

В одном из предыдущих уроков с помощью jQuery было продемонстрировано решение задачи некорректного отображения теней и радиусных границ для элемента изображения в некоторых браузерах. Изображение используется в качестве фона для внешнего контейнера, к которому можно применять любые стили. Данный урок демонстрирует стили изображений, которые можно получить используя трюк с фоном. 

Проблема

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


Решение

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

Динамичное решение

Можно использовать jQuery для динамичного преобразования каждого элемента изображений. Ниже представлен код, который оборачивает каждый элемент изображения тегом span и использует для него картинку в качестве фона.
Code

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/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>


В результате работы скрипта будет генерироваться следующий код HTML:
Code

<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>


Ниже представлено несколько стилей, которые можно использовать в своих проектах для оформления интерфейса или галерей.

Круглое изображение

 
Code

.circle .image-wrap {
  -webkit-border-radius: 50em;
  -moz-border-radius: 50em;
  border-radius: 50em;
}


Стиль карт

 
Code

.card .image-wrap {
  -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
  -moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);
  box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4);

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}


Тисненый стиль

 

Code

.embossed .image-wrap {
  -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
  -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);
  box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3);

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}


Стиль легкого тиснения

 
Code

.soft-embossed .image-wrap {
  -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
  -moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);
  box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3);

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}


Вырезанный стиль

 

Code

.cut-out .image-wrap {
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
  -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);
  box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6);

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}


Трансформация и свечение

 

Code

.morphing-glowing .image-wrap {
  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.morphing-glowing .image-wrap:hover {
  -webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
  -moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
  box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);

  -webkit-border-radius: 60em;
  -moz-border-radius: 60em;
  border-radius: 60em;
}


Глянцевый стиль

 
Code

.glossy .image-wrap {
  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
  -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.5);

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.glossy .image-wrap:after {
  position: absolute;
  content: ' ';
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;

  background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
  background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}


Отражение

 
Code

.reflection .image-wrap:after {
  position: absolute;
  content: ' ';
  width: 100%;
  height: 30px;
  bottom: -31px;
  left: 0;

  -webkit-border-top-left-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-topright: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;

  background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
  background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}

.reflection .image-wrap:hover {
  position: relative;
  top: -8px;
}


Глянец и отражение

 
Code

.glossy-reflection .image-wrap {
  -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
  -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);

  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.glossy-reflection .image-wrap:before {
  position: absolute;
  content: ' ';
  width: 100%;
  height: 50%;
  top: 0;
  left: 0;

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;

  background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1)));
  background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%);
}

.glossy-reflection .image-wrap:after {
  position: absolute;
  content: ' ';
  width: 100%;
  height: 30px;
  bottom: -31px;
  left: 0;

  -webkit-border-top-left-radius: 20px;
  -webkit-border-top-right-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-topright: 20px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;

  background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0)));
  background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%);
}


Со скотчем

 
Code

.tape .image-wrap {
  -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
  box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}

.tape .image-wrap:after {
  position: absolute;
  content: ' ';
  width: 60px;
  height: 25px;
  top: -10px;
  left: 50%;
  margin-left: -30px;
  border: solid 1px rgba(137,130,48,.2);

  background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6)));
  background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%);
  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2);
}


Трансформация и затемнение
Code

.morphing-tinting .image-wrap {
  position: relative;

  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;

  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.morphing-tinting .image-wrap:hover {
  -webkit-border-radius: 30em;
  -moz-border-radius: 30em;
  border-radius: 30em;
}

.morphing-tinting .image-wrap:after {
  position: absolute;
  content: ' ';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  -webkit-transition: 1s;
  -moz-transition: 1s;
  transition: 1s;

  -webkit-border-radius: 30em;
  -moz-border-radius: 30em;
  border-radius: 30em;
}
.morphing-tinting .image-wrap:hover:after {
  background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
  background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px);
}


Пропадающая граница

 
Code

.feather .image-wrap {
  position: relative;

  -webkit-border-radius: 30em;
  -moz-border-radius: 30em;
  border-radius: 30em;
}

.feather .image-wrap:after {
  position: absolute;
  content: ' ';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1)));
  background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px);
}


Демка я думаю сдесь не понадобится...все и так видно!!

  • FalleN

  • 1459

  • 1

  • 0
Теги:

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!