Главная страница
Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
|
CSS3 фильтры
CSS3 фильтры воспроизводят в браузере визуальные эффекты, похожие на фильтры Photoshop. Фильтры можно добавлять не только к изображениям, но и к любым непустым элементам.
Набор фильтров не ограничивается предустановленным в браузере. Вы также можете использовать фильтры SVG, загрузив их по ссылке вместе с svg-элементом.
Изначально фильтры были созданы как часть спецификации SVG. Их задачей было применение эффектов, основанных на пиксельной сетке к векторной графике. С поддержкой SVG браузерами появилась возможность использовать эти эффекты непосредственно в браузерах.
Браузеры обрабатывают страницу попиксельно применяя заданные эффекты и отрисовывают результат поверх оригинала. Таким образом, применяя несколько фильтров можно достигать различных эффектов, они как бы накладываются друг на друга. Чем больше фильтров, тем больше времени требуется браузеру, чтобы отрисовать станицу.
Можно применять несколько фильтров одновременно. Классический способ применения таких эффектов — при наведении на элемент: hover.
| filter
| | blur()
| Значение задается в единицах длины, например px, em. Применяет размытие по Гауссу к исходному изображению. Чем больше значение радиуса, тем больше размытие. Если значение радиуса не задано, по умолчанию берется 0. Синтаксис
| | brightness()
| Значение задается в % или в десятичных дробях. Изменяет яркость изображения. Чем больше значение, тем ярче изображение. Значение по умолчанию 1. Синтаксис
| filter: brightness(50%);
или
filter: brightness(.5);
| | | contrast()
| Значение задается в % или в десятичных дробях. Регулирует контрастность изображения, т.е. разницу между самыми темными и самыми светлыми участками изображения/фона. Значение по умолчанию 100%. Нулевое значение скроет исходное изображение под темно-серым фоном. Значения, увеличивающиеся от 0 до 100% или от 0до 1, будут постепенно открывать исходное изображение до оригинального отображения, а значения свыше будут увеличивать контраст между светлыми и темными участками. Синтаксис
| filter: contrast(20%);
или
filter: contrast(.2);
| | | drop-shadow()
| Фильтр действует подобно свойствам box-shadow и text-shadow. Использует следующие значения: смещение по оси Х смещение по оси Y размытость растяжение цвет тени. Отличительная особенность фильтра заключается в том, что тень добавляется к элементам и его содержимому с учетом их прозрачности, т.е. если элемент содержит текст внутри, то фильтр добавит тень одновременно для текста и видимых границ блока. В отличие от других фильтров, для этого фильтра обязательно задание параметров (минимальное — величина смещения). Синтаксис
| filter: drop-shadow(2px 3px 5px black);
| | | grayscale()
| Извлекает все цвета из картинки, делая на выходе черно-белое изображение. Значение задается в % или десятичных дробях. Чем больше значение, тем сильнее эффект. Синтаксис
| filter: grayscale(.5);
или
filter: grayscale(50%);
| | | hue-rotate()
| Меняет цвета изображения в зависимости от заданного угла поворота в цветовом круге. Значение задается в градусах от0deg до 360deg. 0deg — значение по умолчанию, означает отсутствие эффекта. Синтаксис
| filter: hue-rotate(180deg);
| | | invert()
| Фильтр делает негатив изображения. Значение задается в%. 0% не применяет фильтр, 100% полностью преобразует цвета. Синтаксис
| | opacity()
| Фильтр работает аналогично со свойством opacity, добавляя прозрачность элементу. Отличительная особенность — браузеры обеспечивают аппаратное ускорение для фильтра, что позволяет повысить производительность. Дополнительный бонус — фильтр можно одновременно сочетать с другими фильтрами, создавая при этом интересные эффекты. Значение задается только в %, 0% делает элемент полностью прозрачным, а100% не оказывает никакого эффекта. Синтаксис
| | saturate()
| Управляет насыщенностью цветов, работая по принципу контрастного фильтра. Значение 0% убирает цветность, а100% не оказывает никакого эффекта. Значения от 0% до100% уменьшают насыщенность цвета, выше 100% — увеличивают насыщенность цвета. Значение может задаваться как в %, так и целым числом, 1 эквивалентно100%. Синтаксис
| | sepia()
| Эффект, имитирующий старину и «ретро». Значение 0% не изменяет внешний вид элемента, а 100% полностью воспроизводит эффект сепии. Синтаксис
| | url()
| Функция принимает расположение XML-файла, который определяет SVG-фильтр, также может включать в себя якор к определенному элементу. Синтаксис
| filter: url(/images.svg#c1);
| | | none
| Значение по умолчанию. Означает отсутствие эффекта.
| | initial
| Устанавливает это свойство в значение по умолчанию.
| | inherit
| Наследует значение свойства от родительского элемента.
|
|