sepia() в 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.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 53407bb1abe98fa9 • Your IP : 188.64.174.135 • Performance & security by Cloudflare

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.

Функция sepia()CSS3-генератор ☛

Функция sepia() превращает изображение в сепию — так называется чёрно-белое изображение с коричневым оттенком. Сепия придаёт фотографиям старинный вид.

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

Значение 0% или 0 оставляет изображение неизменным. Значение 100% или 1 полностью превращает изображение в сепию. Любые значения от 0% до 100% или от 0 до 1 линейно применяют эффект.

Отрицательное значение не допускается. Пустое значение воспринимается как 0.

Пример

Результат данного примера показан на рис. 1. При наведении курсора мыши на фотографию, она плавно превращается в цветную.

Примечание

Chrome, Opera и Safari поддерживают свойство -webkit-filter .

Спецификация ?

Спецификация Статус
Filter Effects Module Level 1 Рабочий проект

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные ?

Internet Explorer Edge Chrome Opera Safari Firefox
13 18 15 6 35
Android Firefox Mobile Opera Mobile Safari Mobile
4.4 35 37 6.1

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

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 фильтров. Вот два из них для ознакомления:

Заключение

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

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 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)

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

Онлайн генератор CSS фильтров для изображений

CSS фильтр: Оттенки серого

CSS фильтр: Сепия

CSS фильтр: Смещение цвета

CSS фильтр: Инвертирование цвета

CSS фильтр: Контраст

CSS фильтр: Размытие

CSS фильтр: Якрость

CSS фильтр: Насыщенность

CSS фильтр: Прозрачность

CSS фильтр: Тень

CSS фильтр: ALL

ОНЛАЙН ГЕНЕРАТОР CSS ФИЛЬТРОВ ДЛЯ ИЗОБРАЖЕНИЙ

Для того чтобы упростить представление работы css свойства «filter» вы можете воспользоваться онлайн генератором. В левой и правой колонках представлены все 10 вариаций фильтров, кроме того на верхней панели можно переключить центральный вид на одновременное применение всех фильтров. В общем случае после выбора необходимого вам свойства, в центральной колонке будет отображен блог с изображением, ползунком и поле с кодом. Изменяя значения фильтра с помощью ползунка вы тут же сможете увидеть как будет выглядеть тот или иной фильтр, код также будет реагировать на движение ползунка и его можно скопировать сразу же после достижения нужного результата.

Формат изображения* — формат изображения для которого применяется фильтр.

Параметры вставки фильтра* — выбор как будет загружен фильтр на страницу.

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

Перезагрузка — сброс всех параметров.

* — В будущем будут добавлены варианты для изменения и этих параметров.

Общая информация о свойстве CSS — Filter

CSS свойство filter позволяет манипулировать цветом изображения путём наложения на него различных фильтров, таких как сепия, оттенки серого, насыщенность и т.д. Так как свойство введено относительно недавно (первое описание стандарта от 25 октября 2012) его не поддерживают старые браузеры, в том числе вся линейка Internet Explorer.

Поддержка CSS свойства filter в разных браузерах:

  • Не совместимо с IE. Подробнее о возможной совместимости — Microsoft Library.
  • Edge — не поддерживается url.
  • Chrome с 58 до 49 версии и Android Browser в Android 4.4 и 4.4.4 требуют добавления префикса «-webkit-«.

Описание значений свойства filter

BLUR — Размытие

Возможные величины: длина (px,rem,vw,vh и т.д.).

Диапазон: 0 — ∞; где ноль исходное изображение.

Описание: Размытие, смещение резкости, расфокусировка. При больших значениях свойства, изображение может становиться близким к монотонному. Также при больших значениях может понадобиться время чтобы эффект отрендерился в браузере.

Пример: filter: blur(10px);

BRIGHTNESS — Яркость

Возможные величины: число, проценты.

Диапазон: 0 — ∞, 0%-∞%;где 1 или 100% — оригинальное изображение.

Описание: Увеличение и снижение яркости. При величине меньше единицы или 100% изображение будет темнеть (в нуле чёрное), при значениях больше единицы или 100% изображение будет становиться ярче.

Пример: filter: brightness(0.2);

CONTRAST — Контраст

Возможные величины: число, проценты.

Диапазон: 0 — ∞, 0%-∞%;где 1 или 100% — оригинальное изображение.

Описание: Увеличение и снижение контрастности. При величине меньше единицы или 100% изображение будет иметь меньшее количество оттенков (в нуле серое), при значениях больше единицы или 100% на изображении будет увеличиваться количество цветовых оттенков.

Пример: filter: contrast(200%);

DROP-SHADOW — Тень

Возможные величины: Длина и цвет для тени.

Диапазон: любое значение для первых двух параметров смещения; 0 — ∞, для параметра размытия, где 0 — отсутствие размытия.

Описание: Тень для изображения, необходимо задать два первых параметра длины для смещения тени по оси координат (x,y), третий параметр задаёт размытие/прозрачность тени (третий параметр не должен быть меньше нуля). Последний параметр — цвет тени (стандартное значении цвета при его отсутствии разнится в зависимости от браузера, например в Chrome оно равно — #1a1a1a ). Порядок в спецификации задан следующим образом: 1 — смещение по оси X; 2 — смещение по оси Y; 3 — размытие; 4 — цвет тени. При этом браузеры также активируют свойство если цвет тени задать в самом начале — перед смещением по оси абсцисс (Х). Значение равнозначны с css свойством ‘box-shadow’.

Пример: filter: drop-shadow(20px -20px 10px #000);

GRAYSCALE — Оттенки серого

Возможные величины: число, проценты.

Диапазон: 0 — 1, 0%-100%;где 0 или 0% — оригинальное изображение.

Описание: Увеличение и снижение количество цветов на изображении.

Пример: filter: grayscale(0.2);

HUE-ROTATE — Смещение цвета

Возможные величины: угловые (градусы, радианы)

Диапазон: любое значение ; где 0 или 360deg — оригинальное изображение.

Описание: Действие основано на замене текущего цвета, на цвет который будет получен при смещении на заданный угол по цветовому кругу. Например, синий цвет при смещении угла в 90 градусов — filter: hue-rotate(90deg), сменится на салатовый, а при значении 180deg смениться на жёлтый.

CSS фильтр Hue-rotate — схема смещения на 120deg,
в результате цвет #007bff будет заменён на #7dfc04

Пример: filter: hue-rotate(180deg);

INVERT — Инвертирование цвета

Возможные величины: число, проценты.

Диапазон: 0 — 1 , 0%-100%; где 0 или 0% — оригинальное изображение.

Описание: Инвертирование цвета (например, с чёрного в белый), 0 — оригинальное изображение, 1 или 100% полностью инвертированное. В середине процесса инвертирования (0.5 или 50%) изображение становится полностью серым.

Пример: filter: invert(90%);

Opacity — Прозрачность

Возможные величины: число, проценты.

Диапазон: 0 — 1 , 0%-100%; где 1 или 100% — оригинальное изображение.

Описание: Прозрачность. Разница между обычным свойством ‘opacity’ в том, что фильтр можно наложить совместно с другими фильтрами при этом не получить умножение прозрачности для всего блока. Свойство opacity: 0.5 и filter: opacity(0.5) без примесей других модификаторов — равнозначны, но при этом применённые к одному блоку не дадут ему полную прозрачность. (Можете попинать в комментариях в более правильном направлении).

Пример: filter: opacity(0.7);

Saturate — Насыщенность

Возможные величины: число, проценты.

Диапазон: 0 — ∞, 0%-∞%; где 1 или 100% — оригинальное изображение.

Описание: Увеличение и снижение насыщенности. При величине меньше единицы или 100% изображение будет иметь меньшее количество оттенков (в нуле будут использованы только оттенки серого, равнозначно grayscale(1) ), при значениях больше единицы или 100% на изображении будет увеличиваться насыщенность цветов.

Пример: filter: saturate(0.7);

SEPIA — Сепия

Возможные величины: число, проценты.

Диапазон: 0 — 1, 0%-100%; где 0 или 0% — оригинальное изображение.

Описание: Имитация выцветшей фотографии (эффект старины). На 100% или 1, в изображении будут использованы только оттенки коричневого (светло-коричневого) цвета.

Пример: filter: sepia(100%);

Sepia() в CSS

CSS3 фильтры являются весьма интересным ответвлением от SVG, позволяющим изменять HTML-элементы и изображения, применяя фильтры размытия, яркости и многие другие. В этом уроке мы кратко рассмотрим, как именно они работают.

Как это работает?

Используя только CSS мы можем создавать некоторые довольно сложные эффекты. Они могут быть применены как к изображениям, так и к HTML-элементам. Свойство, которое используется для управления всеми этими эффектами — это filter.

Как и следовало ожидать, для этого свойства требуется использование префикса браузера. Но на данный момент, только -webkit- (Chrome и Safari) является единственным движком браузеров, поддерживающим это свойство.

Фильтрация

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

Есть несколько фильтров, которые не будут рассмотрены ниже, но их можно легко реализовать с уже существующими CSS (прозрачность и тени). Вот оригинальное изображение, которое мы будем использовать для демонстрации работы фильтров:

Я буду приводить фото c применением фильтра (первое фото) и результат работы фильтра в виде статичного изображения (второе фото), если вы используете браузер, который не поддерживает фильтры и не можете увидеть результат.

Размытие

Всегда хотели сделать гауссовское размытие для изображения или текста только при помощи одного CSS? С фильтрами вы это сможете! Размытие измеряется в пикселях, так что вы можете сделать что-то вроде этого:

Яркость

Яркость измеряется от нуля до единицы, 1 — это полная яркость (белый цвет), а 0 — первоначальная яркость.

Насыщенность

Насыщенность измеряется в процентах.

Поворот тона

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

Контрастность

Констрастность, опять же, измеряется в процентах. 100% является значением по умолчанию, 0% позволит создать полностью черное изображение. Все, что более 100% добавляет контраст!

Инверсия

Также измеряется в процентах. Доступны значения от 0% до 100%. Как ни странно, на данный момент, webkit не поддерживает инверсии, если они меньше, чем 100%.

Обесцвечивание

Опять же, указываете значение в процентах, на которое вы хотите обесцветить изображение. Доступны значения от 0% до 100%.

Сепия

Я полагаю, это очень полезно, если вы хотите опубликовать что-то в Instagram. Хотя я также полагаю, вы не будете использовать CSS для этого. Во всяком случае, подобные оттенки серого и негатива, в сумме, позволят вам добавить сепию к изображению. 100% — это будет завершенная сепия, 0% — исходное изображение.

Поддержка браузерами

Webkit Mozilla Trident Presto
Размытие Экспериментальная Нет Нет Нет
Яркость
Насыщенность
Поворот тонов
Контрастность
Инверсия Только полная инверсия
Обесцвечивание Экспериментальная
Sepia

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Притормози, дружище

Проходить главу «Кекстаграм: Начало. CSS-фильтры» можно после оформления подписки.

Консультация по телефону 8 800 555-86-28 .

Курсы

Профессии

Информация

Услуги

Остальное

Регистрация

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Восстановление доступа

Забыли пароль или потеряли доступ к профилю? Введите привязанную к профилю эл. почту, мы отправим вам письмо со ссылкой для восстановления.

Забыли привязать эл. почту к профилю? Напишите нам, мы поможем.

Редактирование изображений в CSS: Фильтры

Представьте ситуацию, когда вам нужно иметь на сайте высококонтрастную, размытую и яркую версии одного и того же изображения. До появления фильтров в CSS вы могли либо загрузить несколько версий изображения, либо манипулировать с изображениями с помощью JavaScript.

Фильтры CSS предоставляют простой способ решения этой задачи. Давайте кратко рассмотрим все доступные фильтры.

Фильтр blur

Этот фильтр применяет к изображениям гауссово размытие. Фильтр принимает значение length, которое определяет, сколько пикселей нужно смешать друг с другом. Большее значение даст большее размытие. Радиус размытия нельзя указывать в процентах. Если значение не указано, по умолчанию используется радиус 0. Синтаксис этого фильтра:

Фильтр blur() не принимает отрицательных значений.

Фильтр brightness

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

Фильтр не принимает отрицательных значений.

Фильтр contrast

Этот фильтр изменяет контрастность изображения. Также как фильтр brightness, он принимает как число, так и процентное значение. При 0% результат будет полностью серым, значение 100% не даст никакого эффекта, значения больше 100% сделают изображение более контрастным. В фильтр contrast() нельзя передавать отрицательные значения. Синтаксис фильтра:

Фильтр box-shadow

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

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

Фильтр grayscale

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

Фильтр hue-rotate

Фильтр применяет к изображению поворот оттенка. Параметр фильтра определяет угол на цветовом круге, на который должно быть повернуто изображение. При 0deg изображение не будет изменено, при 360deg фильтр сделает полный оборот. Синтаксис фильтра:

Фильтр invert

Фильтр инвертирует изображение. Величину инверсии определяет переданный параметр. При 0% мы получим то же изображение без изменений, при 100% — полностью инвертированное изображение, при 50% — полностью серое изображение. Любое значение между 0% и 100% будет означать степень инверсии. Фильтр не принимает отрицательных значений. Синтаксис фильтра:

Фильтр opacity

Фильтр opacity применяет прозрачность к исходному изображени. Значение параметра 0% сделает изображение полностью прозрачным, 100% — полностью непрозрачным.

Фильтр похож на свойство opacity в CSS. Разница в том, что для фильтра некоторые браузеры могут использовать аппаратное ускорение для увеличения производительности. Синтаксис фильтра:

Фильтр saturate

Этот фильтр изменяет насыщенность изображения. Насыщенность задается передаваемым параметром. Фильтр не принимает отрицательные значения. При 0% (минимальное допустимое значение) изображение становится полностью не насыщенным, при 100% — получаем исходное изображение. Чтобы получить более насыщенное изображение, необходимо передать значение, большее 100%. Синтаксис:

Фильтр sepia

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

Фильтр url

Могут возникнуть случаи, когда вам понадобится применить собственные фильтры к изображению. Фильтр url позволяет применить произвольный SVG фильтр. В качестве параметра фильтр принимает как путь к файлу с фильтром, так и идентификатор элемента на странице. Пример постеризации изображения:

Результат применения этого фильтра:

Применение нескольких фильтров

Если вас не устраивает результат какого-то одного фильтра, вы можете комбинировать их. Порядок, в котором вы будете применять фильтры влияет на результат. Несколько фильтров к одному изображению можно применить следующим способом:

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

В некоторые случаях разный порядок фильтров может приводить к совершенно разному результату. Например, использование sepia() после grayscale() преобразует изображение в сепию, а использование grayscale() после sepai() сделает его черно-белым.

Анимация фильтров

Свойство filter может быть анимировано. При правильном сочетании из0ображения и фильров можно добиться потрясающих результатов. Рассмотрим фрагмент кода ниже:

Я использовал фильтры hue-rotate() и brightness() вместе, чтобы добиться эффекта дня и ночи. На 20% анимации я увеличиваю яркость, оставляя оттенок без изменения, чтобы создать эффект солнечного дня. К конце анимации я поворачиваю оттенок на 180 градусов. В результате получаю синее изображение. В сочетании с очень низкой яркостью, это создает эффект ночи.

Заключение

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

Нашли опечатку? Orphus: Ctrl+Enter

© getinstance.info Все права защищены. 2014–2020

Все права на материалы, публикуемые на данном сайте, принадлежат редакции сайта, за исключением случаев перепечатки чужих материалов, и охраняются в соответствии с законодательством РФ.

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