Привет. Сегодня уже никого не удивишь красивыми эффектами на сайтах. Некоторые вот уже последние 10 лет делают это на Flash, другие - ещё не перестали делать на Javascript, но самые продвинутые уже давно используют CSS3. Вот этим мы сегодня и займемся.
Научимся как обесцветить картинку CSS (Grayscale image css), и сделаем это красиво
Итак, начнем с простого, нам нужны красивые фото , возьмём вот такое:
Нам нужно его обесцветить (обесцветить картинку CSS - убрать цвета, сделать картинку черно-белой). Для этого (да и вообще для работы с графикой) в CSS3 есть специальное средство filter.
Вот его мы и применим.
Решение: обесцветить картинку CSS
Сначала сверстаем саму картинку:
Затем пропишем для картинки стиль:
Img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ }
Теперь наша картинка станет черно-белой.
Можно, конечно, на этом остановится, но гораздо интереснее, когда картинка ещё и отвечает на действия пользователя.
Предлагаю сделать так, чтобы при наведении на картинку, она плавно становилась цветной.
На самом деле, сделать это совсем не сложно, и вовсе не обязательно знать Javascript.
Анимировать обесцветить картинку CSS
Немного дополним наш предыдущий стиль:
Img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ } img:hover { -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; filter: none; /* IE 6-9 */ }
Это позволит картинке при наведении на неё мышкой, становится цветной. А ещё восмользуемся CSS3 transition, чтобы сделать процесс обесцвечивания анимированным:
Img { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ /*Добавим вот такой вот код*/ -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; transition: all 1s; /*конец кода с transition*/ } img:hover { -webkit-filter: none; -moz-filter: none; -ms-filter: none; -o-filter: none; filter: none; filter: none; /* IE 6-9 */ }
Параметр all в transition говорит, что правило будет работать для всех стилей, а второй параметр - время анимации.
В первый параметр можно указать определённое свойство (например height, чтобы анимировать только высоту), а во второй время в секундах (можно в десятичных дробях - 0,1s).
Бывает необходимо сделать изображение серым как можно быстрее и не используя графические редакторы. Конечно можно воспользоваться графическим редактором Adobe Photoshop(можно задать даже глубину и тон). В браузере конечно нельзя настраивать такие параметры, но наш глаз(если, конечно, вы не профессионал) почти не заметит разницы.
В этой статье мы рассмотрим способы как сделать изображение серым.
1. CSS фильтр
Использование свойства filter , пожалуй, является самым простым способом создать черно-белое изображение. Для создания черно-белого изображения в IE, необходимо использовать также свойство filter .
Сегодня, свойство filter является частью технологии CSS3, которое поддерживается такими браузерами как Firefox, Chrome и Safari. Webkit фильтры могут не только создавать эффект черно-белого изображения, но также могут придать эффект сепия и размытия.
Для того чтобы сделать изображение серым, необходимо прописать следующие свойства:
Данные код будет работать в IE6-9, Chrome18+, Safari 6.0+ и Opera15+.
2. Javascript
Альтернативой вышеприведенному коду является Javascript, который работает во всех браузерах, если он включен, включая IE6 и ниже.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | var imgObj = document.getElementById ("js-image" ) ; function gray(imgObj) { var canvas = document.createElement ("canvas" ) ; var canvasContext = canvas.getContext ("2d" ) ; var imgW = imgObj.width ; var imgH = imgObj.height ; canvas.width = imgW; canvas.height = imgH; canvasContext.drawImage (imgObj, 0 , 0 ) ; var imgPixels = canvasContext.getImageData (0 , 0 , imgW, imgH) ; for (var y = 0 ; y < imgPixels.height ; y++ ) { for (var x = 0 ; x < imgPixels.width ; x++ ) { var i = (y * 4 ) * imgPixels.width + x * 4 ; var avg = (imgPixels.data [ i] + imgPixels.data [ i + 1 ] + imgPixels.data [ i + 2 ] ) / 3 ; imgPixels.data [ i] = avg; imgPixels.data [ i + 1 ] = avg; imgPixels.data [ i + 2 ] = avg; } } canvasContext.putImageData (imgPixels, 0 , 0 , 0 , 0 , imgPixels.width , imgPixels.height ) ; return canvas.toDataURL () ; } imgObj.src = gray(imgObj) ; |
Используя Javascript, мы можем задавать изображению черно-белый эффект, например, при наведении и клике по изображению. Совместно можно использовать jQuery, чтобы создать плавный эффект перехода к серому. Единственным недостатком является то, что Javascript может быть отключен в браузере.
3. SVG
Другим способ является использование SVG фильтров.
Всё что вам нужно это создать SVG файл и использовать код ниже:
Также весь код можно написать прямо в CSS:
| 1 2 3 4 | img
{
filter
:
url
("url("data:image/svg+xml;utf8, |
Результат будет похожим.
Вывод
Для поддержки данного эффекта всеми браузерами, необходимо комбинировать все способы. Данный код будет работать в Firefox 3.5+, Opera15+, Safari, Chrome и IE.
| 1 2 3 4 5 6 7 8 | img { -webkit-filter: grayscale(100% ) ; -webkit-filter: grayscale(1 ) ; filter : grayscale(100% ) ; filter : url ("../img/gray.svg#grayscale" ) ; filter : gray ; } |
Данный код можно использовать вместе с Javascript, и в случае, если Javascript отключен, будет работать данный код. В этом может помочь Modernizr.
Modernizr добавляет js класс для body, если Javascript включен в браузере, и пропишет класс no-js если Javascript отключен. А в CSS осталось прописать сдедующее:
| 1 2 3 4 5 6 7 8 | .no-js img { -webkit-filter: grayscale(100% ) ; -webkit-filter: grayscale(1 ) ; filter : grayscale(100% ) ; filter : url ("../img/gray.svg#grayscale" ) ; filter : gray ; } |
CSS3 фильтры являются весьма интересным ответвлением от SVG, позволяющим изменять HTML-элементы и изображения, применяя фильтры размытия, яркости и многие другие. В этом уроке мы кратко рассмотрим, как именно они работают.
Как это работает?
Используя только CSS мы можем создавать некоторые довольно сложные эффекты. Они могут быть применены как к изображениям, так и к HTML-элементам. Свойство, которое используется для управления всеми этими эффектами - это filter .
filter: filter(value) ;
Как и следовало ожидать, для этого свойства требуется использование префикса браузера. Но на данный момент, только -webkit- (Chrome и Safari) является единственным движком браузеров, поддерживающим это свойство.
Webkit-filter:
filter(value)
;
-moz-filter:
filter(value)
;
-o-filter:
filter(value)
;
-ms-filter:
filter(value)
;
Фильтрация
Существует целый ряд фильтров, поэтому, чтобы получить более полное представление о каждом из них, давайте рассмотрим их по отдельности. Несколько фильтров могут быть применены к одному элементу (через пробел), например, brightness и blur :
filter: blur(5px ) brightness(0.5 ) ;
Есть несколько фильтров, которые не будут рассмотрены ниже, но их можно легко реализовать с уже существующими CSS (прозрачность и тени). Вот оригинальное изображение, которое мы будем использовать для демонстрации работы фильтров:
Я буду приводить фото c применением фильтра (первое фото) и результат работы фильтра в виде статичного изображения (второе фото), если вы используете браузер, который не поддерживает фильтры и не можете увидеть результат.
Размытие
Всегда хотели сделать гауссовское размытие для изображения или текста только при помощи одного CSS? С фильтрами вы это сможете! Размытие измеряется в пикселях, так что вы можете сделать что-то вроде этого:
filter:
blur(5px
)
;
// Browser Specific
-webkit-filter:
blur(5px
)
;
-moz-filter:
blur(5px
)
;
-o-filter:
blur(5px
)
;
-ms-filter:
blur(5px
)
;
Яркость
Яркость измеряется от нуля до единицы, 1 - это полная яркость (белый цвет), а 0 - первоначальная яркость.
filter:
brightness(0.2
)
;
// Browser Specific
-webkit-filter:
brightness(0.2
)
;
-moz-filter:
brightness(0.2
)
;
-o-filter:
brightness(0.2
)
;
-ms-filter:
brightness(0.2
)
;
Насыщенность
Насыщенность измеряется в процентах.
filter:
saturate(50%
)
;
// Browser Specific
-webkit-filter:
saturate(50%
)
;
-moz-filter:
saturate(50%
)
;
-o-filter:
saturate(50%
)
;
-ms-filter:
saturate(50%
)
;
Поворот тона
Этот фильтр позволяет Вам изменять тон, повернув его (представьте себе колесо цветов, которые вы затем поворачиваете). Он измеряется в градусах.
filter:
hue-rotate(20deg)
;
// Browser Specific
-webkit-filter:
hue-rotate(20deg)
;
-moz-filter:
hue-rotate(20deg)
;
-o-filter:
hue-rotate(20deg)
;
-ms-filter:
hue-rotate(20deg)
;
Контрастность
Констрастность, опять же, измеряется в процентах. 100% является значением по умолчанию, 0% позволит создать полностью черное изображение. Все, что более 100% добавляет контраст!
filter:
contrast(150%
)
;
// Browser Specific
-webkit-filter:
contrast(150%
)
;
-moz-filter:
contrast(150%
)
;
-o-filter:
contrast(150%
)
;
-ms-filter:
contrast(150%
)
;
Инверсия
Также измеряется в процентах. Доступны значения от 0% до 100%. Как ни странно, на данный момент, webkit не поддерживает инверсии, если они меньше, чем 100%.
filter:
invert
(100%
)
;
// Browser Specific
-webkit-filter:
invert
(100%
)
;
-moz-filter:
invert
(100%
)
;
-o-filter:
invert
(100%
)
;
-ms-filter:
invert
(100%
)
;
Обесцвечивание
Опять же, указываете значение в процентах, на которое вы хотите обесцветить изображение. Доступны значения от 0% до 100%.
filter:
grayscale(100%
)
;
// Browser Specific
-webkit-filter:
grayscale(100%
)
;
-moz-filter:
grayscale(100%
)
;
-o-filter:
grayscale(100%
)
;
-ms-filter:
grayscale(100%
)
;
Сепия
Я полагаю, это очень полезно, если вы хотите опубликовать что-то в Instagram. Хотя я также полагаю, вы не будете использовать CSS для этого. Во всяком случае, подобные оттенки серого и негатива, в сумме, позволят вам добавить сепию к изображению. 100% - это будет завершенная сепия, 0% - исходное изображение.
filter:
sepia(100%
)
;
// Browser Specific
-webkit-filter:
sepia(100%
)
;
-moz-filter:
sepia(100%
)
;
-o-filter:
sepia(100%
)
;
-ms-filter:
sepia(100%
)
;
Поддержка браузерами
| Webkit | Mozilla | Trident | Presto | |
| Размытие | Экспериментальная | Нет | Нет | Нет |
| Яркость | ||||
| Насыщенность | ||||
| Поворот тонов | ||||
| Контрастность | ||||
| Инверсия | Только полная инверсия |
|||
| Обесцвечивание | Экспериментальная | |||
| Sepia |
Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим
CSS свойства достигли такого уровня развития, что способны справиться с некоторыми важными функциями графических редакторов. Пример тому – CSS-фильтры, с помощью которых можно создавать красивые эффекты для изображений.
Если раньше трудно было это даже представить, то сейчас в каскадной таблице реализованы практически все программные фильтры, начиная от размытия и заканчивая художественно-цветовыми моделями.
Но все же в CSS-фильтрах имеется один небольшой недостаток – не все веб-браузеры поддерживают визуальные эффекты. Разумеется, это лишь вопрос времени. И к наступлению часа «х» разработчикам нужно быть готовым. А пока рассмотрим то, что на данный момент уже реализовано.
Поддержка CSS фильтров браузерами
В основном все ходовые браузеры, Firefox, Chrome, Opera, имеют «дружеское» отношение с фильтр-эффектами. Чего не скажешь о IE, который напрочь отказывается поддерживать эффекты, даже в самых поздних версиях.
| Браузер | Explorer | Chrome | Firefox | Safari | Opera | Android | iOS |
|---|---|---|---|---|---|---|---|
| Версия | no | 31+ | 35+ | 7+ | 18+ | 4.4+ | 6+ |
| filter | — | (-webkit-) | + | (-webkit-) | (-webkit-) | (-webkit-) | (-webkit-) |
Функции и синтаксис CSS фильтров
Во всех свойствах CSS имеются некие параметры, сочетающие в себе порядок прописывания значений. Свойство filter не является исключением, как и другие, оно может использовать комбинацию нескольких правил в одном применении. К примеру, добавить фильтр яркости для изображения, а через пробел указать еще один — контрастность. Мы рассмотрим все в этой статье с несколькими примерами для лучшего понимания.
Синтаксис
Filter: название фильтра (процент значения) ; filter: url(img.svg); filter: blur(10px); filter: brightness(0.9); filter: contrast(150%); filter: drop-shadow(5px 5px 10px black); filter: grayscale(80%); filter: hue-rotate(60deg); filter: invert(80%); filter: opacity(50%); filter: saturate(50%); filter: sepia(40%); /* Применение нескольких фильтров */ filter: contrast(150%) grayscale (80%);
Список фильтров
| Фильтр | Описание |
|---|---|
| blur (px) | Фильтр для размытия изображения. Степень размытия указывается в пикселях. Если число не задано, то по умолчанию используется 0. |
| drop-shadow () | Тень. Альтернатива свойству box-shadow с аналогичными параметрами и тем же порядком прописывания. Исключением является четвертое значение «растяжение»: почти все браузеры его не поддерживают. |
| grayscale (%) | Фильтр «обесцветить». Применяются оттенки серого цвета к изображению в зависимости от указанного процента. Не допускается отрицательное значение, а оригинальность картинки равна 0. |
| brightness (%) | Настройка яркости изображения. Значение в 100% показывает исходную точку яркости. Регулировка совершается как отрицательно (-50%), так и положительно (150%). |
| contrast (%) | Настройка контрастности изображения. Как и в предыдущем фильтре, значение в 100% покажет исходную точку. Изменения можно задавать отрицательные (-20%) и положительные (120%). |
| hue-rotate (deg) | Поворотное наложение тона цвета. В зависимости от указанного градуса (от 0deg до 360deg) на изображение будет налаживается цвет, который определяется по цветовому кругу. |
| invert (%) | Инверсия изображения. Применяется значение от 0 до 100% без отрицательного параметра. |
| saturate (%) | Насыщенность изображения. Исходное положение определяется в 100% и не имеет отрицательного значения. |
| sepia (%) | Эффект сепия. Оригинальность картинки определяется в 0% и доступна до значения 100% без отрицания. |
| opacity (%) | Прозрачность картинки. Еще один фильтр, у которого есть аналогичное свойство opacity с таким же способам в использовании. Настройка допускается от 0 до 100% без отрицательного параметра. |
| url () | CSS ссылка на SVG элемент с определенным идентификатором #id. |
| initial | Устанавливает значение свойства по умолчанию. |
| inherit | Наследует все значения свойства своего родительского элемента. |
Примеры CSS filters
Мы подошли к интересной части статьи, в которой рассмотрим каждый фильтр в отдельности с примерами его применения. Для наглядности будут использоваться три картинки. Первая покажет исходную точку, облик оригинальности. Вторая послужит статичным примером в применении фильтра, а третья покажет hover-эффект, наведение курсора мыши на изображение.
Фильтр размытия
В графических редакторах фильтр размытия является незаменимым инструментом и часто применяемым в работе. Он способен непросто создавать расплывчатое изображение, а делать эффект фокусирования на определенном элементе при этом остальная часть изображения попадает под размытие. И многое другое.
В оформлении сайта (к примеру – размытие) можно использовать как подкладку для лучшей читаемости текста, расположенного на картинке. Собственно, размытие совершается по гауссу от значения 0 px и до полного исчезновения.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efbl1 img{ filter: blur(2px); -webkit-filter: blur(2px); } /*для hover-эффекта*/ .efbl2 img{ transition: all 0.6s ease 0s; } .efbl2:hover img{ filter: blur(4px); -webkit-filter: blur(4px); transition: all 0.6s ease 0s; }
Фильтр тень
Свойство тень пришло к нам еще с третьей версией каскадной таблицы. Безусловно, оно знакомо всем, кто занимается сайтостроением, так как box-shadow в дизайне играет далеко не последнюю роль. Фильтр drop-shadow можно назвать неполноценной альтернативой с аналогичными параметрами, а их всего 5, не считая внутреннюю тень.
Порядок прописывания такой: 5px/-5px (смещение по горизонтали), 5px/-5px (смещение по вертикали), 15px (радиус размытия тени), 5px/-5px (растягивание тени), black (цвет). Фильтр поддерживает весь синтаксис кроме растягивания и значения inset (внутренняя тень), а также добавления нескольких теней через запятую. Но несмотря на все это, присутствуют свои достоинства, к примеру, фильтр учитывает псевдоэлементы, что позволяет отображать точную форму тени элемента.
Также интересным является то, что когда у блока нет фона, а лишь задана обводка border , то при использовании box-shadow будет отображаться тень с якобы учетом фона, то есть сплошная. А в случае использования drop-shadow тень принимает форму обводки без учета фона.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efdrswd1 img{ filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); } /*для hover-эффекта*/ .efdrswd2 img{ transition: all 0.6s ease 0s; } .efdrswd2:hover img{ filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4)); transition: all 0.6s ease 0s; }
Фильтр обесцвечивания
Классический стиль фотографии для всех времен в правильном направлении. Фильтр допускает лишь одно значение — положительное. В зависимости от указанного процента оттенки серого будут плавно заменять цвет изображения. Также вместо процентов можно применять дробь до целого числа (0.01/1).
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efgrays1 img{ filter: grayscale(90%); -webkit-filter: grayscale(90%); } /*для hover-эффекта*/ .efgrays2 img{ transition: all 0.6s ease 0s; } .efgrays2:hover img{ filter: grayscale(90%); -webkit-filter: grayscale(90%); transition: all 0.6s ease 0s; }
Фильтр яркости
Добавление света к «неизведанным» черным углам изображения. В обработке фотографий применяется нередко, так как любительские снимки, как правило, совершаются в плохо освещенных местах. Яркость фильтра регулируется от 0% (полностью черная картинка) до почти полного исчезновения изображения. Оригинальная точка определяется в 100%, а значение также можно указывать дробью.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efbrig1 img{ filter: brightness(150%); -webkit-filter: brightness(150%); } /*для hover-эффекта*/ .efbrig2 img{ transition: all 0.6s ease 0s; } .efbrig2:hover img{ filter: brightness(150%); -webkit-filter: brightness(150%); transition: all 0.6s ease 0s; }
Фильтр контрастности
Нехитрый способ сделать изображение более выразительным, поэкспериментировав с настройками яркости самых светлых и темных частей картинки. Фильтр contrast готов этому помочь. Его параметры, как и у многих, исключают отрицательное значение (-150%), а исходное положение обозначается в 100%. Кроме процентов, допускается также дробь (1.5).
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efcontr1 img{ filter: contrast(150%); -webkit-filter: contrast(150%); } /*для hover-эффекта*/ .efcontr2 img{ transition: all 0.6s ease 0s; } .efcontr2:hover img{ filter: contrast(150%); -webkit-filter: contrast(150%); transition: all 0.6s ease 0s; }
Фильтр тона цвета
Отличный дизайнерский прием в оформлении изображения, под стиль основного дизайна ресурса. Суть заключается в наложении оттенка выбранного цвета на исходную картинку. Соотношения выходят в зависимости от заданного градуса, который указывает точку цвета на цветовом круге.
Если значение указано положительное (150deg), то поворот происходит по часовой стрелке. Соответственно, если отрицательное, то против часовой. В двух положения начинается от 0deg до 360deg.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efhrotai1 img{ filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); } /*для hover-эффекта*/ .efhrotai2 img{ transition: all 0.6s ease 0s; } .efhrotai2:hover img{ filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); transition: all 0.6s ease 0s; }
Фильтр инверсия
Специфический эффект, позволяющий перевернуть цвет изображения верх дном. В графических редакторах имеет определенную роль и бывает так, что без его участия не добиться нужного результата. Параметр фильтра инвертирования указывается лишь в положительную сторону от значения 0% до 100%.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efinve1 img{ filter: invert(100%); -webkit-filter: invert(100%); } /*для hover-эффекта*/ .efinve2 img{ transition: all 0.6s ease 0s; } .efinve2:hover img{ filter: invert(100%); -webkit-filter: invert(100%); transition: all 0.6s ease 0s; }
Фильтр насыщенность
Когда изображение теряет свой естественный цвет красок по неизвестным причинам (что-то вроде выгоревшей футболки на солнце), то увеличением насыщенности можно вмиг восстановить прежний вид. А если этот фильтр использовать в сочетании с другими фильтрами, результат будет весьма удовлетворительным. Настройка совершается от 0 исходный вид, до больших чисел.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efsatut1 img{ filter: saturate(165%); -webkit-filter: saturate(165%); } /*для hover-эффекта*/ .efsatut2 img{ transition: all 0.6s ease 0s; } .efsatut2:hover img{ filter: saturate(165%); -webkit-filter: saturate(165%); transition: all 0.6s ease 0s; }
Фильтр сепия
Имитация эффекта старинных фотографий (слегка коричневый оттенок). Таким образом достигается ретро стиль изображения, который пользуется особой популярностью. Фильтр сепия регулируется от 0% (исходное положение) до 100%.
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efsepiaa1 img{ filter: sepia(100%); -webkit-filter: sepia(100%); } /*для hover-эффекта*/ .efsepiaa2 img{ transition: all 0.6s ease 0s; } .efsepiaa2:hover img{ filter: sepia(100%); -webkit-filter: sepia(100%); transition: all 0.6s ease 0s; }
Фильтр прозрачность
Фильтр аналогичный свойству opacity из каскадной таблицы 3-й версии. Синтаксис такой же, а значение прозрачности регулируется от 0% до 100% (исходное положение).
Оригинал
Фильтр
Hover-эффект
/*статичное правило*/ .efopaty1 img{ filter: opacity(50%); -webkit-filter: opacity(50%); } /*для hover-эффекта*/ .efopaty2 img{ transition: all 0.6s ease 0s; } .efopaty2:hover img{ filter: opacity(50%); -webkit-filter: opacity(50%); transition: all 0.6s ease 0s; }
Фильтр ссылка
Создается собственный фильтр на основе SVG элементов с определенным идентификатором, который впоследствии можно используется в CSS через фильтр ссылку. Эффекты могут очень сильно отличаться от стандартных фильтров начиная от маски-наложения до банальной прозрачности.
Генератор CSS filters
Уже давно повелось создавать генераторы различных CSS свойств. , и многое-многое другое. Они служат как инструмент, упрощающий работу. А для начинающих вебмастеров могут нести двойную пользу. Ими очень легко пользоваться: перемещаете ползунки, и сразу же виден результат. А по окончании остается лишь скопировать сгенерированный код. То же и с генераторами CSS фильтров. Вот два из них для ознакомления:
Заключение
Обзор получился весьма немаленький, но надеюсь, что кому-то пригодится на практике. Также не забывайте комбинировать фильтры, один – хорошо, а два будет лучше, в определенных случаях.
