Comment utiliser le découpage CSS

Tous les éléments des pages Web sont définis dans une boîte rectangulaire. Cependant, cela ne signifie pas que nous devons tout faire ressembler à une boîte. Vous pouvez utiliser le CSS clip-path propriété pour recadrer des parties d'une image ou d'un autre élément, pour créer des effets intéressants.

Dans l'exemple ci-dessus, l'image de la bulle est carrée (Fontaine). Utilisant clip-path et la valeur de forme de base de cercle ()
le ciel supplémentaire autour du globe est découpé en laissant une image circulaire sur la page.

Comme l'image est un lien, vous pouvez en voir plus clip-path propriété. Seule la zone visible de l'image peut être cliquée, car les événements ne sont pas déclenchés dans les parties cachées de l'image.

Le découpage peut être appliqué à n'importe quel élément HTML, pas seulement aux images. Il existe plusieurs façons de créer un clip-path, dans ce post, nous les verrons.

Compatibilité du navigateur

Outre les valeurs du tableau comme expliqué plus loin dans l'article, les différentes valeurs de clip-path avéré avoir excellent support du navigateur. Pour les anciens navigateurs, une alternative peut être de permettre au navigateur d'ignorer le clip-path propriété et afficher l'image sans recadrage. Si c'est un problème, vous pouvez l'essayer clip-path dans une requête de fonction et offre une mise en page alternative pour les navigateurs non pris en charge.

@supports(clip-path: cercle(45%) {
}

Formes de base

Les clip-path La propriété peut prendre plusieurs valeurs. La valeur utilisée dans l'exemple initial était cercle (). C'est l'une des valeurs de forme de base, qui sont définies dans le
Spécification de forme CSS. Cela signifie que vous pouvez recadrer une zone et utiliser la même valeur pour forme extérieure pour rendre le texte conforme à cette forme.

La liste complète des formes de base est:

encart ()

Les encart () value insère la zone découpée à partir du bord de l'élément et des valeurs peuvent être transmises pour les bords supérieur, droit, inférieur et gauche. ONGLE rayon de la frontière Il peut également être ajouté pour courber les coins de la zone recadrée, en utilisant le rond Mot-clé.

Dans mon exemple, j'ai deux cases avec une classe de .boîte. La première image n'a pas de découpage, la seconde est découpée à l'aide de encart () valeurs.

cercle ()

Comme vous l'avez vu, le cercle () La valeur crée une zone rognée circulaire. La première valeur est une longueur ou un pourcentage et est le rayon du cercle. Une deuxième valeur facultative vous permet de définir le centre du cercle. Dans l'exemple ci-dessous, j'utilise des valeurs de mots clés pour définir mon cercle rogné en haut à droite. Vous pouvez également utiliser des longueurs ou des pourcentages.

Attention aux bords plats!

Notez qu'avec toutes ces valeurs, la forme sera découpée par la zone de marge de l'élément. Si vous créez un cercle dans une image et que cette forme s'étendra en dehors de la taille naturelle de l'image, vous obtiendrez un bord plat.

ellipse ()

Une ellipse est essentiellement un cercle écrasé, elle agit donc de manière très similaire à cercle () mais il accepte un rayon pour x et un rayon pour y, plus la valeur du centre de l'ellipse.

polygone ()

Les polygone () value peut vous aider à créer des formes assez complexes, en définissant autant de points que nécessaire, en définissant les coordonnées de chaque point.

Pour vous aider à créer des polygones et voir ce qui est possible, voir Clippy, ongle clip-path générateur, puis copiez et collez le code dans votre propre projet.

Formes de valeurs en espèces

Les formulaires CSS sont également définis comme des formes de valeurs de rachat. Celles-ci concernent le modèle de boîte CSS: la zone de contenu, la zone de remplissage, la zone de bordure et la zone de marge avec des valeurs de mot-clé de content-box, bordure-boîte, boîte de rembourragey zone de marge.

Ces valeurs peuvent être utilisées seules ou en conjonction avec une forme de base pour définir le cadre de référence utilisé par la forme. Par exemple, ce qui suit découperait la forme sur le bord du contenu.

.boîte {
clip-path: content-box;
}

Dans cet exemple, le cercle utiliserait le content-box comme un tableau de référence au lieu de zone de marge (qui est la valeur par défaut).

.boîte {
clip-path: cercle(45%) content-box;
}

Actuellement, les navigateurs ne prennent pas en charge l'utilisation de valeurs de boîte pour clip-path propriété. Sont compatibles avec forme extérieure cependant.

Utilisation d'un élément SVG

Pour avoir plus de contrôle sur la zone recadrée que ce n'est possible avec les formes de base, utilisez un SVG clipPath élément. Puis référencez cet identifiant, en utilisant URL () comme la valeur de clip-path.

Animation de la zone recadrée

Les transitions et animations CSS peuvent être appliquées au clip-path pour créer des effets sympas. Dans l'exemple ci-dessous, j'anime un cercle en survolant la transition entre deux cercles avec une valeur de rayon différente.

Il existe de nombreuses façons créatives d'utiliser l'animation avec le détourage.
Animation avec clip-path sur CSS Tricks passe par quelques idées.

photo par Matthieu Henry en rafale.