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]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

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

Payer un Café à Dgeo Dev

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 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