/* == EFFECTS == */
/* BLEND Modes */
/* Multiply */
.blend-multiply {
mix-blend-mode: multiply;
}
/* Screen */
.blend-screen {
mix-blend-mode: screen;
}
/* DOUBLE EXPOSITION fx */
.double-xposure {
position: relative;
}
/* Using a pseudo-element */
.double-xposure::after {
position: absolute;
top: 0;
left: 0;
display: block;
content: "";
width: 100%;
height: 100%;
background:
/* foreground image */
url("double-xposure/bw-thinking-man.jpg"),
/* "background" image ! */
url("double-xposure/bg-snow-and-tree.jpg");
background-position: center, center;
background-repeat: no-repeat;
background-size: cover;
background-blend-mode: screen; /* css magic ! */
}
/* HALFTONE fx */
.halftone-mask {
position: relative;
}
.halftone-mask::before {
position: absolute;
top: 0;
left: 0;
display: block;
content: "";
width: 100%;
height: 100%;
background: transparent url("double-xposure/halftone-dotted-radial-pattern.jpg") center center no-repeat!important;
background-size: cover;
}
/* SINGLETONE, DUOTONE effect (cf https://codepen.io/SirExotic/pen/xzgbxW )*/
.singletone1,
.singletone2,
.singletone3,
.duotone1,
.duotone2 {
position: relative;
z-index: 5; /* Empirique */
}
.singletone1::before,
.singletone2::before,
.singletone3::before,
.duotone1::before,
.duotone1::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 7;
}
/* Effet 1 */
.singletone1::before,
.singletone3::before,
.duotone1::before {
background-color: rgb(240, 14, 46);
/* background-color: var(--color-2); */
mix-blend-mode: darken;
}
.singletone2::before,
.duotone1::after {
background-color: var(--color-1);
mix-blend-mode: lighten;
}
.singletone2::before {
mix-blend-mode: hard-light;
}
.singletone3::before {
background-color: var(--color-2);
}
/* FILTRES (images) */
.is-black-and-white {
filter: contrast(125%) grayscale(100%);
}
.is-fit-to-content {
height: 100%;
object-fit: cover;
}
.has-full-contrast {
filter: contrast(200%);
}