mix-blend (css przyciemnienie)
Data utworzenia: 2025-02-11 08:27:23
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: sans-serif;
background-color: #222;
color: beige;
font-size: 36px;
}
div {
font-weight: bold;
text-align: center;
display: inline-block;
line-height: 2;
padding-top: 10px;
}
.clean {
text-align: left;
display: block;
}
span {
display: block;
width: 600px;
height: 600px;
border: 1px solid white;
}
#image {
background-image: url(./papuga.jpg);
}
#tlo {
background: linear-gradient(
90deg,
rgba(255, 46, 0, 1) 0%,
rgba(255, 145, 0, 1) 35%,
rgba(236, 255, 0, 1) 100%
);
}
#normal,
#multiply,
#screen,
#overlay,
#darken,
#lighten,
#color-dodge,
#color-burn,
#hard-light,
#soft-light,
#difference,
#exclusion,
#hue,
#saturation,
#color,
#luminosity,
#sekwencja {
background-image: linear-gradient(
90deg,
rgba(255, 46, 0, 0.3) 0%,
rgba(255, 145, 0, 0.6) 35%,
rgba(236, 255, 0, 0.5) 100%
),
url(./papuga.jpg);
}
#normal {
mix-blend-mode: normal;
}
#multiply {
mix-blend-mode: multiply;
}
#screen {
mix-blend-mode: screen;
}
#overlay {
mix-blend-mode: overlay;
}
#darken {
mix-blend-mode: darken;
}
#lighten {
mix-blend-mode: lighten;
}
#color-dodge {
mix-blend-mode: color-dodge;
}
#color-burn {
mix-blend-mode: color-burn;
}
#hard-light {
mix-blend-mode: hard-light;
}
#soft-light {
mix-blend-mode: soft-light;
}
#difference {
mix-blend-mode: difference;
}
#exclusion {
mix-blend-mode: exclusion;
}
#hue {
mix-blend-mode: hue;
}
#saturation {
mix-blend-mode: saturation;
}
#color {
mix-blend-mode: color;
}
#luminosity {
mix-blend-mode: luminosity;
}
#sekwencja {
mix-blend-mode: sekwencja;
}
Powrót