Comment Faire des Formes sur les Images sur Shopify

Nous allons voir  dans ce tutoriel comment créer des formes géométriques sur les images de votre boutique Shopify. Ces bouts de codes masqueront une partie de votre image pour réaliser la forme souhaitée.

Comment Cropper les images

Cette fois ci pas vraiment d’explication mais uniquement des bouts de codes avec l’exemple juste au dessus. Vous aller donc prendre le code que vous souhaitez de 2 manière possibles

L’intégration de l’effet directement dans la balise image ou le rajout d’une classe CSS pour cibler les images déjà présentes sur votre boutique.

Si vous avez besoin de plus d’information je vous invite à visionner la vidéo tout en bas du tuto !

Forme 1

Code à mettre dans la balise image

<img style="clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);" src="url-de-image" alt="" />

Exemple d’une class ou l’effet est présent

.image-cropped {
  clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
}

Forme 2

Code à mettre dans la balise image

<img style="clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);" src="url-de-image" alt="" />

Exemple d’une class ou l’effet est présent

.image-cropped {
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%);
}

Forme 3

Code à mettre dans la balise image

<img style="clip-path: polygon(50% 0%, 100% 5%, 100% 35%, 100% 70%, 100% 100%, 50% 95%, 0 100%, 0% 70%, 0% 35%, 0 5%);" src="url-de-image" alt="" />

Exemple d’une class ou l’effet est présent

.image-cropped {
  clip-path: polygon(50% 0%, 100% 5%, 100% 35%, 100% 70%, 100% 100%, 50% 95%, 0 100%, 0% 70%, 0% 35%, 0 5%);
}

Forme 4

Code à mettre dans la balise image

<img style="clip-path: polygon(50% 5%, 100% 0, 100% 35%, 100% 70%, 100% 95%, 50% 100%, 0 95%, 0% 70%, 0% 35%, 0 0);" src="url-de-image" alt="" />

Exemple d’une class ou l’effet est présent

.image-cropped {
  clip-path: polygon(50% 5%, 100% 0, 100% 35%, 100% 70%, 100% 95%, 50% 100%, 0 95%, 0% 70%, 0% 35%, 0 0);
}

Forme 5

Code à mettre dans la balise image

<img style="clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);" src="url-de-image" alt="" />

Exemple d’une class ou l’effet est présent

.image-cropped {
  clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%);
}

Forme 6

Code à mettre dans la balise image

<img style="clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);" src="url-de-image" alt="" />

Exemple d’une class ou l’effet est présent

.image-cropped {
  clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
}

Forme 7 – Bonus

Code à mettre dans la balise image

<img style="border-radius: 46% 54% 31% 69% / 47% 24% 76% 53%;" src="url-image" alt="" />

Exemple d’une class ou l’effet est présent

.image-cropped {
  border-radius: 46% 54% 31% 69% / 47% 24% 76% 53%;
}

Besoin de plus de formes ?

Rendez-vous sur ce générateur de formes : https://bennettfeely.com/clippy/ ou https://9elements.github.io/fancy-border-radius/ et récupérez le code souhaité

Ce Tuto existe également en vidéo