Для начала рекомендую ознакомиться с первой статьей на эту тему - WebKit фильтры - grayscale, sepia, saturate, hue-rotate, invert, brightness, contrast, blur, где рассматривается большая часть фильтров с примерами на картинках.
Применение -webkit-filter для блоков
В предыдущей статье я рассматривала только работу фильтров с картинками. Я теперь применим, например, размытие к блоку, содержащему текст:
<div style="padding: 20px; float: left; background: violet; border: 1px solid blueviolet;">Данный фильтр задает размытие <span style="background: blueviolet; padding: 2px;">изображения</span>. Задается в пикселах, по умолчанию - 0px</div>
<div style="padding: 20px; float: left; background: violet; border: 1px solid blueviolet; -webkit-filter: blur(2px)">Данный фильтр задает размытие <span style="background: blueviolet; padding: 2px;">изображения</span>. Задается в пикселах, по умолчанию - 0px</div>
Аналогично будет размываться и картинка, если будет содержаться в таком блоке. Фоновая картинка и внутренняя картинка размываются по-разному
<div style="-webkit-filter: blur(5px); float: left; width: 200px; height: 200px; overflow: hidden;"><img src="http://kate-land.net/images/stories/graffit.jpg" style="width: 200px; height: 200px;" /></div><div style="-webkit-filter: blur(5px); float: left; width: 200px; height: 200px; background: url(http://kate-land.net/images/stories/graffit.jpg); background-size: 100% 100%;"> </div>
Подробнее о hue-rotate
В предыдущей статье я писала о этом значении свойства -webkit-filter, но хочу еще раз на этом остановиться. Параметр этого свойства задается в градусах - от 0 до 360. Это влияет на цвет, ибо градусы относятка к цветовому кругу, в котором цвета плавно переливаются по радуге от красного до фиолетового. Этот круг выглядит так:
И в зависимости от цвета на круге по указанному градусу, ваш элемент будет меняться. Катринка от граффити команды Граффит, взята с http://www.istockphoto.com
-webkit-filter: hue-rotate(0deg)
-webkit-filter: hue-rotate(120deg);
-webkit-filter: hue-rotate(240deg);
-webkit-filter: drop-shadow и его отличия от box-shadow
Фильтр drop-shadow, как понятно из названия, создает тень элемента.
Вроде бы очень похоже на свойство box-shadow, которое можно применять к элементам. Но отличия есть и они вдохновляют. Покажу возможности этого свойства на трех примерах - border, рисованные при помощи CSS объекты (bubble) и картинки png.
Применение drop-shadow к элементу с border:
Применение к элементу типа bubble(про рисование bubble в статье Делаем bubble на CSS). Первый вариант с применением drop-shadow, а второй -- box-shadow
Ну и последний вариант - применение -webkit-filter: drop-shadow к картинке:
<p style="float:left; margin-right: 30px;"><img alt="" src="/images/stories/black-cat.png" style="-webkit-filter: drop-shadow(3px 3px 3px yellow); width: 200px;" /></p><p style="float:left; margin-right: 30px;"><img alt="" src="/images/stories/black-cat.png" style="-webkit-filter: drop-shadow(3px 3px 3px blue); width: 200px;" /></p><p style="float:left; margin-right: 30px;"><img alt="" src="/images/stories/black-cat.png" style="-webkit-filter: drop-shadow(3px 3px 3px green); width: 200px;" /></p>
Жаль, что эти прелести пока доступны только для WebKit браузеров...