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

Inclus dans Speedfly
Merci de me laisser une petite note 😉
[Note moyenne de: 4.5 sur 2 votes]

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine