Четверг, 20 Декабря 2012 14:18

WebKit фильтры. Часть вторая

Written by 
Оцени эту запись
(2 Голоса)

Хочу продолжить тему CSS фильтров для WebKit. И по этому поводу рассмотрю такие моменты:

 

  • применение фильтров для блока, а не только для изображений
  • подробнее о -webkit-filter: hue-rotate
  • -webkit-filter: drop-shadow и его отличия от box-shadow

 

 

 

Для начала рекомендую ознакомиться с первой статьей на эту тему - 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>

 

 

Данный фильтр задает размытие изображения. Задается в пикселях, по умолчанию - 0px
Данный фильтр задает размытие изображения. Задается в пикселях, по умолчанию - 0px
 

 

Аналогично будет размываться и картинка, если будет содержаться в таком блоке. Фоновая картинка и внутренняя картинка размываются по-разному

 

 

<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%;">&nbsp;</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

 

 

Bubble Text
Bubble Text

 

 

Ну и последний вариант - применение -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 браузеров...

 

 

Additional Info

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


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

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов