Quel effet ça fait ?

Des effets

  

Notes

 /* == 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%);
}


 

Notes