Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

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

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

ЗначениеОписание
noneУказывает, что эффекты отсутствуют. Это значение по умолчанию.
blur(px)Применяет эффект размытия изображения. Чем больше указано значение, тем больше будет размытие. Если значение не задано, то используется значение 0.
brightness( % | 0+ ) Значение регулирует яркость изображения.
0% (0) — изображение полностью черное.
100% (1) — значение по умолчанию (исходное изображение).
Более 100%(1) — увеличивает яркость изображения.
contrast( % | 0+ ) Значение регулирует контрастность изображения.
0% (0) — изображение полностью серое.
100% (1) — значение по умолчанию (исходное изображение).
Более 100%(1) — увеличивает контрастность изображения.
drop-shadow(
h-shadow v-shadow blur-radius spread-radius color )
Значение определяет эффект тени изображения.
h-shadowОбязательное значение. Задаёт расположение горизонтальной тени. Допускается использование отрицательных значений, при этом тень будет слева от изображения.
v-shadowОбязательное значение. Задаёт расположение вертикальной тени. Допускается использование отрицательных значений, при этом тень будет над изображением.
blur-radiusНеобязательное значение. Задаёт радиус размытия в пикселях. Чем больше это значение, тем больше размытие, при этом тень становится больше и светлее. Если значение не задано, то значение будет равно 0 (резкие — отчетливые тени). Отрицательные значения не допускаются.
spread-radiusНеобязательное значение. Размер тени в пикселях (радиус растяжения тени). При положительных значениях тень будет расшииряться, а при отрицательных сжиматься. Если значение не задано, то значение будет равно 0 (тень соответствует размеру элемента).
colorНеобязательное значение. Определяет цвет тени (HEX, RGB, RGBA, HSL, HSLA, «Предопределённые цвета»). Значением по умолчанию является черный.
Данного эффекта можно достичь, используя контейнер со свойством, которое имеет более широкую поддержку браузерами — box-shadow(создание тени элемента).
Также свойством box-shadow можно создать мультитень, чего нельзя достичь фильтром в одном объявлении.
Основная разница заключается в том, что фильтры имеют аппаратное ускорение. Обращаю Ваше внимание, что четвертый параметр (spread-radius) может не поддерживаться некоторыми браузерами, а может и поддерживаться.
hue-rotate(deg) Производит замену цветов изображения в зависимости от заданного угла. Значение задается в градусах (0deg360deg). Угол поворота определяет количество градусов вокруг цветового круга (в зависимости от заданного угла цвет изображения меняется).
0deg — значение по умолчанию (исходное изображение). Максимальное значение 360deg.
grayscale( % | 0-1 ) Значение определяет эффект градации серого цвета. Отрицательные значения недопустимы.
0% (0) — значение по умолчанию (исходное изображение).
100% (1) — изображение полностью серое (используется для создания черно-белых изображений).
invert( % | 0-1 ) Значение инвертирует цвета изображения. Отрицательные значения недопустимы.
0% (0) — значение по умолчанию (исходное изображение).
100% (1) — изображение полностью инвертировано.
opacity( % | 0-1 ) Задает уровень прозрачности изображения. Отрицательные значения недопустимы.
0% (0) — изображение полностью прозрачно.
100% (1) — значение по умолчанию (исходное изображение).
Данного эффекта можно достичь, используя свойство, которое имеет более широкую поддержку браузерами — opacity(определяет уровень прозрачности для элемента).
Разница заключается в том, что фильтры имеют аппаратное ускорение.
saturate( % | 0+ ) Задает уровень насыщенности изображения. Отрицательные значения недопустимы.
0% (0) — не насыщенное изображение.
100% (1) — значение по умолчанию (исходное изображение).
Более 100%(1) — увеличивает насыщенность изображения.
sepia( % | 0-1 ) Конвертирует изображение в сепию (вид графической техники, использующий оттенки коричневого цвета). Отрицательные значения недопустимы.
0% (0) — значение по умолчанию (исходное изображение).
100% (1) — полностью конвертирует изображение в сепию.
url()Задает путь к XML файлу, который содержит SVG фильтр, либо фильтры, которые могут впоследствии использоваться как якорь (необходимо указывать определенный id для каждого фильтра). Допускается размещать SVG в теле документа.

Синтаксис при размещении SVG фильтра из XML документа:
filter: url(filters.xml#filter-id);
Синтаксис при размещении SVG фильтра в теле страницы:
filter: url(#filter-id);

initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия 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 свойства




© 2016-2021 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу [email protected]




Примеры 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 
       Статический пример 
    
  
  
    
        
        
       
<фильтр> <изображение xlink: href = "test_form_3.jpeg "filter =" url (#contrast) "/>
  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 
       Статический пример 
    
  
  
    
        
        
      
        
<изображение xlink: href = "test_form_4.jpeg" /> <используйте xlink: href = "# MyImage" />
test_form_4 искаженная граница - Исходное изображение test_form_4 искаженная граница - Живой пример
<изображение xlink: href = "test_form_4_irregular-shape_opacity-gradient.png "/> <используйте xlink: href = "# MyImage2" />
test_form_4 искаженная тень падающей границы - статический пример
  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 
       Статический пример 
    
  
  
    
        
        
       
<фильтр> <изображение xlink: href = "test_form_5.jpeg "filter =" url (#grayscale) "/>
  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 
       Статический пример 
    
  
  
    
        
        
       
<фильтр> <изображение xlink: href = "test_form_7.jpeg "filter =" url (#invert) "/>
  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, указывают первую версию, работавшую с префиксом.

Имущество
фильтр 53.0
18.0 Webkit
13,0 35,0 9,1
6,0 Webkit
40,0
15,0 Webkit


Синтаксис

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

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

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

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

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

Фильтр Описание
нет Не указывает никаких эффектов
размытие ( пикселей ) Применяет к изображению эффект размытия. Чем больше значение, тем больше размытость.

Если значение не указано, используется 0.

яркость (% ) Регулирует яркость изображения.

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

контраст (% ) Регулирует контрастность изображения.

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

падающая тень ( h-shadow v-shadow blur spread color ) Применяет к изображению эффект тени.

Возможные значения:
h-shadow — Обязательно. Задает значение в пикселях для горизонтальной тени. Отрицательные значения помещают тень слева от изображения.

v-shadow — Обязательно. Задает значение в пикселях для вертикальной тени. Отрицательные значения помещают тень над изображением.

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

разворот — Необязательно. Это четвертое значение, и оно должно быть в пикселях. Положительные значения заставят тень расширяться и увеличиваться в размерах, а отрицательные значения заставят тень сжиматься. Если не указано, будет 0 (тень будет того же размера, что и элемент).
Примечание. Chrome, Safari и Opera и, возможно, другие браузеры не поддерживают эту 4-ю длину; при добавлении он не будет отображаться.

цвет: Дополнительно. Добавляет цвет тени. Если не указан, цвет зависит от браузера (часто черный).
Совет: Этот фильтр похож на
box-shadow свойство.

оттенки серого (% ) Преобразует изображение в оттенки серого.

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

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

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

Примечание: Максимальное значение — 360 градусов.

инвертировать (% ) Инвертирует образцы в изображении.

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

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

непрозрачность (% ) Устанавливает уровень непрозрачности изображения. Уровень непрозрачности описывает уровень прозрачности, где:

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

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

насыщенный (% ) Насыщает изображение.

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

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

сепия (% ) Преобразует изображение в сепию.

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

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


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


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

Ссылка 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) 

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

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

Настольный мобильный
Хром Кромка Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox для Android Opera Android Safari на iOS Интернет Samsung
тень ()

53

18

В Chrome 18–19 функция saturate () принимает только целые числа вместо десятичных или процентных значений.В Chrome 20 эта ошибка исправлена.

12

12

35

49

В

Internet Explorer 4–9 реализовано нестандартное свойство filter . Синтаксис полностью отличался от этого и здесь не задокументирован.

40

15

9,1

6

53

4,4

53

35

49

41

14

9.3

6

6.0

svg

35

35

См. Также

Это хорошая идея использовать 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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *