Эффекты для изображений на CSS3 (-webkit-filter)

Эффекты для изображений на CSS3 (-webkit-filter)

23.08.201223862

Это занятная вещь – делать эффекты для изображений на CSS3. Так же, как и в графическом редакторе, можно настроить контрастность, яркость и даже сделать инверсию. И это еще не весь перечень того, что можно сделать с картинкой на CSS. Чуть было не забыл предупредить, это пример использования «-webkit-filter». Соответственно, и работать будет только в браузерах Webkit (Chrome).

И так, что еще можно сделать с изображением. Конечно, все знают про прозрачность. Тут даже и не нужно было вспоминать ее, просто существует такой вот фильтр на CSS. Лишний способ использования прозрачности на HTML странице. Так же есть еще яркость. Считаю, что с помощью прозрачности можно так же настраивать яркость. Тот же эффект. Вот самое полезное из всех фильтров CSS – это оттенки серого и сепия. Эффект занятный: при наведении изображение обретает цвет, хотя только что оно было черно-белым. Еще один полезный фильтр – контрастность, это придает картинкам сочности, а может и наоборот, тусклости. Не зыбываем и про размытие, иногда этот эффект бывает полезным. Инверсия – тоже интересно, напоминает рентгеновские снимки. Можно спутать инверсию с заменой цвета. Инверсия обращает цвета, делает их противоположными, а замена – делает цвета другими, но не противоположными.


Код HTML



Code
<!-- Lets make some simple hover effects with CSS3 Filters -->
<div id="gallery">
  <a href="#">
  <!-- Title and classes -->
  <span class="title">Насыщенность</span>
  <img src="http://thecodeplayer.com/uploads/media/forest.jpg" class="saturate" />
  </a>
  <a href="#">
  <span class="title">Оттенки серого</span>
  <img src="http://thecodeplayer.com/uploads/media/lake.jpg" class="grayscale" />
  </a>
  <a href="#">
  <span class="title">Контраст</span>
  <img src="http://thecodeplayer.com/uploads/media/tree.jpg" class="contrast" />
  </a>
  <a href="#">
  <span class="title">Яркость</span>
  <img src="http://thecodeplayer.com/uploads/media/leaves.jpg" class="brightness" />
  </a>
  <a href="#">
  <span class="title">Размытие</span>
  <img src="http://thecodeplayer.com/uploads/media/redflower.jpg" class="blur" />
  </a>
  <a href="#">
  <span class="title">Инверсия</span>
  <img src="http://thecodeplayer.com/uploads/media/zebra.jpg" class="invert" />
  </a>
  <a href="#">
  <span class="title">Сепия</span>
  <img src="http://thecodeplayer.com/uploads/media/tree2.jpg" class="sepia" />
  </a>
  <a href="#">
  <span class="title">Замена цвета</span>
  <img src="http://thecodeplayer.com/uploads/media/landscape.jpg" class="huerotate" />
  </a>
  <a href="#">
  <span class="title">Прозрачность</span>
  <img src="http://thecodeplayer.com/uploads/media/mountain.jpg" class="opacity" />
  </a>
</div>

Код CSS



Code
/*Styles*/
* { margin: 0; padding: 0;}

body {
  font-family: arial, verdana, tahoma;
  background: url('http://thecodeplayer.com/uploads/media/pxpat.png');
}

#gallery {
  width: 725px;
  margin: 25px auto;
}

#gallery a {
  display: block;
  float: left;
  margin-bottom: 25px;
  position: relative;
   
  -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
}

/*Left and Right margins to images in the middle column*/
/*This selects the 2nd, 5th and 8th elements*/
#gallery a:nth-child(3n+2) {
  margin: 0 25px 25px 25px;
}

#gallery a img {
  display: block;
  -webkit-transition: all 0.5s;
}

/*Hover effects*/
#gallery a img:hover {
  -webkit-filter: none; /*Returns to default state*/
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover {
  -webkit-filter: brightness(0);
}

/*Title styles*/
.title {
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  position: absolute;
  left: 0;
  bottom: 15px;
  z-index: 1;
  padding: 5px 7px;
  background: rgba(0, 0, 0, 0.6);
}

/*Filter styles*/
.saturate {-webkit-filter: saturate(3);}
.grayscale {-webkit-filter: grayscale(100%);}
.contrast {-webkit-filter: contrast(160%);}
.brightness {-webkit-filter: brightness(0.25);}
.blur {-webkit-filter: blur(3px);}
.invert {-webkit-filter: invert(100%);}
.sepia {-webkit-filter: sepia(100%);}
.huerotate {-webkit-filter: hue-rotate(180deg);}
.opacity {-webkit-filter: opacity(50%);}



Сохраните в социальную сеть
Комментарии (2)
Спасибо большое, очень полезно и просто.
0
Филипп 09.10.2012 в 18:26Спам
Норм!
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт