Introduction a clip-path et mask
Les proprietes CSS clip-path et mask-image sont deux outils extremement puissants pour creer des effets visuels avances. Bien qu'elles semblent similaires, elles ont des approches differentes :
- clip-path : Decoupe un element selon une forme geometrique. Les zones en dehors de la forme sont completement invisibles et non-interactives.
- mask-image : Applique un masque de transparence base sur une image ou un gradient. Permet des transitions douces entre visible et invisible.
Dans ce tutoriel complet, nous allons explorer ces deux proprietes en profondeur, avec des exemples interactifs que vous pouvez copier et adapter a vos projets.
clip-path est supporte par tous les navigateurs modernes. Pour mask-image, pensez a ajouter le prefixe -webkit- pour une compatibilite maximale avec Safari.
clip-path : formes de base
La propriete clip-path accepte plusieurs types de formes geometriques. Voici les principales fonctions disponibles :
circle() et ellipse()
Ces fonctions creent des formes circulaires ou elliptiques. La syntaxe est simple et intuitive.
Hover me
Hover me
/* Cercle : rayon a partir du centre */
.circle {
clip-path: circle(50%);
}
/* Cercle avec position personnalisee */
.circle-offset {
clip-path: circle(40% at 30% 50%);
}
/* Ellipse : rayon X, rayon Y */
.ellipse {
clip-path: ellipse(50% 35% at 50% 50%);
}
/* Transition fluide au hover */
.circle, .ellipse {
transition: clip-path 0.4s ease;
}polygon() pour formes complexes
La fonction polygon() permet de creer n'importe quelle forme en definissant une serie de points. Chaque point est defini par ses coordonnees X et Y en pourcentage.
Hover
Hover
Hover
/* Triangle : 3 points */
.triangle {
clip-path: polygon(
50% 0%, /* sommet */
0% 100%, /* bas gauche */
100% 100% /* bas droite */
);
}
/* Hexagone : 6 points */
.hexagon {
clip-path: polygon(
25% 0%, 75% 0%,
100% 50%,
75% 100%, 25% 100%,
0% 50%
);
}
/* Etoile a 5 branches : 10 points */
.star {
clip-path: polygon(
50% 0%, 61% 35%, 98% 35%,
68% 57%, 79% 91%, 50% 70%,
21% 91%, 32% 57%,
2% 35%, 39% 35%
);
}inset() pour les rectangles arrondis
La fonction inset() cree un rectangle avec des marges interieures et supporte les coins arrondis.
avec border-radius
/* Syntaxe: inset(top right bottom left round radius) */
.inset-basic {
clip-path: inset(10%);
}
/* Avec coins arrondis */
.inset-rounded {
clip-path: inset(10% 10% 10% 10% round 20px);
}
/* Differentes marges */
.inset-custom {
clip-path: inset(5% 20% 15% 10% round 50px);
}Utilisez Clippy pour generer vos clip-path polygon visuellement. C'est beaucoup plus facile que de calculer les coordonnees manuellement !
clip-path: path() pour formes complexes
Pour des formes encore plus elaborees, la fonction path() accepte une chaine SVG path. Cela permet de creer des courbes de Bezier et des formes organiques impossibles avec polygon.
/* Forme de coeur avec path SVG */
.heart {
clip-path: path('M 50,30 C 20,0 0,30 50,60 C 100,30 80,0 50,30 Z');
}
/* Forme de goutte d'eau */
.drop {
clip-path: path('M 50,0 C 70,30 90,50 90,70 C 90,90 70,100 50,100 C 30,100 10,90 10,70 C 10,50 30,30 50,0 Z');
}
/* Alternative: utiliser une reference SVG externe */
.custom-shape {
clip-path: url(#myClipPath);
}La fonction path() utilise des unites absolues (pixels). Pour un design responsive, preferez polygon() avec des pourcentages ou utilisez un SVG reference avec url().
mask-image avec gradients
Contrairement a clip-path qui coupe net, mask-image permet des transitions douces grace aux gradients. Les zones noires du masque sont opaques, les zones blanches sont transparentes.
Fondu avec linear-gradient
/* Fondu vers le bas */
.fade-bottom {
-webkit-mask-image: linear-gradient(
to bottom,
black 50%,
transparent 100%
);
mask-image: linear-gradient(
to bottom,
black 50%,
transparent 100%
);
}
/* Fondu radial depuis le centre */
.fade-radial {
-webkit-mask-image: radial-gradient(
circle at center,
black 30%,
transparent 70%
);
mask-image: radial-gradient(
circle at center,
black 30%,
transparent 70%
);
}
/* Fondu horizontal des deux cotes */
.fade-sides {
-webkit-mask-image: linear-gradient(
to right,
transparent,
black 20%,
black 80%,
transparent
);
mask-image: linear-gradient(
to right,
transparent,
black 20%,
black 80%,
transparent
);
}Masque avec image ou SVG
Vous pouvez egalement utiliser une image PNG avec transparence ou un SVG comme masque.
/* Masque avec image externe */
.mask-png {
-webkit-mask-image: url('mask-shape.png');
mask-image: url('mask-shape.png');
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* Masque avec SVG inline (data URI) */
.mask-text {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg...");
mask-image: url("data:image/svg+xml,%3Csvg...");
}
/* Combiner plusieurs masques */
.mask-combo {
-webkit-mask-image:
linear-gradient(black, transparent),
radial-gradient(black 50%, transparent 50%);
-webkit-mask-composite: intersect;
}Animations de clip-path
L'un des aspects les plus interessants de clip-path est qu'il est animable. Vous pouvez creer des transitions fluides entre differentes formes, a condition qu'elles aient le meme nombre de points.
Effets de revelation au hover
Voici trois variantes d'effets de revelation que vous pouvez appliquer sur des images ou des cartes.
/* Structure HTML */
/* <div class="reveal">
<img src="image.jpg">
<div class="overlay">Texte</div>
</div> */
/* Revelation circulaire */
.reveal-circle .overlay {
clip-path: circle(100% at 50% 50%);
transition: clip-path 0.5s ease;
}
.reveal-circle:hover .overlay {
clip-path: circle(0% at 50% 50%);
}
/* Revelation de gauche a droite */
.reveal-left .overlay {
clip-path: inset(0 0 0 0);
transition: clip-path 0.5s ease;
}
.reveal-left:hover .overlay {
clip-path: inset(0 100% 0 0);
}
/* Revelation diagonale */
.reveal-diagonal .overlay {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
transition: clip-path 0.5s ease;
}
.reveal-diagonal:hover .overlay {
clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}Animation morphing en boucle
Creez une animation qui transforme continuellement une forme en une autre.
/* Morphing entre plusieurs formes */
.morph-shape {
animation: morphShape 4s ease-in-out infinite;
}
@keyframes morphShape {
0%, 100% {
/* Losange */
clip-path: polygon(
50% 0%, 100% 50%,
50% 100%, 0% 50%
);
}
25% {
/* Rectangle */
clip-path: polygon(
0% 0%, 100% 0%,
100% 100%, 0% 100%
);
}
50% {
/* Hexagone (4 points pour matcher) */
clip-path: polygon(
25% 0%, 75% 0%,
75% 100%, 25% 100%
);
}
75% {
/* Cercle via polygon */
clip-path: circle(50%);
}
}
/* Animation pulse avec cercle */
.pulse-circle {
animation: pulseReveal 3s ease-in-out infinite;
}
@keyframes pulseReveal {
0%, 100% {
clip-path: circle(30% at 50% 50%);
}
50% {
clip-path: circle(70% at 50% 50%);
}
}Pour que les transitions entre polygon() fonctionnent, les deux formes doivent avoir exactement le meme nombre de points. Sinon, il n'y aura pas d'interpolation fluide.
Effets creatifs et cas d'usage
Voyons maintenant quelques applications concretes de clip-path et mask dans des projets reels.
Galerie d'images avec overlay
.gallery-item {
position: relative;
overflow: hidden;
cursor: pointer;
}
.gallery-item img {
width: 100%;
transition: transform 0.4s;
}
.gallery-item .overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
/* Commence invisible */
clip-path: circle(0% at 50% 50%);
transition: clip-path 0.4s ease;
}
.gallery-item:hover .overlay {
clip-path: circle(100% at 50% 50%);
}
.gallery-item:hover img {
transform: scale(1.1);
}Cartes avec decoupe diagonale
.diagonal-card {
position: relative;
background: #12121a;
border-radius: 16px;
overflow: hidden;
}
.diagonal-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100%;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
/* Decoupe diagonale */
clip-path: polygon(
0 0, /* haut gauche */
100% 0, /* haut droite */
100% 30%, /* milieu droite */
0 60% /* milieu gauche */
);
}
.diagonal-card-content {
position: relative;
padding: 80px 20px 20px;
}Bonnes pratiques
Pour conclure, voici quelques recommandations pour utiliser clip-path et mask efficacement :
Performance
- Privilegiez les formes simples : circle, ellipse et inset sont plus performants que polygon avec de nombreux points
- Utilisez
will-change: clip-pathsi vous animez frequemment un element - Evitez les animations sur mobile pour les formes tres complexes
Accessibilite
- Le contenu clippe reste accessible aux lecteurs d'ecran, pensez-y
- Respectez prefers-reduced-motion pour les animations
@media (prefers-reduced-motion: reduce) {
.animated-shape,
.reveal-overlay,
.morph-shape {
animation: none;
transition: none;
}
}Compatibilite
- clip-path : Supporte par tous les navigateurs modernes
- mask-image : Ajoutez toujours le prefixe
-webkit- - path() : Support limite, preferez polygon ou url()
Conclusion
Les proprietes clip-path et mask-image ouvrent un monde de possibilites creatives en CSS. Que vous souhaitiez creer des formes geometriques, des effets de revelation au survol ou des animations morphing, ces outils sont indispensables dans votre boite a outils de developpeur front-end.
N'hesitez pas a experimenter avec les valeurs et a combiner ces techniques avec d'autres proprietes CSS comme les filtres ou les transformations pour des resultats encore plus spectaculaires.
Decouvrez notre collection d'effets CSS prets a l'emploi avec de nombreux exemples utilisant clip-path et mask.