html.okpython.net
Основы создания сайтов
CSS :: Свойство filter
css-свойство filter (от англ. filter – фильтр) устанавливает для элемента визуальный эффект (фильтр), например, размытие или изменение цвета. Фильтры обычно используются для регулировки рендеринга изображений, фонов и рамок.
Характеристики
- Значение по умолчанию: none.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.filter="value".
Синтаксис
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()
Значения
- blur() (от англ. blur – затуманивать) – задаёт размытие элементов по Гауссу. Однако следует помнить, что применять данный фильтр непосредственно к элементу <body> нельзя, только к его потомкам. В качестве значений функция принимает любые доступные в CSS единицы измерения (смотреть). При этом изображение будет размыто тем сильнее, чем больше указанное значение. Отрицательные значения не допускаются, а если значение не указывать вообще, браузер использует значение 0px.
- brightness() (от англ. brightness – яркость) – управляет яркостью элементов. В качестве значений могут использоваться проценты или положительные числа. При этом значения 100% или 1 не изменяют яркость элемента, меньшие 100% или 1 уменьшают яркость элемента, большие 100% или 1 увеличивают яркость элемента. Если значение не указывать вообще, браузер использует значение 1.
- contrast() (от англ. contrast – контрастность) – управляет контрастностью элементов. В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 дают однотонную серую картинку, 100% или 1 не изменяют контрастность элемента, меньшие 100% или 1 уменьшают контрастность элемента, большие 100% или 1 увеличивают контрастность элемента. Если значение не указывать вообще, браузер использует значение 1.
-
drop-shadow()
(от англ. drop shadow – падающая тень) –
добавляет тень к элементу. При этом в отличие от свойства box-shadow тень
отбрасывается с учётом прозрачных участков изображения. Функция имеет следующий синтаксис:
filter: drop-shadow(<смещение x> <смещение y> <размытие> <цвет>).
Как видно, в качестве значений функция может принимать несколько параметров, которые должны перечисляться через пробел:
- смещение x – обязательный параметр, который в случае положительных значений смещает тень относительно элемента по горизонтали вправо, а в случае отрицательных значений – влево. Если значение параметра равно нулю, то смещение отсутствует.
- смещение y – обязательный параметр, который в случае положительных значений смещает тень относительно элемента вверх, а в случае отрицательных значений – вниз. Если значение параметра равно нулю, то смещение отсутствует.
- размытие – необязательный параметр, который устанавливает радиус размытия тени. Чем больше радиус, тем больше тень становится размытой и осветвленной, особенно по краям. Если параметр не указывается, то браузер по умолчанию установит радиус размытия равный нулю, в результате чего тень будет полностью четкой с резким контуром.
- цвет – необязательный параметр, который определяет цвет тени.
- grayscale() (от англ. grayscale – шкала серого) – превращает изображение в черно-белое. В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 не изменяют цветность, 100% или 1 превращают элемент полностью в черно-белый, меньшие 100% или 1 линейно уменьшают цветность элемента. Если значение не указывать вообще, браузер использует значение 0.
- hue-rotate() (от англ. rotate – вращать) – изменяет цветность изображения в зависимости от значения угла на цветовом круге. При этом значения 0deg и 360deg не изменяют цветность элемента, а все остальные значения приводят к цветовому сдвигу. Если значение не указывать вообще, браузер использует значение 0deg.
- invert() (от англ. invert – инвертировать, переворачивать) – инвертирует цвета элемента (напоминает процесс превращения фотографии в негатив). В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 не изменяют элемент, 100% или 1 полностью инвертируют цвета элемента, меньшие 100% или 1 инвертируют цвета элемента частично. Если значение не указывать вообще, браузер использует значение 0.
- opacity() (от англ. opacity – непрозрачность) – задаёт степень прозрачности элемента. Фильтр напоминает свойство opacity, однако некоторые браузеры применяют для фильтров аппаратное ускорение, что позволяет повысить их производительность. В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 делают элемент полностью прозрачным, 100% или 1 не изменяют прозрачность элемента, меньшие 100% или 1 делают элемент частично прозрачным. Если значение не указывать вообще, браузер использует значение 1.
- saturate() (от англ. saturate – насыщать) – изменяет насыщенность цветов в изображении. В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 полностью убирают насыщенность цветов элемента, делая его черно-белым, 100% или 1 не изменяют насыщенность элемента, меньшие 100% или 1 делают элемент менее насыщенным, большие 100% или 1 делают элемент более насыщенным. Если значение не указывать вообще, браузер использует значение 1.
- sepia() (от англ. sepia – сепия) – позволяет превратить элемент в сепию, т.е. чёрно-белое изображение с коричневым оттенком, придающем фотографии старинный вид. В качестве значений могут использоваться проценты или положительные числа. При этом значения 0% или 0 не изменяют элемент, 100% или 1 полностью превращают элемент в сепию, меньшие 100% или 1 производят частичный эффект. Если значение не указывать вообще, браузер использует значение 0.
- url() – задает путь к XML файлу, который содержит необходимые фильтры.
- none – отменяет действие всех фильтров, используемых для элемента.
Ссылки
Официальный сайт W3C: https://drafts.fxtf.org/filter-effects-1/#propdef-filter
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/filter
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> div{ display: inline-block; width: 210px; height: 160px; padding: 20px; margin: 0.7em; border: 5px solid violet; background: url(balls.jpg); font-weight: bold; color: #550000; } .blur_filter{filter: blur(0.1em);} .brightness_filter{filter: brightness(120%);} .contrast_filter{filter: contrast(50%);} .shadow_filter{filter: drop-shadow(10px 5px 20px blue);} .gray_filter{filter: grayscale(90%);} .hue_filter{filter: hue-rotate(90deg);} .invert_filter{filter: invert(0.7);} .opacity_filter{filter: opacity(70%);} .saturate_filter{filter: saturate(170%);} .sepia_filter{filter: sepia(0.5);} </style> </head> <body> <div>Исходный элемент</div> <div class="blur_filter">filter: blur(1em)</div> <br><br> <div>Исходный элемент</div> <div class="brightness_filter">filter: brightness(120%)</div> <br><br> <div>Исходный элемент</div> <div class="contrast_filter">filter: contrast(50%)</div> <br><br> <div>Исходный элемент<br><br></div> <div class="shadow_filter">filter: drop-shadow(10px 5px 20px blue)</div> <br><br> <div>Исходный элемент</div> <div class="gray_filter">filter: grayscale(90%)</div> <br><br> <div>Исходный элемент</div> <div class="hue_filter">filter: hue-rotate(90deg)</div> <br><br> <div>Исходный элемент</div> <div class="invert_filter">filter: invert(0.7)</div> <br><br> <div>Исходный элемент</div> <div class="opacity_filter">filter: opacity(70%)</div> <br><br> <div>Исходный элемент</div> <div class="saturate_filter">filter: saturate(170%)</div> <br><br> <div>Исходный элемент</div> <div class="sepia_filter">filter: sepia(0.5)</div> <br><br> </body> </html>
Пример №1