grayscale() в 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: 53405cd03cb5900f • Your IP : 188.64.174.135 • Performance & security by Cloudflare

CSS grayscale() Function

Use the grayscale() function to convert an image to grayscale.

The CSS grayscale() function is used with the filter property to convert an image to grayscale.

The grayscale() function requires an argument to be passed to it. This argument determines the proportion of the conversion that’s applied to the image. The argument can be either a percentage value or a number .

Using Percentages

Here’s an example using a percentage value to make an image completely grayscale:

Here’s an example using a percentage value to make the image partially grayscale:

Using Numbers

Here’s an example using a number:

Official Syntax

The official syntax of the grayscale() function is as follows:

Possible Values

The grayscale() function accepts a number or percentage as its argument. This argument determines the proportion of the conversion.

A value of 100% results in an image that’s completely grayscale. A value of 0% results in an image that’s unchanged. The specification allows amounts over 100% , but this will have no further effect on the image (i.e. the user agent will clamp it to 1 ).

A number value of 0.5 has the same effect as the percentage value 50% . A value of 1 is the same as 100% .

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.

3 способа сделать изображение серым

Бывает необходимо сделать изображение серым как можно быстрее и не используя графические редакторы. Конечно можно воспользоваться графическим редактором Adobe Photoshop(можно задать даже глубину и тон). В браузере конечно нельзя настраивать такие параметры, но наш глаз(если, конечно, вы не профессионал) почти не заметит разницы.

В этой статье мы рассмотрим способы как сделать изображение серым.

1. CSS фильтр

Использование свойства filter, пожалуй, является самым простым способом создать черно-белое изображение. Для создания черно-белого изображения в IE, необходимо использовать также свойство filter.

Сегодня, свойство filter является частью технологии CSS3, которое поддерживается такими браузерами как Firefox, Chrome и Safari. Webkit фильтры могут не только создавать эффект черно-белого изображения, но также могут придать эффект сепия и размытия.

Для того чтобы сделать изображение серым, необходимо прописать следующие свойства:

Данные код будет работать в IE6-9, Chrome18+, Safari 6.0+ и Opera15+.

2. Javascript

Альтернативой вышеприведенному коду является Javascript, который работает во всех браузерах, если он включен, включая IE6 и ниже.

Используя Javascript, мы можем задавать изображению черно-белый эффект, например, при наведении и клике по изображению. Совместно можно использовать jQuery, чтобы создать плавный эффект перехода к серому. Единственным недостатком является то, что Javascript может быть отключен в браузере.

3. SVG

Другим способ является использование SVG фильтров.

Всё что вам нужно это создать SVG файл и использовать код ниже:

Затем необходимо связать SVG файл и ID:

Также весь код можно написать прямо в CSS:

Результат будет похожим.

Вывод

Для поддержки данного эффекта всеми браузерами, необходимо комбинировать все способы. Данный код будет работать в Firefox 3.5+, Opera15+, Safari, Chrome и IE.

Данный код можно использовать вместе с Javascript, и в случае, если Javascript отключен, будет работать данный код. В этом может помочь Modernizr.

Modernizr добавляет js класс для body, если Javascript включен в браузере, и пропишет класс no-js если Javascript отключен. А в CSS осталось прописать сдедующее:

Кроссбраузерный GrayScale с поддержкой Internet Explorer 10/11

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

Но в последние годы, все основные браузеры мигрировали на платформу WebKit , что упростило разработку кроссбраузерных сайтов, однако компания Microsoft старается выделиться и выпускает Internet Explorer на платформе Tr >

И поскольку, как уже было написано выше, в Internet Explorer начиная с версии 10 были отключены DX Filters , то необходимо искать другое альтернативное решение. Одним из таких решений является наложение SVG слоя (jsF > ):

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

  • оригинальное изображение;
  • предварительно обесцвеченное изображение;

Таким образом достигается эффект 100% работоспособности в браузерах Internet Explorer без громоздкого кода и костылей. Обращаю внимание на то, что данный метод используется только в случае если пользователь использует IE, а для остальных браузеров будет применено просто CSS правило:

Принцип работы скрипта достаточно прост и элегантен (требует подключенную библиотеку jQuery):

  1. размещаем несколько блок-ссылок с фоном;
  2. загружаем оригиналы и обесцвеченные копии изображений в одну директорию, где у обесцвеченных копий имя файла формируется по принципу «название»-grey, например: original-name-grey.jpg;
  3. прописываем соответствующий CSS-код для позиционирования изображения (а также его размеров).

Теперь, если вы откроете страницу с помощью Internet Explorer 10-11, то вы увидите, что добавляется элемент IMG в блок-ссылку, который перекрывает фон родительского элемента, и исчезает (fadeOut) при наведении на блок.

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

Есть вопрос? Что-то не понятно в статье? Хочешь отблагодарить? Пиши комментарий!
Если тебе понравилась статья, а тем более если еще и помогла — поставь +1 и нажми «Мне нравится»!

Фильтры в CSS: размытие, оттенки серого, яркость и много других эффектов в CSS!

Дата публикации: 2020-08-03

От автора: фильтры изначально входили в спецификацию SVG. Позже люди поняли, что это очень полезный инструмент, и W3C начали работу по добавлению некоторых распространенных фильтров в CSS. CSS фильтры – довольно мощный и простой инструмент. С их помощью можно делать размытие, изменять яркость или насыщенность изображений и т.д. Фильтры можно использовать как отдельно, так и в комбинациях.

Для применения фильтра необходимо использовать следующий синтаксис:

Давайте коротко пройдемся по всем фильтрам.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Яркость

С помощью данного фильтра можно управлять яркостью изображений. В качестве параметра принимается значение, большее или равное нулю. Если задать значение 0%, то мы получим полностью черное изображение. Точно так же значение 100% даст нам исходное изображение. Для осветления изображения можно задать значение более 100%. К примеру, значение 300% сделает изображения в 3 раза светлее:

Контраст

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

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

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

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

Фильтр управляет насыщенностью цветов изображений. Значение 0% уберет все цвета с изображения, а значение выше 100% добавит контрастности. На 100% мы видим оригинальное изображение. Отрицательные значения не принимаются.

Сепия

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

Поворот цвета

Фильтр изменяет все цвета изображений. Угол поворота цветов зависит от заданного параметра. При значении 0deg изображение остается прежним. У данного фильтра нет максимального значения, однако выше 360deg эффект начинает повторяться. То есть значения 90deg и 450deg дадут одинаковый результат.

Инверсия

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

Как создать сайт самому?


Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Размытие

Фильтр применяет к изображениям размытие по Гауссу. Цвета начинают перемешиваться и наползать друг на друга. Передаваемый параметр радиуса задает количество пикселей на экране, которые будут смешиваться. Чем больше значение, тем сильнее размытие. Фильтр принимает значения в любой форме, кроме процентов.

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

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

Отбрасываемая тень

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

Все фильтры до этого момента были довольно общими, хотя и полезными. Однако вашему проекту может потребоваться что-то более специфичное. Если ни один из фильтров выше вам не подошел, вы можете создать свой SVG фильтр и через id передать его в фильтр url().

Объединение и анимация фильтров

Для получения различных эффектов можно объединять несколько фильтров. В большинстве случаев порядок фильтров не имеет значения, однако применяются они в том порядке, в котором они прописаны в CSS, и некоторые фильтры переписывают другие. К примеру, если использовать фильтр sepia после grayscale, то мы получим сепию и наоборот. Фильтры поддаются анимации. Если правильно все сделать, можно добиться интересного эффекта. Разберем пример ниже:

В коде выше на разных этапах анимации применяются разные фильтры. Результат можно посмотреть в демо ниже:

Внезапная смена яркости и контрастности с полной сепией в середине анимации придают драматизма. Лучший способ понять принцип работы – самому поэкспериментировать с анимацией фильтров!

Замечания

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

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

Свойство filter поддерживается во всех основных браузерах. В Chrome и Opera нужно добавлять префикс. Нет поддержки в IE, хотя Edge частично поддерживает фильтр. Частичная поддержка означает, что Edge поддерживает все фильтры, кроме url().

Заключение

В этой статье мы раскрыли множество возможностей в CSS фильтрах, которые доступны для разработчиков. Фильтры имеют высокую поддержку в браузерах, их легко применять, их производительность выше, чем у canvas. Кроме того, как я сказал в последнем разделе, их можно применять к видео и другим элементам.

Автор: Gajendar Singh

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

filter

На этой странице

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

Описание

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

В стандарт CSS включены несколько функций, которые обеспечивают предопределенные эффекты. Вы также можете ссылаться на SVG фильтр с URL-адресом на элемент фильтра SVG.

Начальное значение none
Применяется к все элементы; в SVG, это применяется к контейнерам, исключая элемент defs и все графические элементы
Наследуется нет
Отображение визуальный
Обработка значения как указано
Animation type a filter function list
Канонический порядок уникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

С помощью функции, используйте:

Для ссылки на SVG элемент, используйте:

Формальный синтаксис

Примеры

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

Примеры использования функции URL с SVG ресурсом показаны ниже.

Функции

Для испольлзования CSS свойства filter , Вы указываете значение для одной из выбранных функций. Если это значение недействительно, функция возвращает «none.» За исключением тех случаев, когда функции, которые принимают значение выраженное в процентах (34%) также принимают значение, выраженное как десятичная дробь (0.34).

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.

blur() [размытие]

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.

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 1 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 1 is used.

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. The parameters of the parameter are as follows.

(required) These are two values to set the shadow offset. specifies the horizontal distance. Negative values place the shadow to the left of the element. specifies the vertical distance. Negative values place the shadow above the element. See for possible units.
If both values are 0 , the shadow is placed behind the element (and may generate a blur effect if and/or is set). (optional) This is a third value. The larger this value, the bigger the blur, so the shadow becomes bigger and lighter. Negative values are not allowed. If not specified, it will be 0 (the shadow’s edge is sharp). (optional) This is a fourth value. 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: Webkit, and maybe other browsers, do not support this 4th length; it will not render if added. (optional) See values for possible keywords and notations. If not specified, the color depends on the browser. In Gecko (Firefox), Presto (Opera) and Trident (Internet Explorer), the value of the color property is used. On the other hand, WebKit’s shadow is transparent and therefore useless if is omitted.

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 0 is used.

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. Though there is no maximum value, the effect of values above 360deg wraps around.

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 0 is used.

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 1 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.

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, prov >amount ’ parameter is missing, a value of 1 is used.

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 0 is used.

Комбинирование функций

You may combine any number of functions to manipulate the rendering. The following example enhances the contrast and brightness of the image.

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

Спецификация Статус Комментарий
Filter Effects Module Level 1
Определение ‘filter’ в этой спецификации.
Рабочий черновик Первоначальное определение

Совместимость с браузерами

Особенность Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Базовая поддержка 18.0 -webkit [1] 35 (35) [2] Нет [3] 15.0 -webkit 6.0 -webkit
SVG элементы Нет [4] 35 (35) Нет Нет Нет
Особенность Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка 4.4 -webkit 35 (35) [2] Нет 22.0 (Да) -webkit
SVG элементы Нет [4] 35 (35) Нет Нет Нет

[1] In Chrome 18 to 19, saturate() function only takes integers instead of decimal or percentage values. This bug is fixed in Chrome 20 and further.

[2] Before Firefox 34, Gecko only implemented the url() form of the filter property; as chaining was not implemented then, only one url() was allowed (or when the layout.css.filters.enabled pref is set to false ).

The functional values of filter are controlled by the layout.css.filters.enabled pref and was available but disabled by default in Firefox 34.

[3] Internet Explorer 4.0 to 9.0 implemented a non-standard filter property. The syntax was completely different from this one and is not documented here.

[4] Blink does currently not implement this feature. See bug 109224.

Convert colored images to Grayscale with CSS

Quick ways to turn colorful image to grayscale mode in CSS without using even a bit of JavaScript.

Ever tried turning an image into grayscale in CSS? Can it be doable? Yes. With the help of filters.

CSS3 Filters allow you to desaturate an image in the browser. Before these magical filters, there were three popular ways to convert images into Black & White:

  1. JavaScript Image processing libraries like Pixastic
  2. PHP GD library filters, on the web (server-side)
  3. Image editing program like PhotoShop, off the web

Note that the second and the third ways involves the actual conversion of the images. Its okay with the image editing software on your computer, but can be pretty expensive on the server-side.

But why actually convert images to grayscale for web use? Better use JavaScript to visually-process images in the browser? Better use CSS filters.

Using CSS3 filters to make images grayscale is very easy and also avoids using any script libraries. Rest of this article shows how you can do it in merely 5 lines of code.

CSS3 Grayscale filter

We are going to make use of CSS3 grayscale filter on our image to turn it B&W. The grayscale filter is supported in most of the modern browsers, specifically in Chrome 18+, Safari 6+, Opera 17+ with different vendor prefixes. Take a look at the following code snippet:

With the above CSS, all the images with the class grayscale will appear desaturated or black & white in the browser window.

Check out the demo.

You may vary the percentage value of the grayscale filter to adjust its intensity as per your need.

What about IE and oldies? (Fallbacks)

CSS3 filters won’t work in older browsers, but if you still want fallbacks for them, below is a list.

Polyfill for Firefox 4+

Using SVG as filter will do the same task for older Firefox versions. Below is snippet:

For a neater code, you may consider putting the SVG code in a separate file ( .svg ) and then call it in using filter property.

For older Webkit browsers

In the below code, 1 stands for 100%. A lesser value will lower down the intensity of the grayscale.

For IE 6-9

No control over intensity though:

For IE10+

No CSS fallbacks available for IE10+ yet, therefore you have to use a different solution like grayscale.js or similar.

The final CSS

The above code has power good enough to make your images appear grayscale in major browsers except IE10+. Watch the demo again, or let me know your thoughts on this.

Read further

We push blog updates with the help of Feedburner. You’ll get a notification every time a post gets published here.

Welcome to W3Bits! I’m Rahul Arora, your host here, and this is my blog which is all about front-end Web development. Get to know more about us here.

We push blog updates with the help of Feedburner. You’ll get a notification every time a post gets published here.

karlhorky / grayscale-disable.css

img .grayscale.disabled <
filter : url ( » data:image/svg+xml;utf8, \’ http://www.w3.org/2000/svg \’ > \’ grayscale \’ > \’ matrix \’ values= \’ 1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0 \’ /> #grayscale » );
-webkit-filter : grayscale ( 0 % );
>
img .grayscale <
filter : url ( » data:image/svg+xml;utf8, \’ http://www.w3.org/2000/svg \’ > \’ grayscale \’ > \’ matrix \’ values= \’ 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0 \’ /> #grayscale » ); /* Firefox 10+, Firefox on Andro >*/
filter : gray ; /* IE6-9 */
-webkit-filter : grayscale ( 100 % ); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
>

This comment has been minimized.

Copy link Quote reply

meetbryce commented Feb 7, 2013

This comment has been minimized.

Copy link Quote reply

QassimHassan commented Mar 26, 2013

This comment has been minimized.

Copy link Quote reply

ozinepank commented Mar 31, 2013

This comment has been minimized.

Copy link Quote reply


tabliu commented Apr 20, 2013

Firefox15.0.1 can’t used it

This comment has been minimized.

Copy link Quote reply

zhlangi710 commented Apr 23, 2013

firefox 20.0.1 can’t used it too

This comment has been minimized.

Copy link Quote reply

MohamedFaramawi commented Sep 4, 2013

This doesn’t work on IE 10

This comment has been minimized.

Copy link Quote reply

klaymen commented Nov 3, 2013

To use this in IE10, make the browser render in IE9 mode.

This comment has been minimized.

Copy link Quote reply

Streamlinelv commented Dec 16, 2013

What Klaymen says would work, but it is not a good practice.
You shouldn’t force IE10 to render like IE9. I suggest that you check out this tutorial that solves grayscale images even on IE10 and IE11.

I suggest that you use this solution that is cross-browser friendly way making images grayscale even on Internet Explorer. Here is the demo — http://www.majas-lapu-izstrade.lv/cross-browser-grayscale-ie11

This comment has been minimized.

Copy link Quote reply

v >Oct 9, 2015

can anyone help me in applying ‘grayscale’ in safari 5.1. i tried filter: url as well. it dint’t support.

This comment has been minimized.

Copy link Quote reply

ErikVeland commented Feb 3, 2020

Safari 5.1? What year is this?

This comment has been minimized.

Copy link Quote reply

ninjaonsafari commented Jun 30, 2020

doesnt work in ie 11

This comment has been minimized.

Copy link Quote reply

ahmedam55 commented Jul 10, 2020

doesn’t work on ie 11

This comment has been minimized.

Copy link Quote reply

andrienko commented Sep 14, 2020

Clearly does not work on IE11 by default.

This comment has been minimized.

Copy link Quote reply

Fallenstedt commented Apr 13, 2020

To everyone saying it doesn’t work on ie11. Duh. https://caniuse.com/#search=filter

  • © 2020 GitHub , Inc.
  • Terms
  • Privacy
  • Security
  • Status
  • Help

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Convert Color Image to Grayscale with CSS

Converting a color image to grayscale is possible with CSS3. There is no need to keep separate color and grayscale images which can then be displayed for different uses. This is useful in various instances, depending on the design and functionality of the website.

Fortunately there are CSS filters that makes the processing of converting a color image to grayscale very easy. It even works in Internet Explorer and Microsoft Edge.

CSS Code for Color to Grayscale

The first line is for Internet Explorer 6 to 9, the second lines is for Microsoft Edge and Firefox and the webkit filter is for Google Chrome, Safari and Opera.

Despite the promise of cross-browser functionality there may be some issues, especially with later versions of Internet Explorer, Safari and Opera.

Grayscale to Color on Hover

It may be useful to restore the color to the grayscale version when the user hovers over the image with their cursor. Once again this is quite simple with CSS3.

To reverse the effect, meaning display a color image and convert it only to grayscale when the cursor hovers over it, simply swap the code around. In other words the img:hover will contain the code for filtering to grayscale. It is necessary to nullify the grayscale effect of the image when the cursor is not hovering over the image. This can be done by placing the code to negate the grayscale filter in the img section.

Alternative CSS Code

Another option is to create a gray div overlay and change the opacity. However, this is not a true grayscale effect but nevertheless worth considering.

Now simply place the image within a div as follows:

This code could work just as well for a color filter over the image rather than just a graying out effect.

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