Css drop shadow filter: drop-shadow() — CSS: Cascading Style Sheets

filter — CSS | MDN

Experimental

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

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

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

Предупреждение: Старые версии (с 4.0 до 9.0) браузера Windows Internet Explorer поддерживают нестандартный «filter», который с тех пор устарел.

filter: url(resources.svg);
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);


filter: contrast(175%) brightness(3%);


filter: inherit;
filter: initial;
filter: unset;

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

filter: <filter-function> [<filter-function>]* | none

Для ссылки на SVG <filter> (en-US) элемент, используйте:

filter: url(svg-url#element-id)

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

none | (en-US) <filter-function-list>
где 
<filter-function-list> = [ (en-US) <filter-function> | (en-US) <url> (en-US) ] (en-US)+ (en-US)
где 
<filter-function> = <blur()> | (en-US) <brightness()> | (en-US) <contrast()> | (en-US) <drop-shadow()> | (en-US) <grayscale()> | (en-US) <hue-rotate()> | (en-US) <invert()> | (en-US) <opacity()> | (en-US) <saturate()> | (en-US) <sepia()>
где 
<blur()> = blur( <length> )
<brightness()> = brightness( <number-percentage> )
<contrast()> = contrast( [ (en-US) <number-percentage> ] (en-US) )
<drop-shadow()> = drop-shadow( <length>{ (en-US)2,3} (en-US) <color>? (en-US) )
<grayscale()> = grayscale( <number-percentage> )
<hue-rotate()> = hue-rotate( <angle> )
<invert()> = invert( <number-percentage> )
<opacity()> = opacity( [ (en-US) <number-percentage> ] (en-US) )
<saturate()> = saturate( <number-percentage> )
<sepia()> = sepia( <number-percentage> )
где 
<number-percentage> = <number> | (en-US) <percentage>
<color> = <rgb()> | (en-US) <rgba()> | (en-US) <hsl()> | (en-US) <hsla()> | (en-US) <hex-color> | (en-US) <named-color> | (en-US) currentcolor | (en-US) <deprecated-system-color>
где 
<rgb()> = rgb( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgb( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgb( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<rgba()> = rgba( <percentage>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <number>{ (en-US)3} (en-US) [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) rgba( <percentage># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) ) | (en-US) rgba( <number># (en-US){ (en-US)3} (en-US) , <alpha-value>? (en-US) )
<hsl()> = hsl( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsl( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
<hsla()> = hsla( <hue> <percentage> <percentage> [ (en-US) / <alpha-value> ] (en-US)? (en-US) ) | (en-US) hsla( <hue>, <percentage>, <percentage>, <alpha-value>? (en-US) )
где 
<alpha-value> = <number> | (en-US) <percentage>
<hue> = <number> | (en-US) <angle>

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

.mydiv { filter: grayscale(50%) }


img {
  filter: grayscale(0.5) blur(10px);
}

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

.target { filter: url(#c1); }

.mydiv { filter: url(commonfilters.xml#large-blur) }

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

url()

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.

filter: url(resources.svg#c1)

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.

<svg xmlns="http://www.w3.org/2000/svg">
  <filter x="-5%" y="-5%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
</svg>

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.

<svg xmlns="http://www.w3.org/2000/svg">
 <filter>
    <feComponentTransfer>
        <feFuncR type="linear" slope="[amount]"/>
        <feFuncG type="linear" slope="[amount]"/>
        <feFuncB type="linear" slope="[amount]"/>
    </feComponentTransfer>
  </filter>
</svg>

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.

<svg xmlns="http://www.w3.org/2000/svg">
  <filter>
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
    </feComponentTransfer>
  </filter>
</svg>

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 <shadow> (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 <shadow> parameter are as follows.

<offset-x> <offset-y> (required)

These are two <length> values to set the shadow offset. <offset-x> specifies the horizontal distance. Negative values place the shadow to the left of the element. <offset-y> specifies the vertical distance. Negative values place the shadow above the element. See <length> for possible units.
If both values are 0, the shadow is placed behind the element (and may generate a blur effect if <blur-radius> and/or <spread-radius> is set).

<blur-radius> (optional)

This is a third <length> 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).

<spread-radius> (optional)

This is a fourth <length> 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.

<color> (optional)

See <color> 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 (en-US) property is used. On the other hand, WebKit’s shadow is transparent and therefore useless if <color> is omitted.

filter: drop-shadow(16px 16px 10px black)

<svg xmlns="http://www.w3.org/2000/svg">
 <filter>
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
    <feFlood flood-color="[color]"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

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.

filter: hue-rotate(90deg)

<svg xmlns="http://www.w3.org/2000/svg">
  <filter >
    <feColorMatrix type="hueRotate" values="[angle]" />
  <filter />
</svg>

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, providing super-saturated results. If the ‘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: contrast(175%) brightness(103%)

BCD tables only load in the browser

SVG Drop Shadow с использованием CSS3

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <filter><feGaussianBlur stdDeviation="0.8" /></filter>
    <g transform="matrix(.7,0,0,.7,-117.450795,-335.320895)">
        <g transform="matrix(12.997776,0,0,-12.997776,389.30313,662.04015)">
            <path d="m 0,0 -1.107,0 c -0.039,0 -0.067,0.044 -0.067,0.086 0,0.015 0.589,1.914 0.589,1.914 0.021,0.071 0.023,0.073 0.031,0.073 l 0.001,0 c 0.009,0 0.01,-0.002 0.031,-0.073 0,0 0.589,-1.899 0.589,-1.914 C 0.067,0.044 0.037,0 0,0 M 1.493,4.345 C 1.482,4.383 1.448,4.411 1.408,4.414 l -4.065,0 C -2.698,4.41 -2.731,4.383 -2.742,4.346 c 0,0 -2.247,-7.418 -2.247,-7.432 0,-0.037 0.029,-0.067 0.067,-0.067 l 2.687,0 c 0.021,0.008 0.037,0.028 0.042,0.051 l 0.313,1 c 0.01,0.025 0.033,0.042 0.061,0.043 l 2.479,0.002 c 0.027,-0.002 0.051,-0.021 0.061,-0.045 l 0.32,-1 c 0.005,-0.023 0.021,-0.044 0.042,-0.052 0,0 2.642,10e-4 2.644,10e-4 0.037,0 0.068,0.028 0.068,0.065 0,0.013 -2.302,7.433 -2.302,7.433" />
        </g>
        <g transform="matrix(12.997776,0,0,-12.997776,508.27177,644.93113)">
            <path d="m 0,0 -1.651,-0.001 c 0,0 -0.044,0.013 -0.044,0.063 l -10e-4,0.833 c 0,0.05 0.044,0.063 0.044,0.063 l 1.514,0 C 0.038,0.958 0.394,0.87 0.394,0.463 0.394,0.056 0,0 0,0 m 7.916,0.645 3.741,0 0,2.453 -4.81,0 C 6.397,3.098 5.764,2.866 5.401,2.597 5.038,2.328 4.513,1.715 4.513,0.87 c 0,-0.845 0.513,-1.502 0.513,-1.502 0.263,-0.326 0.925,-1.005 0.925,-1.005 0.015,-0.016 0.024,-0.037 0.024,-0.061 0,-0.051 -0.041,-0.092 -0.092,-0.092 l -3.705,0 c -0.451,0.002 -0.482,0.181 -0.482,0.207 0,0.046 0.056,0.075 0.056,0.075 0.169,0.081 0.514,0.35 0.514,0.35 0.732,0.57 0.82,1.352 0.82,1.771 0,0.42 -0.063,1.163 -0.814,1.814 C 1.521,3.078 0.57,3.096 0.57,3.096 l -5.287,0 c 0,0 0,-7.52 0,-7.522 0,-0.024 0.022,-0.043 0.046,-0.043 l 2.943,0 0,2.11 c 0,0.037 0.057,0 0.057,0 l 1.533,-1.54 c 0.545,-0.551 1.446,-0.57 1.446,-0.57 l 5.796,0.001 c 0.989,0 1.539,0.538 1.69,0.688 0.15,0.151 0.651,0.714 0.651,1.647 0,0.932 -0.426,1.409 -0.608,1.628 C 8.675,-0.309 8.029,0.375 7.894,0.517 7.878,0.53 7.868,0.55 7.868,0.572 c 0,0.033 0.019,0.064 0.048,0.073" />
        </g>
        <g transform="matrix(12.997776,0,0,-12.997776,306.99861,703.01559)">
            <path d="m 0,0 c 0.02,0 0.034,0.014 0.04,0.036 0,0 2.277,7.479 2.277,7.486 0,0.02 -0.012,0.042 -0.031,0.044 0,0 -2.805,0 -2.807,0 -0.014,0 -0.023,-0.011 -0.026,-0.026 0,-0.001 -0.581,-1.945 -0.581,-1.946 -0.004,-0.016 -0.012,-0.026 -0.026,-0.026 -0.014,0 -0.026,0.014 -0.028,0.026 L -1.79,7.541 c -0.002,0.013 -0.012,0.025 -0.026,0.025 -10e-4,0 -3.1,0.001 -3.1,0.001 -0.009,-0.002 -0.017,-0.01 -0.02,-0.018 0,0 -0.545,-1.954 -0.545,-1.954 -0.003,-0.017 -0.012,-0.027 -0.027,-0.027 -0.013,0 -0.024,0.01 -0.026,0.023 l -0.578,1.952 c -0.001,0.012 -0.011,0.022 -0.023,0.024 l -2.992,0 c -0.024,0 -0.044,-0.02 -0.044,-0.045 0,-0.004 10e-4,-0.012 10e-4,-0.012 0,0 2.31,-7.471 2.311,-7.474 C -6.853,0.014 -6.839,0 -6.819,0 c 0.003,0 2.485,-0.001 2.485,-0.001 0.015,0.002 0.03,0.019 0.034,0.037 10e-4,0 0.865,2.781 0.865,2.781 0.005,0.017 0.012,0.027 0.026,0.027 0.015,0 0.023,-0.012 0.027,-0.026 L -2.539,0.024 C -2.534,0.01 -2.521,0 -2.505,0 -2.503,0 0,0 0,0" />
        </g>
        <g transform="matrix(12.997776,0,0,-12.997776,278.90126,499.03369)">
            <path d="m 0,0 c -0.451,0 -1.083,-0.232 -1.446,-0.501 -0.363,-0.269 -0.888,-0.882 -0.888,-1.727 0,-0.845 0.513,-1.502 0.513,-1.502 0.263,-0.326 0.925,-1.01 0.925,-1.01 0.015,-0.016 0.024,-0.037 0.024,-0.06 0,-0.051 -0.041,-0.093 -0.092,-0.093 -0.008,0 -6.046,0 -6.046,0 l 0,-2.674 7.267,0 c 0.988,0 1.539,0.538 1.69,0.689 0.15,0.15 0.65,0.713 0.65,1.646 0,0.932 -0.425,1.414 -0.607,1.633 -0.162,0.196 -0.808,0.876 -0.943,1.017 -0.016,0.014 -0.026,0.034 -0.026,0.056 0,0.033 0.019,0.063 0.048,0.073 l 3.5,0 0,-5.114 2.691,0 0,5.101 3.267,0 0,2.466 L 0,0 Z" />
        </g>
        <g transform="matrix(12.997776,0,0,-12.997776,583.96822,539.30215)">
            <path d="m 0,0 -1.651,-0.001 c 0,0 -0.044,0.013 -0.044,0.063 l -10e-4,0.833 c 0,0.05 0.044,0.063 0.044,0.063 l 1.514,0 C 0.038,0.958 0.394,0.87 0.394,0.463 0.394,0.056 0,0 0,0 m 2.178,-1.79 c -0.45,0.002 -0.482,0.181 -0.482,0.207 0,0.046 0.056,0.075 0.056,0.075 0.169,0.081 0.514,0.35 0.514,0.35 0.732,0.57 0.82,1.352 0.82,1.771 0,0.42 -0.063,1.163 -0.814,1.814 C 1.521,3.078 0.57,3.098 0.57,3.098 l -5.287,0 c 0,0 0,-7.522 0,-7.524 0,-0.024 0.022,-0.043 0.046,-0.043 0.005,0 2.943,0 2.943,0 l 0,2.109 c 0,0.038 0.057,0 0.057,0 l 1.533,-1.539 c 0.545,-0.551 1.446,-0.57 1.446,-0.57 l 4.525,0 0,2.679 -3.655,0 z" />
        </g>
        <g transform="matrix(12.997776,0,0,-12.997776,466.86346,556.40203)">
            <path d="m 0,0 -1.107,0 c -0.041,0 -0.067,0.044 -0.067,0.086 0,0.016 0.589,1.914 0.589,1.914 0.021,0.071 0.027,0.073 0.031,0.073 l 0.001,0 c 0.004,0 0.01,-0.002 0.031,-0.073 0,0 0.589,-1.898 0.589,-1.914 C 0.067,0.044 0.04,0 0,0 M 1.49,4.347 C 1.479,4.385 1.446,4.412 1.405,4.414 l -4.065,0 C -2.7,4.412 -2.734,4.385 -2.745,4.348 c 0,0 -2.245,-7.42 -2.245,-7.434 0,-0.037 0.03,-0.067 0.067,-0.067 l 2.687,0 c 0.022,0.007 0.038,0.028 0.043,0.051 l 0.313,1.001 c 0.01,0.024 0.033,0.041 0.061,0.042 l 2.478,0 C 0.687,-2.061 0.71,-2.078 0.721,-2.102 l 0.32,-1 c 0.005,-0.023 0.021,-0.044 0.042,-0.052 0,0 2.642,10e-4 2.644,10e-4 0.037,0 0.067,0.028 0.067,0.066 0,0.012 -2.304,7.434 -2.304,7.434" />
        </g>
    </g>
  </defs>
  <rect />
  <use filter="url(#Blur)" xlink:href="#Img"
    transform="translate(1.8,.9)"/>
  <use xlink:href="#Img"/>
</svg>

Свойство filter | CSS справочник

CSS свойства

Определение и применение

CSS свойство filter устанавливает визуальный эффект (фильтр) для элемента (например, размытие или изменение цвета). Примеры и описание всех возможных визуальных эффектов рассмотрены ниже.

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

CSS синтаксис:

filter:"none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url()";

Допускается иcпользование нескольких фильтров к элементу в одном объявлении.
filter:"blur(10px) brightness(150%);

JavaScript синтаксис:

object.style.webkitFilter = "blur(10px)"

Значения свойства

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Да.

Пример использования

Эффект размытия изображения — функция blur()

img {
-webkit-filter:blur(5px); /* для расширенной поддержки свойства */
filter:blur(5px); /* эффект размытия изображения (указываем радиус) */

blur (5px)

blur (10px)

Эффект увеличения яркости изображения — функция brightness()

img {
-webkit-filter:brightness(200%); /* для расширенной поддержки свойства */
filter:brightness(200%); /* эффект  увеличения яркости изображения */

brightness(200%)

brightness(50%)

Эффект увеличения контрастности изображения — функция contrast()

img {
-webkit-filter:contrast(200%); /* для расширенной поддержки свойства */
filter:contrast(200%); /* эффект  увеличения контрастности изображения */

contrast(200%)

contrast(50%)

Эффект тени изображения — функция drop-shadow()

img {
-webkit-filter:drop-shadow(20px 10px 15px forestgreen); /* для расширенной поддержки свойства */
filter:drop-shadow(20px 10px 15px forestgreen); /* эффект тени изображения */

нет тени — по умолчанию

drop-shadow(-40px -100px 10px rgb(255, 36, 0))

drop-shadow(20px 10px 15px forestgreen)

Эффект замены цветов изображения в зависимости от заданного угла — функция hue-rotate()

img {
-webkit-filter:hue-rotate(45deg); /* для расширенной поддержки свойства */
filter:hue-rotate(45deg); /* эффект замены цветов изображения */

hue-rotate(45deg)

hue-rotate(190deg)

Эффект градации серого цвета — функция grayscale()(черно-белое изображение на CSS)

img {
-webkit-filter:grayscale(100%); /* для расширенной поддержки свойства */
filter:grayscale(100%); /* эффект градации серого цвета */

grayscale(50%)

grayscale(100%)

Эффект инвертирования цвета изображения — функция invert()

img {
-webkit-filter:invert(100%); /* для расширенной поддержки свойства */
filter:invert(100%); /* эффект инвертирования цвета изображения */

invert(55%)

invert(100%)

Эффект установки прозрачности изображения — функция opacity()

img {
-webkit-filter:opacity(50%); /* для расширенной поддержки свойства */
filter:opacity(50%); /* эффект прозрачности изображения */

opacity(50%)

opacity(20%)

Эффект установки насыщенности изображения — функция saturate()

img {
-webkit-filter:saturate(200%); /* для расширенной поддержки свойства */
filter:saturate(200%); /* эффект насыщенности изображения */

saturate(200%)

saturate(50%)

Конвертирование изображение в сепию — функция sepia()

img {
-webkit-filter:sepia(100%); /* для расширенной поддержки свойства */
filter:sepia(100%); /* конвертирование изображение в сепию
(вид графической техники, использующий оттенки коричневого цвета) */

sepia(50%)

sepia(100%)

Размещение SVG фильтра в теле страницы — функция url()

<!DOCTYPE html>
<html>
<head>
<title>Пример</title>
<style> 
img {
display: inline-block; /* устанавливаем, что изображения будут блочно-строчные (выстраиваются вертикально - в линейку) */
width: 25%; /* устанавливаем ширину изображений */
margin: 5% 2%; /* устанавливаем внешние отступы для изображений (верх/низ право/лево) */
}
test1 {
-webkit-filter:url(#brightness); /* для расширенной поддержки свойства */
filter:url(#brightness); /* ссылаемся на SVG фильтр, размещенный в теле страницы (эффект увеличения яркости изображения - 2(200%) */
}
test2 {
-webkit-filter:url(#saturate); /* для расширенной поддержки свойства */
filter:url(#saturate); /* ссылаемся на SVG фильтр, размещенный в теле страницы (эффект установки насыщенности изображения - 2(200%) */
}
</style>
</head>
	<body>
		<img  src = "/images/kot_shock.jpeg" alt = "kot_shock">
		<img  src = "/images/kot_shock.jpeg" alt = "kot_shock" class = "test1">
		<img  src = "/images/kot_shock.jpeg" alt = "kot_shock" class = "test2">
		<svg xmlns = "http://www.w3.org/2000/svg" height = "0px"  width = "0px">
			<filter id = "brightness"> /* SVG фильтр (эффект увеличения яркости изображения - 2(200%) */
				<feComponentTransfer>
					<feFuncR type = "linear" slope = "2"/>
					<feFuncG type = "linear" slope = "2"/>
					<feFuncB type = "linear" slope = "2"/>
				</feComponentTransfer>
			</filter>
			<filter id = "saturate"> /* SVG фильтр (эффект установки насыщенности изображения - 2(200%) */
				<feColorMatrix type = "saturate" values = "2"/>
			</filter>
		</svg>
	</body>
</html>

Изображение
по умолчанию

filter:url(#brightness);
brightness(200%)

filter:url(#saturate);
saturate(200%)

CSS свойства

Примеры CSS фильтров (CSS Filters) для работы с изображениями

Примеры CSS фильтров (CSS Filters)

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

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

normal

grayscale(50%)

saturate(360%)

sepia(100%)

invert(100%)

opacity(50%)

brightness(120%)

contrast(160%)

hue-rotate(160deg)

blur(2px)

Примеры пользовательских CSS фильтров:

grayscale(значение)
Конвертирует цвета изображения (img) в черно-белые. Значение может задаваться как в процентах от 0% до 100%, так и в десятичных дробях от 0 до 1.

saturate(значение)
Задает насыщенностью цвета. Значение может быть как в процентах от 0% до 100%, и в десятичных дробях от 0 до 1.

sepia(значение)
Делает эффект сепии. Значение задается как в процентах от 0% до 100%, и в десятичных дробях от 0 до 1.

invert(значение)
Инвертирует цвета изображения. Значение задается как в процентах от 0% до 100%, и в десятичных дробях от 0 до 1.

opacity(значение)
Устанавливает прозрачность элемента. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1). Данный фильтр похож на CSS свойство opacity. Различие только в том, что фильтр поддерживает аппаратное ускорение, а свойство opacity — нет. Таким образом применение фильтра дает лучшую производительность при выводе объекта.

brightness(значение)
Смена яркости изображения. Значение задается как в процентах от 0% до 100%, и в десятичных дробях от 0 до 1.

contrast(значение)
Смена контрастности изображения. Значение задается как в процентах от 0% до 100%, и в десятичных дробях от 0 до 1.

hue-rotate(угол)
Смена цвета изображения в зависимости от заданного угла. Угол поворота определяет как изменится цвет в цветовом круге от красного до фиолетового. Значение в градусах (0deg — 360deg).

blur(радиус)
Эффект размытости изображения. Значение задается в пикселях px.

drop-shadow(x, y, радиус, цвет)
Формирует тень аналогично CSS свойству box-shadow, но только фильтр имеет поддержку аппаратного ускорения как и случае с opacity.

url(ссылка на SVG фильтр)
Создание собственных фильтров с помощью SVG элемента filter. Каждый фильтр имеет свой идентификатор — id.

custom (coming soon)
Возможность создавать свои собственные фильтры на CSS Shaders, но пока данная опция доступна не на всех браузерах.

Помогла ли вам статья?

349
раз уже помогла

Комментарии: (0)

Написать комментарий

Фильтр

— CSS: каскадные таблицы стилей

blur ()

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

  <таблица>
  
    
       Исходное изображение 
       Живой пример 
       эквивалент SVG 
       Статический пример 
    
  
  
    
        
        
      
        

          
        
      
        
    
  
  

  html {
  высота: 100%;
}
тело {
  шрифт: 14px / 1.286 «Lucida Grande», «Lucida Sans Unicode», «DejaVu Sans», Lucida, Arial, Helvetica, без засечек;
  цвет: rgb (51, 51, 51);
  высота: 100%;
  переполнение: скрыто;
}
# img2 {
  ширина: 100%;
  высота: авто;
  -webkit-filter: размытие (5 пикселей);
  -ms-filter: размытие (5 пикселей);
  фильтр: размытие (5 пикселей); }
table.standard-table {
  граница: 1px сплошной rgb (187, 187, 187);
  граница-коллапс: коллапс;
  граница-интервал: 0;
  маржа: 0 0 1.286em;
  высота: 100%;
  ширина: 85%;
}
table.standard-table th {
  граница: 1px сплошной rgb (187, 187, 187);
  отступ: 0px 5px;
  фон: нет повтора прокрутки 0% 0% rgb (238, 238, 238);
  выравнивание текста: слева;
  font-weight: жирный;
}
table.standard-table td {
  отступ: 5 пикселей;
  граница: 1px сплошной RGB (204, 204, 204);
  выравнивание текста: слева;
  вертикальное выравнивание: сверху;
  ширина: 25%;
  высота: авто;
}
# img3 {
  высота: 100%;
}
  

яркость ()

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

  <таблица>
  
    
       Исходное изображение 
       Живой пример 
       эквивалент SVG 
       Статический пример 
    
  
  
    
        
        
       
 
 
        
    
  

  

  html {
  высота: 100%;
}
тело {
  шрифт: 14px / 1.286 «Lucida Grande», «Lucida Sans Unicode», «DejaVu Sans», Lucida, Arial, Helvetica, без засечек;
  цвет: rgb (51, 51, 51);
  высота: 100%;
  переполнение: скрыто;
}
# img2 {
  ширина: 100%;
  высота: авто;
  -moz-фильтр: яркость (2);
  -webkit-filter: яркость (2);
  -ms-filter: яркость (2);
  фильтр: яркость (2); }
table.standard-table {
  граница: 1px сплошной rgb (187, 187, 187);
  граница-коллапс: коллапс;
  интервал границы: 0 пикселей;
  маржа: 0px 0px 1.286em;
  высота: 100%;
  ширина: 85%;
}
table.standard-table th {
  граница: 1px сплошной rgb (187, 187, 187);
  отступ: 0px 5px;
  фон: нет повтора прокрутки 0% 0% rgb (238, 238, 238);
  выравнивание текста: слева;
  font-weight: жирный;
}
table.standard-table td {
  отступ: 5 пикселей;
  граница: 1px сплошной RGB (204, 204, 204);
  выравнивание текста: слева;
  вертикальное выравнивание: сверху;
  ширина: 25%;
  высота: авто;
}
# img3 {
  высота: 100%;
}
  

контраст ()

Функция контраст () регулирует контраст входного изображения.При значении 0% изображение будет полностью серым. Значение 100% оставляет вход без изменений. Допускаются значения суммы свыше 100% , что обеспечивает более контрастные результаты. Значение лакуны для интерполяции составляет 1 .

  <таблица>
  
    
       Исходное изображение 
       Живой пример 
       эквивалент SVG 
       Статический пример 
    
  
  
    
        
        
       
 
 
        
    
  

  

  html {
  высота: 100%;
}
тело {
  шрифт: 14px / 1.286 «Lucida Grande», «Lucida Sans Unicode», «DejaVu Sans», Lucida, Arial, Helvetica, без засечек;
  цвет: rgb (51, 51, 51);
  высота: 100%;
  переполнение: скрыто;
}
# img2 {
  ширина: 100%;
  высота: авто;
  -moz-фильтр: контраст (200%);
  -webkit-filter: контраст (200%);
  -ms-filter: контраст (200%);
  фильтр: контраст (200%); }
Таблица.standard-table {
  граница: 1px сплошной rgb (187, 187, 187);
  граница-коллапс: коллапс;
  интервал границы: 0 пикселей;
  маржа: 0px 0px 1.286em;
  ширина: 85%;
  высота: 100%;
}
table.standard-table th {
  граница: 1px сплошной rgb (187, 187, 187);
  отступ: 0px 5px;
  фон: нет повтора прокрутки 0% 0% rgb (238, 238, 238);
  выравнивание текста: слева;
  font-weight: жирный;
}
table.standard-table td {
  отступ: 5 пикселей;
  граница: 1px сплошной RGB (204, 204, 204);
  выравнивание текста: слева;
  вертикальное выравнивание: сверху;
  ширина: 25%;
  высота: авто;
}
# img3 {
  высота: 100%;
}
  

падающая тень ()

Функция drop-shadow () применяет эффект тени к входному изображению.Тень — это, по сути, размытая, смещенная версия альфа-маски входного изображения, нарисованная определенным цветом и скомпонованная под изображением. Функция принимает параметр типа (определенный в CSS3 Backgrounds), за исключением того, что ключевое слово inset и параметр spread недопустимы. Эта функция похожа на более устоявшееся свойство box-shadow ; разница в том, что с фильтрами некоторые браузеры обеспечивают аппаратное ускорение для повышения производительности.Параметры параметра <тень> следующие:

(обязательно)

Это два значения для установки смещения тени. определяет горизонтальное расстояние. Отрицательные значения помещают тень слева от элемента. определяет расстояние по вертикали. Отрицательные значения помещают тень над элементом.См. <длина> для получения информации о возможных единицах.
Если оба значения равны 0 , тень помещается за элементом (и может создавать эффект размытия, если установлено и / или ).

<радиус размытия> (опционально)

Это третье значение <длина> . Чем больше это значение, тем больше размытие, поэтому тень становится больше и светлее. Отрицательные значения не допускаются.Если не указано, это будет 0 (край тени резкий).

<цвет> (опционально)

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

  фильтр: падающая тень (16px 16px 10px черный)  

  <таблица>
  
    
       Исходное изображение 
       Живой пример 
       эквивалент SVG 
       Статический пример 
    
  
  
    
        
        
      
        

          
        
      
        
    
    
        
        
      
        

          
        
      
        
    
  

  

  html {
  высота: 100%;
}
тело {
  шрифт: 14px / 1.286 «Lucida Grande», «Lucida Sans Unicode», «DejaVu Sans», Lucida, Arial, Helvetica, без засечек;
  цвет: rgb (51, 51, 51);
  высота: 100%;
  переполнение: скрыто;
}
# img2 {
  ширина: 100%;
  высота: авто;
  -moz-filter: drop-shadow (16px 16px 10px черный);
  -webkit-filter: drop-shadow (16 пикселей, 16 пикселей, 10 пикселей, черный);
  -ms-filter: drop-shadow (16px 16px 10px черный);
  фильтр: drop-shadow (16px 16px 10px черный);
}
# img12 {
  ширина: 100%;
  высота: авто;
  -moz-filter: drop-shadow (8px 9px 5px rgba (0,0,0 ,.8));
  -webkit-filter: drop-shadow (8 пикселей 9 пикселей 5 пикселей rgba (0,0,0, .8));
  -ms-filter: drop-shadow (8px 9px 5px rgba (0,0,0, .8));
  фильтр: drop-shadow (8px 9px 5px rgba (0,0,0, .8));
}
table.standard-table {
  граница: 1px сплошной rgb (187, 187, 187);
  граница-коллапс: коллапс;
  интервал границы: 0 пикселей;
  маржа: 0px 0px 1.286em;
  ширина: 85%;
  высота: 100%;
}
# irregular-shape {
  ширина: 64%;
}
table.standard-table th {
  граница: 1px сплошной rgb (187, 187, 187);
  отступ: 0px 5px;
  фон: нет повтора прокрутки 0% 0% rgb (238, 238, 238);
  выравнивание текста: слева;
  font-weight: жирный;
}
Таблица.standard-table td {
  отступ: 5 пикселей;
  граница: 1px сплошной RGB (204, 204, 204);
  выравнивание текста: слева;
  вертикальное выравнивание: сверху;
  ширина: 25%;
  высота: авто;
}
# img3, # img13 {
  ширина: 100%;
  высота: авто;
}
  

оттенки серого ()

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

  <таблица>
  
    
       Исходное изображение 
       Живой пример 
       эквивалент SVG 
       Статический пример 
    
  
  
    
        
        
       
 
 
        
    
  

  

  html {
  высота: 100%;
}
тело {
  шрифт: 14px / 1.286 «Lucida Grande», «Lucida Sans Unicode», «DejaVu Sans», Lucida, Arial, Helvetica, без засечек;
  цвет: rgb (51, 51, 51);
  высота: 100%;
  переполнение: скрыто;
}
# img2 {
  ширина: 100%;
  высота: авто;
  -moz-фильтр: оттенки серого (100%);
  -webkit-filter: оттенки серого (100%);
  -ms-filter: оттенки серого (100%);
  фильтр: оттенки серого (100%); }
Таблица.standard-table {
  граница: 1px сплошной rgb (187, 187, 187);
  граница-коллапс: коллапс;
  интервал границы: 0 пикселей;
  маржа: 0px 0px 1.286em;
  ширина: 85%;
  высота: 100%;
}
table.standard-table th {
  граница: 1px сплошной rgb (187, 187, 187);
  отступ: 0px 5px;
  фон: нет повтора прокрутки 0% 0% rgb (238, 238, 238);
  выравнивание текста: слева;
  font-weight: жирный;
}
table.standard-table td {
  отступ: 5 пикселей;
  граница: 1px сплошной RGB (204, 204, 204);
  выравнивание текста: слева;
  вертикальное выравнивание: сверху;
  ширина: 25%;
  высота: авто;
}
# img3 {
  высота: 100%;
}
  

поворот оттенка ()

Функция hue-rotate () применяет поворот оттенка к входному изображению.Значение angle определяет количество градусов вокруг цветового круга, на которое будут корректироваться входные образцы. Значение 0deg оставляет вход без изменений. Значение лакуны для интерполяции составляет 0 . Хотя максимального значения нет; эффект значений выше 360deg повторяется.

  фильтр: поворот оттенка (90 градусов)  

  <таблица>
  
    
       Исходное изображение 
       Живой пример 
       эквивалент SVG 
       Статический пример 
    
  
  
    
        
        
       
 
 
        
    
  

  

  html {
  высота: 100%;
}
тело {
  шрифт: 14px / 1.286 «Lucida Grande», «Lucida Sans Unicode», «DejaVu Sans», Lucida, Arial, Helvetica, без засечек;
  цвет: rgb (51, 51, 51);
  высота: 100%;
  переполнение: скрыто;
}
# img2 {
  ширина: 100%;
  высота: авто;
  -moz-filter: поворот оттенка (90 градусов);
  -webkit-filter: поворот оттенка (90 градусов);
  -ms-filter: hue-rotate (90 градусов);
  фильтр: изменение оттенка (90 градусов); }
table.standard-table {
  граница: 1px сплошной rgb (187, 187, 187);
  граница-коллапс: коллапс;
  интервал границы: 0 пикселей;
  маржа: 0px 0px 1.286em;
  ширина: 85%;
  высота: 100%;
}
Таблица.standard-table th {
  граница: 1px сплошной rgb (187, 187, 187);
  отступ: 0px 5px;
  фон: нет повтора прокрутки 0% 0% rgb (238, 238, 238);
  выравнивание текста: слева;
  font-weight: жирный;
}
table.standard-table td {
  отступ: 5 пикселей;
  граница: 1px сплошной RGB (204, 204, 204);
  выравнивание текста: слева;
  вертикальное выравнивание: сверху;
  ширина: 25%;
  высота: авто;
}
# img3 {
  высота: 100%;
}
  

инвертировать ()

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

  <таблица>
  
    
       Исходное изображение 
       Живой пример 
       эквивалент SVG 
       Статический пример 
    
  
  
    
        
        
       
 
 
        
    
  

  

  html {
  высота: 100%;
}
тело {
  шрифт: 14px / 1.286 «Lucida Grande», «Lucida Sans Unicode», «DejaVu Sans», Lucida, Arial, Helvetica, без засечек;
  цвет: rgb (51, 51, 51);
  высота: 100%;
  переполнение: скрыто;
}
# img2 {
  ширина: 100%;
  высота: авто;
  -moz-filter: инвертировать (100%);
  -webkit-filter: инвертировать (100%);
  -ms-filter: инвертировать (100%);
  фильтр: инвертировать (100%); }
Таблица.standard-table {
  граница: 1px сплошной rgb (187, 187, 187);
  граница-коллапс: коллапс;
  интервал границы: 0 пикселей;
  маржа: 0px 0px 1.286em;
  ширина: 85%;
  высота: 100%;
}
table.standard-table th {
  граница: 1px сплошной rgb (187, 187, 187);
  отступ: 0px 5px;
  фон: нет повтора прокрутки 0% 0% rgb (238, 238, 238);
  выравнивание текста: слева;
  font-weight: жирный;
}
table.standard-table td {
  отступ: 5 пикселей;
  граница: 1px сплошной RGB (204, 204, 204);
  выравнивание текста: слева;
  вертикальное выравнивание: сверху;
  ширина: 25%;
  высота: авто;
}
# img3 {
  высота: 100%;
}
  

непрозрачность ()

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

  <таблица>
  
    
       Исходное изображение 
       Живой пример 
       эквивалент SVG 
       Статический пример 
    
  
  
    
        
        
       
 
 
        
    
  

  

  html {
  высота: 100%;
}
тело {
  шрифт: 14px / 1.286 «Lucida Grande», «Lucida Sans Unicode», «DejaVu Sans», Lucida, Arial, Helvetica, без засечек;
  цвет: rgb (51, 51, 51);
  высота: 100%;
  переполнение: скрыто;
}
# img2 {
  ширина: 100%;
  высота: авто;
  -moz-filter: непрозрачность (50%);
  -webkit-filter: непрозрачность (50%);
  -ms-filter: непрозрачность (50%);
  фильтр: непрозрачность (50%); }
table.standard-table {
  граница: 1px сплошной rgb (187, 187, 187);
  граница-коллапс: коллапс;
  интервал границы: 0 пикселей;
  маржа: 0px 0px 1.286em;
  ширина: 85%;
  высота: 100%;
}
table.standard-table th {
  граница: 1px сплошной rgb (187, 187, 187);
  отступ: 0px 5px;
  фон: нет повтора прокрутки 0% 0% rgb (238, 238, 238);
  выравнивание текста: слева;
  font-weight: жирный;
}
Таблица.standard-table td {
  отступ: 5 пикселей;
  граница: 1px сплошной RGB (204, 204, 204);
  выравнивание текста: слева;
  вертикальное выравнивание: сверху;
  ширина: 25%;
  высота: авто;
}
# img3 {
  высота: 100%;
}
  

насыщенный ()

Функция saturate () насыщает входное изображение. Значение , сумма определяет долю конверсии. Значение 0% полностью ненасыщено. Значение 100% оставляет вход без изменений. Остальные значения являются линейными множителями эффекта.Допускаются значения суммы свыше 100% , обеспечивающие сверхнасыщенные результаты. Значение лакуны для интерполяции составляет 1 .

  <таблица>
  
    
       Исходное изображение 
       Живой пример 
       эквивалент SVG 
       Статический пример 
    
  
  
    
        
        
       
 
 
        
    
  

  

  html {
  высота: 100%;
}
тело {
  шрифт: 14px / 1.286 «Lucida Grande», «Lucida Sans Unicode», «DejaVu Sans», Lucida, Arial, Helvetica, без засечек;
  цвет: rgb (51, 51, 51);
  высота: 100%;
  переполнение: скрыто;
}
# img2 {
  ширина: 100%;
  высота: авто;
  -moz-фильтр: насыщенный (200%);
  -webkit-filter: насыщать (200%);
  -ms-filter: насыщенный (200%);
  фильтр: насыщенный (200%); }
table.standard-table {
  граница: 1px сплошной rgb (187, 187, 187);
  граница-коллапс: коллапс;
  интервал границы: 0 пикселей;
  маржа: 0px 0px 1.286em;
  ширина: 85%;
  высота: 100%;
}
table.standard-table th {
  граница: 1px сплошной rgb (187, 187, 187);
  отступ: 0px 5px;
  фон: нет повтора прокрутки 0% 0% rgb (238, 238, 238);
  выравнивание текста: слева;
  font-weight: жирный;
}
Таблица.standard-table td {
  отступ: 5 пикселей;
  граница: 1px сплошной RGB (204, 204, 204);
  выравнивание текста: слева;
  вертикальное выравнивание: сверху;
  ширина: 25%;
  высота: авто;
}
# img3 {
  высота: 100%;
}
  

сепия ()

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

  <таблица>
  
    
       Исходное изображение 
       Живой пример 
       эквивалент SVG 
       Статический пример 
    
  
  
    
        
        
       
 
 
        
    
  

  

  html {
  высота: 100%;
}
тело {
  шрифт: 14px / 1.286 «Lucida Grande», «Lucida Sans Unicode», «DejaVu Sans», Lucida, Arial, Helvetica, без засечек;
  цвет: rgb (51, 51, 51);
  высота: 100%;
  переполнение: скрыто;
}
# img2 {
  ширина: 100%;
  высота: авто;
  -моз-фильтр: сепия (100%);
  -webkit-filter: сепия (100%);
  -ms-фильтр: сепия (100%);
  фильтр: сепия (100%); }
table.standard-table {
  граница: 1px сплошной rgb (187, 187, 187);
  граница-коллапс: коллапс;
  интервал границы: 0 пикселей;
  маржа: 0px 0px 1.286em;
  ширина: 85%;
  высота: 100%;
}
table.standard-table th {
  граница: 1px сплошной rgb (187, 187, 187);
  отступ: 0px 5px;
  фон: нет повтора прокрутки 0% 0% rgb (238, 238, 238);
  выравнивание текста: слева;
  font-weight: жирный;
}
table.standard-table td {
  отступ: 5 пикселей;
  граница: 1px сплошной RGB (204, 204, 204);
  выравнивание текста: слева;
  вертикальное выравнивание: сверху;
  ширина: 25%;
  высота: авто;
}
# img3 {
  высота: 100%;
}
  

CSS {в реальной жизни}

Эта статья была обновлена ​​13 августа 2020 г. и включает дополнительные справочные материалы.

Если вы знакомы с CSS, вы, вероятно, знаете все о свойстве box-shadow . Но знаете ли вы, что есть фильтр CSS drop-shadow , который делает нечто подобное? Как и box-shadow , мы можем передавать значения для x-offset, y-offset, радиуса размытия и цвета:

  .my-element {
 filter: drop-shadow (0 0,2 rem 0,25 rem rgba (0, 0, 0, 0,2)); 
}  

В отличие от box-shadow , он не принимает параметр spread (подробнее об этом позже).

Чем полезна отбрасываемая тень?

Если у нас есть box-shadow , зачем нам вообще drop-shadow ?

Профили непрямоугольной формы

Использование drop-shadow позволяет нам добавить тень к элементу, которая не соответствует его ограничивающему прямоугольнику, но вместо этого использует альфа-маску элемента. Например, мы могли бы добавить тень к прозрачному логотипу PNG или SVG.

  img {
 фильтр: падающая тень (0,35 rem 0,35 rem 0,4 rem rgba (0, 0, 0, 0.5)); 
}  

Мы можем сравнить эффект box-shadow и drop-shadow :

Использование box-shadow дает нам прямоугольную тень, даже если элемент не имеет фона, а drop-shadow создает тень от непрозрачных частей изображения.

Демо

Это будет работать независимо от того, является ли изображение встроенным в HTML (либо как встроенный SVG, либо в теге ) или как фоновое изображение CSS.Это означает, что мы также можем добавить тень к градиентному фону. Эти формы создаются с фоновыми градиентами с примененным фильтром drop-shadow :

Фиксированные элементы

Если мы обрезаем или маскируем элемент с помощью clip-path или mask-image , любой добавляемый box-shadow также будет обрезан — поэтому он будет невидимым, если он находится за пределами обрезанной области.

Но мы можем создать тень на обрезанном элементе, применив фильтр drop-shadow к родительскому элементу.Довольно круто!

  .parent-element {
 filter: drop-shadow (0,35rem 0,35rem 0,4rem rgba (0, 0, 0, 0,5)); 
} 
 .clipped-element {
 clip-path: polygon (0 0, 50% 0, 100% 50%, 50% 100%, 0100%,, 50% 50%)) 
} 
  

Фильтр падающей тени применяется к родительскому элементу обрезанной фигуры.

Посмотреть демонстрацию

Сгруппированные элементы

Иногда мне приходилось создавать компоненты, состоящие из перекрывающихся элементов, которые сами должны отбрасывать тень.

Если мы добавим box-shadow ко всему компоненту, у нас останутся странные пустые места:

Box-shadow, примененный к компоненту

. Если мы добавим box-shadow к каждому элементу по отдельности, то каждый будет отбрасывать свою собственную тень, что может оказаться нежелательным эффектом. Чтобы скрыть тени в местах наложения элементов, нам нужно использовать хитроумный CSS.

Box-shadow применяется к столбцам

Но, используя drop-shadow для всего компонента, мы получаем тень именно там, где мы хотим, не прибегая к хакам:

Тень, примененная к компоненту

См. Демонстрацию

Множественные тени

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

(Боковое примечание: переход и анимация фильтров CSS не особенно эффективны, и, вероятно, лучше избегать одновременной анимации такого количества фильтров в реальных проектах. Это просто для развлечения!)

Ограничения

Как упоминалось выше, drop-shadow не включает параметр spread . Это означает, что в настоящее время мы не можем использовать его для создания эффекта контура, что, я думаю, было бы действительно полезно. Например, если бы он поддерживался, мы могли бы использовать drop-shadow для создания контура на градиентном фоне, как мы можем с box-shadow на других элементах.

Попадания

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

Если вы хотите продолжить чтение, Ана Тюдор указала мне на эту статью о том, как рассчитывается радиус размытия.

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

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

 .мой-элемент> * {
 box-shadow: 0 0,2 rem 0,25 rem rgba (0, 0, 0, 0,2); 
} 
 @supports (filter: drop-shadow (0 0,2rem 0,25rem rgba (0, 0, 0, 0,2))) {
 .my-element {
 filter: drop-shadow (0 0,2rem 0,25rem rgba ( 0, 0, 0, 0,2)); 
} 
 
 .my-element> * {
 box-shadow: none; 
} 
} 
  

Заключение

Несмотря на отличную поддержку, фильтр drop-shadow используется крайне редко. Я надеюсь, что в этой статье освещены некоторые случаи, когда вы могли бы сэкономить на использовании box-shadow — возможно, вы могли бы использовать его в своем следующем проекте!

HTML фильтр стиля DOM Свойство

❮ Объект стиля

Пример

Изменение цвета изображения на черно-белый (100% оттенков серого):

документ.getElementById («myImg»). style.filter = «оттенки серого (100%)»;

Попробуйте сами »

Определение и использование

Свойство фильтра добавляет к изображениям визуальные эффекты (например, размытие и насыщенность).

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

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

Числа, за которыми следует Webkit, указывают первую версию, работавшую с префиксом.

Синтаксис

Вернуть свойство фильтра:

Установите свойство фильтра:

объект .style.filter = «нет | размытие () | яркость () | контраст () | тень () | оттенки серого () | оттенок-поворот () | инвертировать () | непрозрачность () | насыщенность () | сепия () »

Функции фильтра

Примечание: Фильтры, использующие процентные значения (т.е. 75%), также примите значение как
десятичный (например, 0,75).

Технические характеристики

связанные страницы

Ссылка CSS: свойство фильтра

❮ Объект стиля

Разбор CSS Box Shadow и Drop Shadow

Падающие тени. Веб-дизайнеры любили их в течение долгого времени до такой степени, что мы использовали их для подделки изображений PNG до того, как CSS Level 3 официально представил их в спецификации как свойство box-shadow . Я все еще часто использую тени в своей работе, потому что они добавляют красивую текстуру в некоторых контекстах, например, при работе с в основном плоскими дизайнами.

Вскоре после того, как был представлен box-shadow , появился рабочий проект CSS-фильтров, а вместе с ним и метод drop-shadow () , который на первый взгляд очень похож на box-shadow . Однако они разные, и их стоит сравнить.

Для меня основная разница обнаружилась рано, когда я начал работать с box-shadow . Вот простой треугольник, мало чем отличающийся от того, который я нарисовал тогда.

См. Вставку Pen CSS Caret от CSS-Tricks (@ css-tricks) на CodePen.

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

Box Shadow

Добавьте box-shadow на этого плохого парня, и это произойдет.

См. Pen CSS Caret Box Shadow от CSS-Tricks (@ css-tricks) на CodePen.

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

Падающая тень CSS-фильтра

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

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

См. Pen CSS Caret Drop Shadow от CSS-Tricks (@ css-tricks) на CodePen.

Выбор метода

Ответ полностью зависит от вас. В простом примере треугольника выше может показаться, что фильтр filter: drop-shadow () лучше, но это не справедливое сравнение преимуществ или даже возможностей обоих методов. Это просто иллюстрация их различного поведения в определенном контексте.

Как и большинство других вещей в разработке, ответ зависит от того, какой метод использовать.Вот параллельное сравнение, которое поможет различить их и когда лучше выбрать одно из них.

Завершение

Разница между box-shadow и filter: drop-shadow () действительно сводится к блочной модели CSS. Один видит это, а другой игнорирует. Есть и другие различия, которые различают эти два с точки зрения поддержки браузера, производительности и т. Д., Но то, как они работают с коробочной моделью, является ключевым различием.

Обновление: Амелия выявила еще одно ключевое отличие в комментариях, где разброс радиуса для drop-shadow () рассчитывается иначе, чем для box-shadow и даже для text-shadow .Это означает, что радиус распространения, который вы можете указать в box-shadow , не является взаимно однозначным со значением распространения по умолчанию для drop-shadow , поэтому в некоторых случаях они не являются равноценными заменами друг друга.

Давайте завершим это несколькими другими замечательными примерами, иллюстрирующими это. У Леннарта Шурса также есть хорошая статья с практическими примерами, использующими всплывающие подсказки и значки, которые мы ранее вызывали.

См. Pen Drop-shadow и box-shadow (2) от Kseso (@Kseso) на CodePen.

См. Pen box-shadow и drop-shadow от qnlz (@qnlz) на CodePen.

См. Pen Drop-shadow и box-shadow (3) в формате png от Kseso (@Kseso) на CodePen.

Css, пример drop-shadow () () | Newbedev

Функция CSS drop-shadow () применяет эффект тени к входному изображению. Результатом будет .

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

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

Синтаксис

 drop-shadow (offset-x offset-y blur-radius color) 

Функция drop-shadow () принимает параметр типа (определенный в свойстве box-shadow ) с исключение: параметры inset keyword и spread не допускаются.

Параметры

смещение-x смещение-y (обязательно)

Два значения , которые определяют смещение тени. offset-x указывает расстояние по горизонтали, при котором отрицательные значения помещают тень слева от элемента. offset-y указывает расстояние по вертикали, при котором отрицательные значения помещают тень над элементом.Если оба значения равны 0 , тень помещается непосредственно за элементом.

радиус размытия (опционально)

Радиус размытия тени, заданный как . Чем больше значение, тем больше и более размытой становится тень. Если не указано, по умолчанию используется значение 0 , что приводит к резкому, не размытому краю. Отрицательные значения не допускаются.

цвет (опционально)

Цвет тени, заданный как .Если не указано, используется значение свойства color .

Примеры

Установка тени с использованием смещения пикселей и радиуса размытия

drop-shadow (16px 16px 10px черный)
 

Установка тени с использованием смещения rem и радиуса размытия

падающая тень (.5rem .5rem 1rem # e23) 

Характеристики

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

См. Также

Это хорошая идея использовать CSS drop-shadow вместо box-shadow?

TL; DR:

Если вы можете достичь желаемых результатов и поддержка не является проблемой.. да, drop-shadow — хороший выбор.

Удлиненная версия

Если вы можете достичь желаемых результатов и если поддержка не является проблемой, тогда… да, drop-shadow — хороший выбор.

Но для общей реализации, я бы сказал, все зависит.

Между обоими свойствами есть несколько различий: drop-shadow () заимствован из фильтров SVG и содержит некоторые (классные) вещи, которые раньше вы могли делать только с SVG, которые, в зависимости от ваших требований, могут быть полезны. а может и нет.

Вот некоторые отличия между

Соблюдение контуров : drop-shadow () учитывает контуры элемента и добавляет тень только к части со сплошными областями, а не ко всему блоку элемента.

Это означает, что вы сможете накладывать тени на такие вещи, как изображения png, и это повлияет только на фактическую часть изображения, а не на прозрачные области, что не относится к box-shadow.

Учет псевдоэлементов : в свойстве box-shadow такие псевдо-элементы, как : до и : после , не рассматриваются и не получают тени, это не относится к drop-shadow и любым псевдоэлементам. элементы в вашем элементе будут учитываться при наложении тени.

отсутствие радиуса разнесения :

Вот типичный синтаксис тени блока:

  box-shadow: смещение-x | смещение-у | радиус размытия | радиус распространения | цвет
  

, что в реализации переводится примерно так:

  тень коробки: 2px 2px 2px 1px rgba (0, 0, 0, 0.2);
  

обратите внимание на радиус распространения ? он определяет, насколько размытыми будут ваши тени.

Это та часть, где тень отстает.В текущей реализации нет поддержки распространения.

Производительность : С точки зрения производительности фильтр CSS имеет преимущество аппаратного ускорения, поэтому фильтр отбрасываемой тени всегда будет отрисовываться быстрее по сравнению с теневым блоком. Это означает, что ваша анимация всегда будет быстрой и плавной.

В заключение я бы сказал, что если вы можете достичь желаемых результатов с помощью drop-shadow, нет никаких возражений против этого.

Надеюсь, это поможет! 😊

фильтр тени тени — Programmer Sought

Введение

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

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

функция фильтра

1. размытие (px)

Установите размытие по Гауссу для изображения. Чем больше значение, тем более размытым оно будет.
По умолчанию 0, длина CSS может быть установлена, но процентное значение не принимается.

2.url ()

Принять файл XML. Файл устанавливает фильтр SVG и может включать точку привязки для указания конкретного фильтрующего элемента.
, например: filter: url (svg-url # element-id)

3. поворот оттенка (град.)

Примените поворот оттенка к изображению.
0deg: изображение остается без изменений. Если значение не установлено, значение по умолчанию — 0 градусов.
Хотя это значение не имеет максимального значения, значение, превышающее 360 градусов, эквивалентно другому кругу.

4. яркость (%)

Примените к изображению линейное умножение, чтобы оно выглядело светлее или темнее.
0%: изображение будет полностью черным; 100%: изображение не изменится.
также возможно, если значение превышает 100%, изображение будет ярче оригинала. Если заданного значения нет, по умолчанию используется 1.

5. контраст (%)

Отрегулируйте контрастность изображения.
0%: изображение будет полностью черным; 100%: изображение не изменится.
может превышать 100%, что означает, что будет использоваться более низкий контраст. Если значение не задано, используется значение по умолчанию 1.

6. насыщение (%)

Преобразование насыщенности изображения.
0%: полностью ненасыщенные; 100%: без изменения изображения.
Допускаются значения более 100%, имеется более высокая насыщенность. Если значение не задано, по умолчанию используется значение 1.

7. прозрачность (%)

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

.

8. оттенки серого (%)

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

9. сепия (%)

Преобразование изображения в сепию.
100%: полностью превратился в темно-коричневый; 0%: изображение остается без изменений.
Значение находится в диапазоне от 0% до 100%, что является линейным множителем эффекта. Если не установлен, значение по умолчанию — 0;

10. инверт (%)

Инвертировать входное изображение.
100%: полностью перевернутый; 0%: без изменения изображения.
между 0% и 100%, это линейный множитель эффекта. Если значение не задано, по умолчанию используется значение 0.

11. тень-капля ()

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

Применение: закругление границы отсутствующего угла + тень

  
 Неровная граница 
  

 .тень{
 цвет: #fff;
 размер шрифта: 24 пикселя;
 выравнивание текста: центр;
 ширина: 200 пикселей;
 высота: 200 пикселей;
 высота строки: 200 пикселей;
 задний план:
 радиальный градиент (круг вверху слева, прозрачные 25 пикселей, красный 0) вверху слева,
 радиальный градиент (круг вверху справа, прозрачные 25 пикселей, красный 0) вверху справа,
 радиальный градиент (круг внизу справа, прозрачные 25 пикселей, красный 0) внизу справа,
 радиальный градиент (круг внизу слева, прозрачные 25 пикселей, красный 0) внизу слева;
 размер фона: 50% 50%;
 фон-повтор: без повторения;
 фильтр: drop-shadow (0 0 12px rgba (0,0,0,0.