• Découpe image en CSS

    Vous savez tous diviser une image, par un logiciel de traitement d'image, et de différentes façons.

    Ainsi, si vous voulez diviser une image en 4 morceaux, vous pouvez ensuite donner une animation particulière à chacun de ces morceaux.

    Mes derniers montages (Astérique, Etoile) utilisent un code html/CSS pour découper une image ... en 4 parties, ce qui est le plus simple mais on fait ce qu'on veut.

    Chaque partie sélectionnée, par ce code (il en existe d'autres), ne peut être qu'une sélection rectangulaire mais, à l'affichage, on peut la publier en rond, ovale, carré, losange...

    Le principe est d'utiliser une seule adresse d'image (la grande) et de créer des morceaux (paragraphes p), dans lesquels, pour chacun, on place, en fond, une partie précise de l'image générale.

    Ces parties peuvent être déformées puis reformées au survol, pour reconstituer l'image générale, qui peut être fixe ou animée.

    Voici une image, créée en 800x600px et hébergée sur Ekla, divisée en 4 parties, qui s'assemblent au survol.

     

     

     

     

     

    <div id="dc0">
    <p id="bt">&nbsp;</p>
    <p id="dc1">&nbsp;</p>
    <p id="dc2">&nbsp;</p>
    <p id="dc3">&nbsp;</p>
    <p id="dc4">&nbsp;</p>
    </div>

    <style><!--
    #dc0{width:800px; height:600px; border:6px ridge grey; margin:10px auto;}
    #bt{position:absolute; z-index:10; width:800px; height:600px; transform:translate(0px,0px);}
    #dc1{position:absolute; z-index:1; width:200px; height:150px; background:url(http://ekladata.com/V5coHO7O1TP8tmT1p03JpT5aRHE.jpg); background-position:top left; transform:translate(0px,0px); transition:all 1s linear;}
    #dc2{position:absolute; z-index:1; width:200px; height:150px; background:url(http://ekladata.com/V5coHO7O1TP8tmT1p03JpT5aRHE.jpg); background-position:top right; transform:translate(600px,0px); transition:all 1s linear;}
    #dc3{position:absolute; z-index:1; width:200px; height:150px; background:url(http://ekladata.com/V5coHO7O1TP8tmT1p03JpT5aRHE.jpg); background-position:bottom left; transform:translate(0px,450px); transition:all 1s linear;}
    #dc4{position:absolute; z-index:1; width:200px; height:150px; background:url(http://ekladata.com/V5coHO7O1TP8tmT1p03JpT5aRHE.jpg); background-position:bottom right; transform:translate(600px,450px); transition:all 1s linear;}
    #bt:hover ~ #dc1{width:400px; height:300px; transform:translate(0px,0px);}
    #bt:hover ~ #dc2{width:400px; height:300px; transform:translate(400px,0px);}
    #bt:hover ~ #dc3{width:400px; height:300px; transform:translate(0px,300px);}
    #bt:hover ~ #dc4{width:400px; height:300px; transform:translate(400px,300px);}
    --></style>

    dc0 est le cadre du montage, avec bordure ou non, centré dans la page ou non.

    bt est le paragraphe invisible et placé en premier plan (z-index:10;) afin d'animer les autres éléments au survol et placé en écriture code, avant les éléments qu'il anime.

    dc1 est un paragraphe d'un taille du quart de l'image générale, réduit (et déformé éventuellement selon montage); il est positionné dans l'angle haut/gauche (transform:translate(0px,0px); et sa vitesse d'animation est de 1 seconde. Il reçoit, en fond, le quart haut/gauche de l'image générale (background-position:top left;)

    dc2 est une paragraphe identique; il est positionné dans l'angle haut/droit (transform:translate(600px,0px);); vitesse 1 seconde; il reçoit, en fond, le quart haut/droit de l'image générale background-position:top right;

    dc3, idem; positionné dans l'angle bas/gauche transform:translate(0px,450px); et reçois la partie de fond background-position:bottom left;

    dc3, idem; positionné dans l'angle bas/gauche transform:translate(600px,450px); et reçois la partie de fond background-position:bottom right;

    Au survol du bouton (bt), chaque partie est positionnée à sa place et reprend la dimension du quart de l'image générale.