0

Retrato com pele rachada realista em Html-CSS-PURO

#HTML #JavaScript #CSS
Achilles Vasconcelos
Achilles Vasconcelos

Estou usando o Vscode, você pode usar qualquer editor de código da sua preferência.

Crie os arquivo com o nome index.html, style.css e uma pasta com nome img aonde vamos colocar as imagens uma de sua preferência e a textura está nesse link

white and gray abstract painting photo – Free Grey Image on Unsplash


Vai ficar assim.


Agora vamos ao código.

no índex.html

<!DOCTYPE html>

<html lang="Pt-BR">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">

    <title>CSS</title>

</head>

<body>

   <div class="portrait">

       <img src="/img/eu.jpg">

       <img src="/img/the-blowup-unsplash.jpg" class="texture">

   </div> 

</body>

</html>


No arquivo style.css

*{

    margin:0;

    padding: 0;

    box-sizing: border-box;

}

.portrait{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;


}

.portrait img{

    

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;


}

.portrait img.texture{

    mix-blend-mode: multiply;

}

Salve e veja o como ficou.