• 20.11.2022.A

    Quelques exemples de découpe d'une image.

    J'ajouterai des animations au survol ensuite.

    Il faut savoir que cette découpe étant comme une découpe aux ciseaux, vous ne pourrez ajouter de bordure sur la partie découpée... du moins dans ce que je sais faire avec cet attribut.

    Il existe d'autres façons de faire une sélection géométrique avec d'autres attributs et avec lesquels on peut ajouter une bordure.

    Voilà l'image de base:

    <img id="anes1" src="http://ekladata.com/B0v7Xrqc5tEBdpSPyd9xT7gdtEE.jpg">
    <style><!--
    #anes1{position:relative; width:1600px; height:900px; margin:30px auto;}

    --></style>

    Mon image est redimensionnée en ligne CSS (width:1600px; height:900px;) afin de montrer que la dimension d'origine importe peu puisque vous pouvez la redimensionner en ligne CSS (en conservant son ratio largeur/hauteur).

    Dans cette image sans animation, pas besoin de ligne CSS mais nous ajouterons ensuite des animations alors...

    Si votre image est en autres dimensions, par exemple, vous modifierez width et height selon vos valeurs et ratio.

    Pour simplifier, nous choisirons l'ordre des points en partant du gauche/haut, dans le sens des aiguilles d'une montre vers le point gauche/bas mais rien d'obligatoire.

    Pour faire une découpe de forme géométrique, un carré pour commencer (nous pourrons ensuite nous aventurer dans des formes complexes), nous allons utiliser l'attibut

    clip-path:polygon(point A (x et y), point B (x et y), point C(x et y), point D(x et y);

    Le point A est le point gauche/haut; il est positionné en % de la largeur puis de la hauteur. A vous d'estimer ces % et d'ajuster ensuite, éventuellement.

    Le point B est le point droit/haut; le point C est le point droit/bas; le point D est le point gauche/bas

    Reprenons le code de notre image de base:

    <img id="anes2" src="http://ekladata.com/B0v7Xrqc5tEBdpSPyd9xT7gdtEE.jpg">
    <style><!--
    #anes2{position:relative; width:1600px; height:900px; margin:30px auto; clip-path:polygon(20% 30%, 70% 30%, 70% 100%, 20% 100%);}

    --></style>

     

     Nous avons éliminé une partie de l'image en ne conservant que la partie carrée qui nous intéresse.

    Créons maintenant une animation au survol pour faire apparaître la partie manquante.

    <img id="anes3" src="http://ekladata.com/B0v7Xrqc5tEBdpSPyd9xT7gdtEE.jpg">
    <style><!--
    #anes3{position:relative; width:1600px; height:900px; margin:30px auto; clip-path:polygon(20% 30%, 70% 30%, 70% 100%, 20% 100%);}

    #anes3:hover{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition:all 1s;}

    --></style>

    Pour cela, nous avons ajouté une ligne en css pour indiquer qu'au survol (hover), les points A,B,C et D changent de paramètres et nous avons indiqué la vitesse de l'animation (transition:all 1s;)

    Le point A passe en angle gauche/haut (0% et 0%); le point B passe en angle droit/haut (100% et 0%); le point C passe en angle droit/bas (100% et 100%); le point D passe en angle gauche/bas (0% et 100%);

    Pour fignoler, tant que les codes sont simples, vous pouvez afficher la découpe en noir et blanc et l'image au survol en couleur.

    <img id="anes3" src="http://ekladata.com/B0v7Xrqc5tEBdpSPyd9xT7gdtEE.jpg">
    <style><!--
    #anes3{position:relative; width:1600px; height:900px; margin:30px auto; clip-path:polygon(20% 30%, 70% 30%, 70% 100%, 20% 100%); filter:grayscale(1);}

    #anes3:hover{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); transition:all 1s; filter:grayscale(0);}

    --></style>