saturate() в CSS


Содержание

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Cloudflare Ray ID: 5340788c1d358ec5 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

CSS фильтры изображений

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 не является исключением, как и другие, оно может использовать комбинацию нескольких правил в одном применении. К примеру, добавить фильтр яркости для изображения, а через пробел указать еще один — контрастность. Мы рассмотрим все в этой статье с несколькими примерами для лучшего понимания.

Синтаксис

Список фильтров

Фильтр Описание
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-эффект, наведение курсора мыши на изображение.

Фильтр размытия [blur]

В графических редакторах фильтр размытия является незаменимым инструментом и часто применяемым в работе. Он способен непросто создавать расплывчатое изображение, а делать эффект фокусирования на определенном элементе при этом остальная часть изображения попадает под размытие. И многое другое.

В оформлении сайта (к примеру – размытие) можно использовать как подкладку для лучшей читаемости текста, расположенного на картинке. Собственно, размытие совершается по гауссу от значения 0 px и до полного исчезновения.

Фильтр тень [drop-shadow]

Свойство тень пришло к нам еще с третьей версией каскадной таблицы. Безусловно, оно знакомо всем, кто занимается сайтостроением, так как box-shadow в дизайне играет далеко не последнюю роль. Фильтр drop-shadow можно назвать неполноценной альтернативой с аналогичными параметрами, а их всего 5, не считая внутреннюю тень.

Порядок прописывания такой: 5px/-5px (смещение по горизонтали), 5px/-5px (смещение по вертикали), 15px (радиус размытия тени), 5px/-5px (растягивание тени), black (цвет). Фильтр поддерживает весь синтаксис кроме растягивания и значения inset (внутренняя тень), а также добавления нескольких теней через запятую. Но несмотря на все это, присутствуют свои достоинства, к примеру, фильтр учитывает псевдоэлементы, что позволяет отображать точную форму тени элемента. Посмотреть пример.

Также интересным является то, что когда у блока нет фона, а лишь задана обводка border , то при использовании box-shadow будет отображаться тень с якобы учетом фона, то есть сплошная. А в случае использования drop-shadow тень принимает форму обводки без учета фона.

Фильтр обесцвечивания [grayscale]

Классический стиль фотографии для всех времен в правильном направлении. Фильтр допускает лишь одно значение — положительное. В зависимости от указанного процента оттенки серого будут плавно заменять цвет изображения. Также вместо процентов можно применять дробь до целого числа (0.01/1).

Фильтр яркости [brightness]

Добавление света к «неизведанным» черным углам изображения. В обработке фотографий применяется нередко, так как любительские снимки, как правило, совершаются в плохо освещенных местах. Яркость фильтра регулируется от 0% (полностью черная картинка) до почти полного исчезновения изображения. Оригинальная точка определяется в 100%, а значение также можно указывать дробью.

Фильтр контрастности [contrast]

Нехитрый способ сделать изображение более выразительным, поэкспериментировав с настройками яркости самых светлых и темных частей картинки. Фильтр contrast готов этому помочь. Его параметры, как и у многих, исключают отрицательное значение (-150%), а исходное положение обозначается в 100%. Кроме процентов, допускается также дробь (1.5).

Фильтр тона цвета [hue-rotate]

Отличный дизайнерский прием в оформлении изображения, под стиль основного дизайна ресурса. Суть заключается в наложении оттенка выбранного цвета на исходную картинку. Соотношения выходят в зависимости от заданного градуса, который указывает точку цвета на цветовом круге.

Если значение указано положительное (150deg), то поворот происходит по часовой стрелке. Соответственно, если отрицательное, то против часовой. В двух положения начинается от 0deg до 360deg.

Фильтр инверсия [invert]

Специфический эффект, позволяющий перевернуть цвет изображения верх дном. В графических редакторах имеет определенную роль и бывает так, что без его участия не добиться нужного результата. Параметр фильтра инвертирования указывается лишь в положительную сторону от значения 0% до 100%.

Фильтр насыщенность [saturate]

Когда изображение теряет свой естественный цвет красок по неизвестным причинам (что-то вроде выгоревшей футболки на солнце), то увеличением насыщенности можно вмиг восстановить прежний вид. А если этот фильтр использовать в сочетании с другими фильтрами, результат будет весьма удовлетворительным. Настройка совершается от 0 исходный вид, до больших чисел.

Фильтр сепия [sepia]

Имитация эффекта старинных фотографий (слегка коричневый оттенок). Таким образом достигается ретро стиль изображения, который пользуется особой популярностью. Фильтр сепия регулируется от 0% (исходное положение) до 100%.

Фильтр прозрачность [opacity]

Фильтр аналогичный свойству opacity из каскадной таблицы 3-й версии. Синтаксис такой же, а значение прозрачности регулируется от 0% до 100% (исходное положение).

Фильтр ссылка [url]

Создается собственный фильтр на основе SVG элементов с определенным идентификатором, который впоследствии можно используется в CSS через фильтр ссылку. Эффекты могут очень сильно отличаться от стандартных фильтров начиная от маски-наложения до банальной прозрачности.

Использование нескольких фильтров

Заключительный пример включает в себя комбинирование фильтров (от двух и более), что позволяет добиться еще лучшего результата. Делается это очень легко, достаточно лишь через пробел перечислить желаемые фильтры.

Фильтр DuoTone [двухцветная модель]

Помимо обычных эффектов фильтров, которые мы рассматривали чуть выше, есть и другие примеры со своеобразным оформлением. В нашем случае это двухцветный фильтр, носящий имя DuoTone. На основе этого стиля энтузиастом была сделана небольшая библиотека с различными оттенками наложения цвета.

Илон Маск рекомендует:  Открываем блочную модель

Но стоит обратить внимание на то, что эта библиотека построена только средствами CSS, из-за чего эти визуальные эффекты поддерживают еще меньше число браузеров ( посмотреть таблицу ).

Генератор CSS filters

Уже давно повелось создавать генераторы различных CSS свойств. Генераторы градиентов, CSS кнопок и многое-многое другое. Они служат как инструмент, упрощающий работу. А для начинающих вебмастеров могут нести двойную пользу. Ими очень легко пользоваться: перемещаете ползунки, и сразу же виден результат. А по окончании остается лишь скопировать сгенерированный код. То же и с генераторами CSS фильтров. Вот два из них для ознакомления:

Заключение

Обзор получился весьма немаленький, но надеюсь, что кому-то пригодится на практике. Также не забывайте комбинировать фильтры, один – хорошо, а два будет лучше, в определенных случаях.

Filter Grayscale для обесцвечивания картинки средствами CSS (плюс использование jQuery для IE10+ )

Для того чтобы превратить изображение в черно-белое с помощью CSS нам понадобятся фильтры.
Наверное, все знают про фильтры, которые поддерживали еще старые версии IE. Несмотря на все свои недостатки «ослики» обеспечивали такие возможности как

  • ALPHA — задание прозрачности
  • BLUR — размытие объекта
  • CHROMA — задание прозрачности определенного цвета изображения
  • DROPSHADOW – создание тени объекта
  • GRAY – создание черно-белого изображения
  • GLOW — создание свечения вокруг объекта
  • INVERT — инвертирование цветов объекта
  • EMBOSS/ENGRAVE — создание рельефной серой поверхности, гравюры из объекта

И вот пришел тот светлый день, когда подобного рода фильтры, называемые CSS-фильтры, решили включить в стандарты. Очевидно, чтобы облегчить простейшую обработку графики. Перечислю коротко основные из них, и то, что они умеют делать.

  • Filter Grayscale — служит для создания черно-белого изображения, задается в процентах (десятичных дробях).
  • Filter Invert — осуществляет инвертирование цветов, также выражается в процентах (десятичных дробях).
  • Filter Blur — Создает эффект размытости. Значение задается в пикселях (px).
  • Filter Opacity — работает по принципу свойства opacity (определяет прозрачность элемента), но дает большую производительность за счет аппаратного ускорения . Значение указывается в процентах или в десятичных дробях.
  • Filter Drop-shadow — служит для создания тени, также как аналогичное свойство box-shadow, но имеющее поддержку аппаратного ускорения. Значения задаются по тому же принципу как в box-shadow.
  • Filter Sepia — делает эффект сепии. Значение задается в процентах (десятичных дробях).
  • Filter Saturate — управляет насыщенностью цвета. Значение указывается в десятичных дробях или процентах.
  • Filter Brightness — служит для изменения яркости изображения, задается в процентах и в десятичных дробях.
  • Filter Contrast — позволяет изменить контрастность изображения, указывается в процентах (в десятичных дробях).

Результат применения этих фильтров к одной и той же картинке смотрите ниже

Браузеры научились понимать эти свойства недавно, но кроссбраузерность уже довольно неплоха, если исключить IE.
Да-да, вы не ослышались, Microsoft опять вставляет палки в колеса пользователям. Дело в том, что IE9 поддерживает еще старые фильтры, а вот IE начиная с версии 10 уже нет. Кроме того разработчики не побеспокоились о поддержке новых свойств, поэтому IE10 снова нуждается в костылях.
Если перейти к рассмотрению конкретно нашей задачи по обесцвечиванию картинки, то для этой цели подходят SVG-фильтры, которые требуют, внесения дополнительного кода в разметку, что не всегда удобно. Поэтому лучшим вариантом, на мой взгляд, является использование jquery-скрипта gray, который можно скачать на ГитХабе . Он дает возможность сделать черно-белым не только картинку (тег img), но и фон, фон со свойством background-size и даже спрайт!

По какому принципу действует скрипт? Он использует плагин Modernizr для определения браузерной поддержки. Если браузер поддерживает SVG-фильтры и не поддерживает CSS-фильтры, скрипт вставляет в разметку код с SVG-фильтрами. Подробнее о Modernizr и о том, как он может заменять условные комментарии читайте в ближайших статьях.

Как же использовать gray plugin? Просто вставить jQuery и скрипт, находящиеся в папке js перед закрывающим тегом body таким образом

CSS filter Property

Example

Change all images to black and white (100% gray):

Tip: More «Try it Yourself» examples below.

Definition and Usage

The filter property defines visual effects (like blur and saturation) to an element (often ).

Default value: none
Inherited: no
Animatable: yes. Read about animatable
Version: CSS3
JavaScript syntax: object.style.WebkitFilter=»grayscale(100%)» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- specify the first version that worked with a prefix.

Property
filter 53.0
18.0 -webkit-
13.0 35.0 9.1
6.0 -webkit-
40.0
15.0 -webkit-

Note: Older versions of Internet Explorer (4.0 to 8.0) supported a non-standard «filter» property that has been deprecated. This was mostly used for opacity when needed support from IE8 and down.

CSS Syntax

Tip: To use multiple filters, separate each filter with a space (See «More Examples» below).

Filter Functions

Note: The filters that use percentage values (i.e. 75%), also accept the value as decimal (i.e. 0.75).

Filter Description Play it
none Default value. Specifies no effects Play it »
blur(px) Applies a blur effect to the image. A larger value will create more blur.

If no value is specified, 0 is used. Play it » brightness(%) Adjusts the brightness of the image.

0% will make the image completely black.
100% (1) is default and represents the original image.
Values over 100% will provide brighter results. Play it » contrast(%) Adjusts the contrast of the image.

0% will make the image completely black.
100% (1) is default, and represents the original image.
Values over 100% will provide results with more contrast. Play it » drop-shadow(h-shadow v-shadow blur spread color) Applies a drop shadow effect to the image.

Possible values:
h-shadow — Required. Specifies a pixel value for the horizontal shadow. Negative values place the shadow to the left of the image.

v-shadow — Required. Specifies a pixel value for the vertical shadow. Negative values place the shadow above the image.

blur — Optional. This is the third value, and must be in pixels. Adds a blur effect to the shadow. A larger value will create more blur (the shadow becomes bigger and lighter). Negative values are not allowed. If no value is specified, 0 is used (the shadow’s edge is sharp).

spread — Optional. This is the fourth value, and must be in pixels. Positive values will cause the shadow to expand and grow bigger, and negative values will cause the shadow to shrink. If not specified, it will be 0 (the shadow will be the same size as the element).
Note: Chrome, Safari and Opera, and maybe other browsers, do not support this 4th length; it will not render if added.

color — Optional. Adds a color to the shadow. If not specified, the color depends on the browser (often black).

An example of creating a red shadow, which is 8px big both horizontally and vertically, with a blur effect of 10px:

filter: drop-shadow(8px 8px 10px red);

Tip: This filter is similar to the box-shadow property. Play it » grayscale(%) Converts the image to grayscale.

0% (0) is default and represents the original image.
100% will make the image completely gray (used for black and white images).

Note: Negative values are not allowed. Play it » hue-rotate(deg) Applies a hue rotation on the image. The value defines the number of degrees around the color circle the image samples will be adjusted. 0deg is default, and represents the original image.

Note: Maximum value is 360deg. Play it » invert(%) Inverts the samples in the image.

0% (0) is default and represents the original image.
100% will make the image completely inverted.

Note: Negative values are not allowed. Play it » opacity(%) Sets the opacity level for the image. The opacity-level describes the transparency-level, where:

0% is completely transparent.
100% (1) is default and represents the original image (no transparency).

Note: Negative values are not allowed.
Tip: This filter is similar to the opacity property. Play it » saturate(%) Saturates the image.

0% (0) will make the image completely un-saturated.
100% is default and represents the original image.
Values over 100% provides super-saturated results.

Note: Negative values are not allowed. Play it » sepia(%) Converts the image to sepia.

0% (0) is default and represents the original image.
100% will make the image completely sepia.

filter

Easily manage projects with monday.com

CSS Filters are a powerful tool that authors can use to achieve varying visual effects (sort of like Photoshop filters for the browser). The CSS filter property provides access to effects like blur or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border.

Where is one of:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() — for applying SVG filters
  • custom() — «coming soon»

Multiple functions can be used, space separated.

Example of a single filter being used:

Example of multiple filters being used:

Filter Functions

To use the CSS filter property, you specify a value for one of the following functions listed above. If the value is invalid, the function returns «none.» Except where noted, the functions that take a value expressed with a percent sign (as in 34%) also accept the value expressed as decimal (as in 0.34).

Below we’ll use a variety of different filter functions on this image:

grayscale()

Converts the input image to grayscale. The value of “amount” defines the proportion of the conversion. A value of 100% is completely grayscale. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

sepia()

Converts the input image to sepia. The value of “amount” defines the proportion of the conversion. A value of 100% is completely sepia. A value of 0 leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

saturate()

Saturates the input image. The value of “amount” defines the proportion of the conversion. A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

hue-rotate()

Applies a hue rotation on the input image. The value of “angle” defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the “angle” parameter is missing, a value of 0deg is used. Maximum value is 360deg.

invert()

Inverts the samples in the input image. The value of “amount” defines the proportion of the conversion. A value of 100% is completely inverted. A value of 0% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. If the “amount” parameter is missing, a value of 100% is used. Negative values are not allowed.

opacity()

Applies transparency to the samples in the input image. The value of “amount” defines the proportion of the conversion. A value of 0% is completely transparent. A value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. If the “amount” parameter is missing, a value of 100% is used. This function is similar to the more established opacity property; the difference is that with filters, some browsers provide hardware acceleration for better performance. Negative values are not allowed.

brightness()

Applies a linear multiplier to input image, making it appear more or less bright. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results. If the «amount» parameter is missing, a value of 100% is used.

contrast()

Adjusts the contrast of the input. A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast. If the “amount” parameter is missing, a value of 100% is used.

Applies a Gaussian blur to the input image. The value of ‘radius’ defines the value of the standard deviation to the Gaussian function, or how many pixels on the screen blend into each other, so a larger value will create more blur. If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.

drop-shadow()

Applies a drop shadow effect to the input image. A drop shadow is effectively a blurred, offset version of the input image’s alpha mask drawn in a particular color, composited below the image. The function accepts a parameter of type (defined in CSS3 Backgrounds), with the exception that the ‘inset’ keyword is not allowed.

This function is similar to the more established box-shadow property; the difference is that with filters, some browsers provide hardware acceleration for better performance.

Drop-shadow also mimics the intended objects outline naturally unlike box-shadow that treats only the box as its path.

Just like with text-shadow, there is no ‘spread’ parameter to create a solid shadow larger than the object.

The url() function takes the location of an XML file that specifies an SVG filter, and may include an anchor to a specific filter element. Here’s a tutorial that works as a nice intro to SVG filters with a fun demo.

Animating Filters

Since Filters are animatable it can open the doors for a whole bunch of fun.

Notes

You may combine any number of functions to manipulate the rendering, but order still matters (i.e., using grayscale() after sepia() will result in completely gray output).

A computed value of other than «none» results in the creation of a stacking context the same way that CSS opacity does. The filter property has no effect on the geometry of the target element’s box model, even though filters can cause painting outside of an element’s border box. Any parts of the target element are affected by filter functions. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the filter is applied, and those of its descendants. Filters can also be applied to inline content, such as individual text spans.

The specification also introduces a filter(image-URL, filter-functions) wrapper function for an image. It would allow you to filter any image at the time you use it within CSS. For example, you could blur a background image without blurring the text. This filter function is not yet supported in browsers. In the meantime, you can apply both the background and the filter to a pseudo-element to create a similar effect.

The IE proprietary filter stuff

Also used the filter property, like:

Mostly used for opacity when you needed to support IE 8 and down.

More Information

Browser Support

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Filter CSS 3 – фильтры изображений

Привет друзья, сегодня у меня для вас действительно БОЛЬШОЙ урок, целых 27 минут. Но в нём мы будем рассматривать ну просто очень, очень, очень интересное свойство, которое позволит Вам задавать различные спецэффекты для изображений, не лазя в программу Photoshop и другие редакторы.

Filter – это свойство в CSS3, которое может видоизменять ваши картинки. Накладывать размытость, увеличивать контраст и яркость, добавлять тень, менять цвета и многое, многое другое.

Всего у Filter есть 10 значений, которые позволяют вытворять «всякую интересную всячину» с элементами сайта. Предлагаю теперь, разобрать все эти 10 значений на практике в видеоуроке ниже.

Видео Filter CSS 3 – фильтры изображений:

Пример страницы, которую мы создаём в уроке:

Скачать файл-заготовку можно по этой ссылке.

Кому лень смотреть видео, можете посмотреть подробную инструкцию ниже со всеми правилами фильтров.

10 эффектов фильтров в CSS3

Обращаю внимание, что все эффекты на картинках ниже, реализованы только при помощи CSS3, поэтому в старых браузерах они видны не будут.

1. Фильтр размытие — blur

Если говорить простым языком, то это обычное размытие картинки. Фильтр подойдет, если вам нужно сделать края более мягкими. За счет размытия создается ощущение фона, который не в фокусе.

Давайте попробуем применить наш фильтр на лисичке, прописав вот такой код:

Слева, для наглядности, я поставил обычную картинку, а вот справа то же самое изображение, только изменённое при помощи CSS3.

Фильтр со значением blur указывается именно в пикселях. Причем, чем больше это значение, тем больше проявляется размытость картинки.

Фильтр яркость — brightness

Этот фильтр напоминает изменение яркости экрана телевизора. В данном случае регулируется цвет между черным и оригинальным цветом по мере добавления параметров.

А вот и наш подопытный конь:

Регулировать вы можете от 0% и более. При 0% изображение будет черным, при 100% — оригинальным, а при 200% — станет ярче в два раза. Это очень хороший эффект, особенно для темных изображений.

Фильтр brightness может задаваться 3 способами:

Причем ограничений в принципе нет. В примере мы поставили значение 2 и увеличили яркость нашей картинки на 2 раза или на 200%.

3. Фильтр контрастность — contrast

Этот фильтр позволит вам повысить контраст картинки, регулируя разницу между светлыми и темным тонами изображения. Здесь значения также задаются тремя способами: целые числа, дробные числа и проценты. Таким образом, 100% — это значение по умолчанию. 0% — черное изображение. А все, что больше 100%, добавляет вам контраст.

На этот раз будем издеваться над котом. Добавим ему на +50% контрастности:

Как видите, теперь мы даже можем не пользоваться Photoshop для создания контраста и размытия. Вот прямо в CSS берём и изменяум изображения, как нашей душе угодно.

4. Фильтр насыщенность — saturate

Это очень классный эффект, который сделает ваши изображения более яркими и насыщенными. Значения указываем в трех вариантах: целые и дробные числа, а также, проценты. Укажем значение — 200%. Повысим насыщенность нашей картиночки в 2 раза.

Море стало заметно приятнее:

Посмотрите, насколько сочное получилось изображение. По, моему очень классный эффект! Поедем??

5. Фильтр прозрачность — opacity

Устанавливает прозрачность. На значения данного фильтра вводятся определенные ограничения:

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

Давайте попробуем уменьшить прозрачность на 50% следующей картинке.

Посмотрите, что вышло:

6. Фильтр Инверсия — invert

Он позволяет вам «переворачивать» цвета. На значения данного фильтра также вводятся ограничения:

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

В нашем случае установим максимальное значение — 100 %:

И красивая спортивная машина лёгким движением руки превращается в.

Этот фильтр помог нам создать эффект негатива на самом изображении.

7. Фильтр cепия — sepia

Он позволит вам изменить цвет, добавив оттенок сепия. То есть вы получите имитацию старой фотографии. На значения фильтра ограничения указываются те же самые, что и в двух предыдущих.

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

Ну что? Попробуемс?

Трах-тибидох! Лёгким мановением руки мы состарим это фото на пару десятков лет Кажется, у меня крыша потекла с этими примерами.

В нашем случае мы указали дробное значение — 0,5. Но вы можете экспериментировать, как вашей душе угодно!

8. Фильтр оттенки серого — grayscale

Данный фильтр позволяет нам превращать цвета в оттенки серого. На значения фильтра также наложены ограничения:

  • целые и дробные числа: от 0 до 1
  • проценты: от 0% до 100

Таким образом, при 100% все изображение будет с оттенками серого, а при 0% останется неизменным. 0 приравнивается к 0%, а 1,0 — к 100%.

Зададим значение — 0.7 (или 70%):

9. Фильтр оттенок освещения — hue-rotate

На мой взгляд, это очень классный фильтр, при помощи которого с картинкой можно проделывать интересные вещи. Например, менять цвет исходного изображения, изменяя угол освещения.

Мы зададим значение — 300 градусов:

Ну и кто здесь говорил, что розовых обезьян не бывает?

10. Фильтр тень — drop-shadow

Фильтр задается сразу несколькими значениями. Сначала мы задаем значение по оси X, потом — по оси Y. Так мы обозначаем смещение тени по оси X и Y. Далее указывается радиус нашей тени и последним атрибутом — ее цвет.

В нашем случае укажем смещение тени на 3 пикселя, размер 5 и цвет тёмно-серый.

Обратите внимание, за счёт тени создается впечатление, будто вторая картинка приподнята.

Кстати, в самом видео-уроке мы не только разбирали все эти свойства, но и учились делать анимацию. И в нём создавали эффект поднятия картины при наведении. В Демо есть пример

PS: Друзья, если Вы хотите полностью изучить HTML5 и CSS3, и научиться верстать классные сайты – записывайтесь на тренинг Верстаем на 5+

Там вас ждем много интересных фишек и секретов по созданию сайтов. Будет интересно!

Супер статья. Я думал, что много знаю о CSS, но эта статья вдохновила на столько идей .

Ниче себе! Спасибо Серж!)

Как всегда — круто! Очень полезно! Спасибо!

И тут же я решил проверить действие фильтра в разных браузерах.

Подопытными кроликами стали:

Pale Moon (Версия 25.2.1 (x64))

Comodo Dragon (Версия 36.1.1.21)

Opera (Версия 27.0)

Vivaldi (Версия 1.0.83.38)

и Internet Explorer (Версия 11 не обновлял давно).

Разочаровал мой любимый Pale Moon. Кроме drop-shadow не работала ни одна картинка. Да и то без отбрасывания тени. И это учитывая, что Pale Moon разработан на основе FireFox. Может с настройками у меня что-то не в порядке ?

Comodo Dragon все показал как надо — чем и порадовал.

Opera тоже блестнула. Всё абсолютно без нареканий.

Vivaldi удивил. Картинки (все) сначала пропадали вовсе, а потом появлялись уже с готовым эффектом (примерно через секунду). Полагаю, что, отколовшись от Opera , Vivaldi пишут с какими-то новыми прибабахами о которых я не знаю. Ну и ладно. Не о браузерах речь.

Internet Explorer отработал полностью Pale Moon —но подобным образом. Т.е. почти никак.

Мои скромный вывод: разработчики браузеров со временем выпустят новые версии где всё будет работать, а мы используем действие фильтра на полную катушку.

За сим разрешите мне завершить свой пост.

Спасибо Серёга.За время знакомства с тобой, я получил действительно много полезного контента. Но самое главное, что в наше быстротечное время, с кучей информации, твоя полезна своей новизной и важностью.Если ты предлагаешь обратить на, что то внимание, значит это самая современная тенденция.Не исключение изучение РЕЬД-5 и CSS-3 Спасибо.

Провёл проверку в Safari браузере(IPad 2). Всё прекрасно работает! Версия браузера последняя на данный момент

«Как видите, теперь мы даже можем не пользоваться Photoshop для создания контраста и размытия. grin Вот прямо в CSS берём и изменяум изображения, как нашей душе угодно. «. Ага будем использовать методы которые жрут cpu, и оперативку(а если акселерация у браузера то оперативку x2)

Ага будем сидеть в каменном веке и работать только на калькуляторах. Мамонты вымирают, знаете ли Технологии придумывают для того, что бы их использовали. Одна картинка с анимацией на страницу — ничего не сделает.

Saturate() в CSS

Css module of single purpose classes for filter saturate

2158 400 800
bytes selectors declarations

Learn more about using css installed with npm:

Import the css module

Then process the css using the tachyons-cli

The easiest and most simple way to use the css is to use the cdn hosted version. Include it in the head of your html with:

The built css is located in the css directory. It contains an unminified and minified version. You can either cut and paste that css or link to it directly in your html.

The source css files can be found in the src directory. Running $ npm start will process the source css and place the built css in the css directory.

Фильтры в CSS

В графических редакторах очень легко менять яркость или контраст изображений, применять различные фильтры. С недавних пор это можно делать и средствами CSS прямо на веб-страницах с помощью CSS Filter Effects.

Поддержка браузеров

Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Числа с приставкой -webkit- указывают первую версию, которая работала с приставкой.

Chrome Firefox IE Opera Safari
18.0 -webkit- 35.0 Не поддерживается 15.0 -webkit- 6.0 -webkit-

Синтаксис

none — Значение по умолчанию. Не указывает, никаких эффектов

blur(px) — К изображению применяется эффект размытия . Большее значение будет создавать больше размытия .По умолчанию используеться значение 0 .

Пример

brightness(%) — Регулировка яркости изображения .0% делает изображение полностью черным .100% является по умолчанию и представляет собой исходное изображение.Значения более 100% обеспечит более яркие результаты.

Пример

contrast(%) — Регулировка контрастности изображения.0% делает изображение полностью черным.100% является по умолчанию и представляет собой исходное изображение. Значения более 100% обеспечит результаты с меньшим количеством контраста.

Пример

drop-shadow(h-shadow v-shadow blur spread color) — Применяется эффект тени к изображению.

Возможные значения:

  • h-shadow — Обязательно. Задает значение пикселя для горизонтальной тени. Отрицательные значения поместить тень слева от изображения.
  • v-shadow — Обязательно. Задает значение пикселя для вертикальной тени. Отрицательные значения поместите тень над изображением.
  • blur — необязательно. Это третье значение, и должно быть в пикселях. Добавляет эффект размытия тени. Большее значение будет создавать больше размытие (тень становится больше и светлее). Отрицательные значения не допускаются. Если не указано значение, используется 0 (край теневой является резкое).
  • spread — Необязательно. Это четвертое значение, и должно быть в пикселях. Положительные значения заставит тень расширяться и расти больше, а отрицательные значения приведет тень сокращаться. Если не указано, то будет 0 (тень будет иметь тот же размер, как элемент).
  • color — необязательно. Добавляет цвет тени. Если не указано, цвет зависит от браузера (часто черного цвета).

    Пример

    grayscale(%) — Преобразование изображения в оттенках серого.0% по умолчанию , и представляет собой исходное изображение.100% сделает изображение полностью серый (используется для черно-белых изображений ).

    Пример

    hue-rotate(deg) — Применяется поворот цветового тона на изображении. Значение определяет какое количество градусов вокруг цветового круга будет скорректирован. 0deg по умолчанию , и представляет собой оригинальное изображение.

    Пример

    invert(%) — Инвертирует образцы в изображении.0 по умолчанию , и представляет собой исходное изображение .100% сделает изображение полностью перевернутой.

    Пример

    opacity(%)Устанавливает уровень непрозрачности для изображения.0% является полностью прозрачным. 100% является по умолчанию и представляет собой исходное изображение (без прозрачности).

    Пример

    saturate(%) — Насыщает изображение .0% сделает изображение не — насыщенными.100% по умолчанию и представляет собой исходное изображение.Значения более 100% обеспечивает супер — насыщенные результаты .

    Пример

    sepia(%) — Преобразует изображение в сепии.0% по умолчанию , и представляет собой исходное изображение. 100% делает изображение полностью сепией .

    Пример

    Если хотите использовать несколько фильтров, надо каждый фильтр отделить пробелом.

    Filter Effects

    The CSS filter property provides for effects like blurring or color shifting on an element’s rendering before the element is displayed. Filters are commonly used to adjust the rendering of an image, a background, or a border. This is an experimental technology.

    Simple CSS Generators & Tools

    Agency Lists

    As a business owner, your time is very valuable. For anything larger than small web design tweaks or a very basic SEO strategy, you’ll be better off hiring a dedicated employee, a freelancer, or a specialized agency to head up your digital marketing efforts. That’s why we’ve put together objective, third-party lists that rank the best agencies in the business. Feel free to check them out if you’re in the marketing for a digital marketing agency:

    Quick Fun: CSS3 Filter Effects

    I quickly played with the brand-new CSS Filter Effects on the latest WebKit Nightly! (Edited: Now also supported on Chrome Canary 18.0.976.0 +)

    Click the images to view in the full size.

    This is a default google.com screen.
    No filter added.

    blur(radius) to create Gaussian blur

    The default is 0, no blur.

    brightness(amount)

    The default is 100%. Values of amount over 100% are allowed.
    Updated: I am not sure when it has modified, but it seems that not the accepted value is the range between -100% (dark) and 100% (light), and the default is 0.

    contrast(amount)

    The default is 100%. Values of amount over 100% are allowed.

    grayscale(amount)

    The default is 100%.

    sepia(amount)

    The default is 100%.

    invert(amount)

    The default is 100%.

    opacity(amount)

    The default is 100%, no transparency.

    Saturate(amount)

    The default is 100%.

    Saturate(amount) – the amount over 100% is also allowed.

    Илон Маск рекомендует:  Что такое код fbsql_insert_id
  • Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL