Effets divers 2

En poursuivant avec des parties sélectionnées sur une image de fond, nous pouvons proposer différentes décorations, avec ou sans animation; commençons par sans animation.

<div style="width: 80vw; height: 45vw; margin: 1vh auto; border: 0.6vh ridge white;">
<p id="div1" class="div">&nbsp;</p>
<p id="div2" class="div">&nbsp;</p>
</div>

<style><!--
.div{background:url('http://ekladata.com/ecXxVqztP1RrrQW4hCqExxSmbng.jpg'); background-size:80vw 45vw;}
#div1{position:absolute; z-index:1; width:80vw; height:45vw; transform:translate(0vw,0vw);-webkit-filter:grayscale(1) contrast(1.2);filter:grayscale(1) contrast(1.2); opacity:0.4;}
#div2{position:absolute; z-index:2; width:40vw; height:18vw; border:0.5vh ridge white; box-shadow:0vh 0vh 1vw  0.1vw black; background-position:-25vw -15vw; transform:translate(25vw,15vw);}
--></style>

Dans ce premier exemple, nous avons une image de fond en noir et blanc, contraste renforcé (1.2) et, sur ce principe, nous allons pouvoir placer des filtres divers sur l'image de fond.

Nous pouvons également donner une forme variée, à la partie colorée.

Je n'indique pas les codes car ils sont spécifiques à mes images; vous trouverez certainement des façons plus attrayantes que moi car mon sens artistique n'est pas très développé !