From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/blend-mode/index.html | 411 +++++++++++++++++++++++++++++++++ 1 file changed, 411 insertions(+) create mode 100644 files/ru/web/css/blend-mode/index.html (limited to 'files/ru/web/css/blend-mode') diff --git a/files/ru/web/css/blend-mode/index.html b/files/ru/web/css/blend-mode/index.html new file mode 100644 index 0000000000..382af5dae0 --- /dev/null +++ b/files/ru/web/css/blend-mode/index.html @@ -0,0 +1,411 @@ +--- +title: +slug: Web/CSS/blend-mode +translation_of: Web/CSS/blend-mode +--- +

{{CSSRef}}

+ +

Описание

+ +

The <blend-mode> type is a collection of keywords describing blend modes.

+ +

A blend mode is a method of calculating the final color value of a pixel when layers overlap. Each blend mode takes the color value of the foreground and the backdrop (top color and bottom color respectively), perfoms its calculation and returns a color value. The final, visible layer is the result of performing the blend mode calculation on every overlapping pixel among the blended layers.

+ +

Синтаксис

+ +
Формальный синтаксис: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
+ +

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

+ +
+
normal
+
+

The final color is the top color, whatever the bottom color may be.
+ The effect is similar to two opaque pieces of paper overlapping.

+ +
+ + + +
+ +

{{ EmbedLiveSample('normal', "300", "300") }}

+
+
multiply
+
+

The final color is the result of multiplying the top and bottom colors.
+ A black layer leads to a black final layer, and a white layer leads to no change.
+ The effect is similar to two images printed on transparent film overlapping.

+ +
+ + + +
+ +

{{ EmbedLiveSample('multiply', "300", "300") }}

+
+
screen
+
+

The final color is the result of inverting the colors, multiplying them and inverting that color value.
+ A black layer leads to no change, and a white layer leads to a white final layer.
+ The effect is similar to two images shone onto a projection screen.

+ +
+ + + +
+ +

{{ EmbedLiveSample('screen', "300", "300") }}

+
+
overlay
+
The final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.
+ This blend mode is equivalent to hard-light but with the layers swapped. +
+ + + +
+ +

{{ EmbedLiveSample('overlay', "300", "300") }}

+
+
darken
+
+

The final color is a color composed of the darkest values per color channel.

+ +
+ + + +
+ +

{{ EmbedLiveSample('darken', "300", "300") }}

+
+
lighten
+
+

The final color is a color composed of the lightest values per color channel.

+ +
+ + + +
+ +

{{ EmbedLiveSample('lighten', "300", "300") }}

+
+
color-dodge
+
+

The final color is the result of dividing the bottom color by the inverse of the top color.
+ A black foreground leads to no change. A foreground with the inverse color of the backdrop leads to a fully lit color.
+ This blend mode is similar to screen, but the foreground need only be as light as the inverse of the backdrop to reach a fully lit color.

+ +
+ + + +
+ +

{{ EmbedLiveSample('color-dodge', "300", "300") }}

+
+
color-burn
+
+

This final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value.
+ A white foreground leads to no change. A foreground with the inverse color of the backdrop leads to a black final image.
+ This blend mode is similar to multiply, but the foreground need only be as dark as the inverse of the backdrop to make the final image black.

+ +
+ + + +
+ +

{{ EmbedLiveSample('color-burn', "300", "300") }}

+
+
hard-light
+
+

The final color is the result of multiply if the top color is darker, or screen if the top color is lighter.
+ This blend mode is equivalent to overlay but with the layers swapped.
+ The effect is similar to shining a harsh spotlight on the backdrop.

+ +
+ + + +
+ +

{{ EmbedLiveSample('hard-light', "300", "300") }}

+
+
soft-light
+
+

The final color is similar to hard-light, but softer.
+ This blend mode behaves similar to hard-light.
+ The effect is similar to shining a diffused spotlight on the backdrop.

+ +
+ + + +
+ +

{{ EmbedLiveSample('soft-light', "300", "300") }}

+
+
difference
+
+

The final color is the result of subtracting the darker of the two colors from the lighter one.
+ A black layer has no effect, while a white layer inverts the other layer's color.

+ +
+ + + +
+ +

{{ EmbedLiveSample('difference', "300", "300") }}

+
+
exclusion
+
+

The final color is similar to difference, but with less contrast.
+ As with difference,  a black layer has no effect, while a white layer inverts the other layer's color.

+ +
+ + + +
+ +

{{ EmbedLiveSample('exclusion', "300", "300") }}

+
+
hue
+
+

The final color has the hue of the top color, while using the saturation and luminosity of the bottom color.

+ +
+ + + +
+ +

{{ EmbedLiveSample('hue', "300", "300") }}

+
+
saturation
+
+

The final color has the saturation of the top color, while using the hue and luminosity of the bottom color.
+ A pure gray backdrop, having no saturation, will have no effect.

+ +
+ + + +
+ +

{{ EmbedLiveSample('saturation', "300", "300") }}

+
+
color
+
+

The final color has the hue and saturation of the top color, while using the luminosity of the bottom color.
+ The effect preserves gray levels and can be used to colorize the foreground.

+ +
+ + + +
+ +

{{ EmbedLiveSample('color', "300", "300") }}

+
+
luminosity
+
+

The final color has the luminosity of the top color, while using the hue and saturation of the bottom color.
+ This blend mode is equivalent to color, but with the layers swapped.

+ +
+ + + +
+ +

{{ EmbedLiveSample('luminosity', "300", "300") }}

+
+
+ +

Интерполяция режимов наложения

+ +
 
+ +

Changes between blends mode are not interpolated. Any change occurs abruptly.

+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{ SpecName('Compositing', '#ltblendmodegt', '<blend-mode>') }}{{ Spec2('Compositing') }}Первоначальное определение
+ +

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

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка35{{compatVersionUnknown()}}{{compatUnknown()}}{{compatUnknown()}}{{compatUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка{{compatUnknown()}}{{compatUnknown()}}{{compatVersionUnknown()}}{{compatUnknown()}}{{compatUnknown()}}{{compatUnknown()}}
+
+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf