• Art.27.6.21

    Il me semble qu'un attribut est assez simple à utiliser pour obtenir des résultats intéressants: clip-path.

    Cet attribut permet de découper une image comme avec un ciseau; on peut, au survol, faire afficher la totalité de l'image.

    Pour cela, il faut savoir récupérer les adresses de vos images (ou du net) et en connaître les dimensions.

    Je ne reviens pas sur ces sujets qui sont la base d'un montage.

    *****************

    clip-path découpe des formes dans une image; dans ces exemples, je vais utiliser une forme polygonale et écrire: clip-path:polygon(...);

    D'autres formes sont possibles (rond, ovale ...).

    Il vous d'abord définir les dimensions de votre montage, selon le ratio (rapport largeur/hauteur) de vos images et la largeur de votre zone article.

    La découpe d'une image se fait en définissant chaque point par sa position horizontale et sa position verticale, le point zéro étant l'angle haut/gauche.

    Pour une découpe simple, rectangulaire,

    Chaque point sera défini par x% y%; l'utilisation des % permet de ne pas se casser la tête à calculer des positions en pixels et s'adapte à toute dimension des images.

    *****************

    Pour définir les dimensions de votre image ou de vos images, il vous faut en connaître l'adresse: exemple:

    http://ekladata.com/wX0eg1DR5yTecafFkafFzmxCcEI.jpg

    Pour ma part, je trouve plus simple de les héberger sur Ekla, dans une galerie; ainsi, les images sont toujours disponibles.

    Cette image mesure 1920px par 1080px; si je veux qu'elle mesure 1000px par 562px, il me suffit de modifier son adresse ainsi:

    http://ekladata.com/wX0eg1DR5yTecafFkafFzmxCcEI@1000x562.jpg

    La dimension que vous choisirez sera celle de votre montage.

    Mes exemples sont au ratio 16/9; si vos photos sont au ratio 4/3 (par exemple), vour pourrez choisir:

    http://ekladata.com/wX0eg1DR5yTecafFkafFzmxCcEI@1000x750.jpg

    *******************

    Voyons les paramètres de clip-path:polygon(0% 0%, 20% 0%, 20% 100%,0% 100%);

    Dans les valeurs ci-dessus, la découpe va partir de l'angle haut/gauche (0% 0%), aller à 20% de l'image, vers la droite, à la même hauteur (20% 0%); le troisième point sera à 20% mais complètement en bas de l'image (20% 100%); le quatrième point sera à 0%, c'est à dire complètement à gauche mais en bas de l'image (100%).

    Vous découpez ainsi une tranche de 20% de la largeur de l'image et sur toute sa hauteur

    Voilà pour le premier contact avec clip-path ... à suivre !