decoupe 4

decoupe 4

Une autre façon de faire une découpe dans une image est de créer un cadre, de la dimension voulue avec la partie souhaitée en fond, cadre que l'on peut décorer.

Cela peut permettre des montages intéressants en positionnant la partie sélectionnée en couleur, sur l'image totale en noir et blanc (facultatif).

Mais regardons déjà comment remplir un cadre, de la dimension souhaitée avec une partie d'image.

Voilà notre image de base:

<p id="dec4"> </p>
<style></style>

Le cadre est dimensionné en 800px par 300px et reçoit, en fond, l'image des 1600px par 900px dont il n'affiche qu'une partie définie par: background-position:-400px -400px;

que nous définissons selon notre choix; attention aux valeurs négatives.

<div style="position: relative; width: 1600px; height: 900px; margin: 30px auto; text-align: left;">
<p id="dec1"> </p>
<p id="dec2"> </p>
</div>

<style></style>

Le principe est de positionner, dans un cadre général à la dimension souhaitée, deux cadres superposés;

le premier, en dessous, est l'image totale en noir et blanc et opacité réduite,

Le second, par dessus, dans le dimension adaptée à votre sélection, sélection placée en fond de ce cadre, le fond étant déterminé par background-position:-500px -250px; et positionné sur la première image par transform:translate(500px,250px); valeurs identiques au background-position mais en positif.

On peut ajouter une effet 3D sur l'image colorée et un effet 3D; la sélection peut être ronde ou élliptique !

Exemple avec une sélection ronde:

<div style="position: relative; width: 1600px; height: 900px; margin: 30px auto; text-align: left;">
<p id="dec6"> </p>
<p id="dec7"> </p>
</div>

<style></style>