Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété clip

Description de la propriété clip.

La propriété clip est obsolète. Il est déconseillé de l'utiliser. Préférez la propriété clip-path à la place, qui est d'ailleurs beaucoup plus souple.

Découpe un élément pour le faire tenir dans l'espace qui lui est réservé. Cette propriété n'est fonctionnelle que sur les éléments positionnés en absolu : ceux dont la propriété position a la valeur absolute.

clip présente deux inconvénients majeurs, qui n'existent plus avec clip-path :

  • L'élément doit être positionné en absolu.
  • La découpe ne peut être que rectangulaire.

La partie à afficher est définie par 4 valeurs a,b,c,d avec leur unité (Voir les unités de dimensions en CSS).
  a = position du bord haut de la partie visible,
  b = position du bord droit de la partie visible,
  c = position du bord inférieur de la partie visible,
  a = position du bord gauche de la partie visible.
Comme d'habitude, CSS énumère les cotés dans len sens des aiguilles d'une montre, en commençant par le coté haut.

Propriété CSS clip

Syntaxes pour clip.

  • clip: auto;

    Valeur par défaut. Aucune découpe n'est effectuée : l'élément est visible en entier.

  • clip: rect(a,b,c,d);

    N'est affichée que la partie de l'élément correspondant au rectangle rect(a,b,c,d). Reportez-vous à la présentation de la fonction rect() pour plus de détails.

  • clip: inherit | initial | unset;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Le bloc résultat a été positionné en absolu (nécessaire pour que clip fonctionne). Modifiez les valeurs pour observer comment l'élément est découpé.

clip :
rect(  
, , ,
  )

Résultat

La propriété clip découpe cet élément suivant un rectangle défini par 4 valeurs numériques. Elle est maintenant remplacée par clip-path qui est beaucoup plus souple et bien plus puissante.

Voir aussi...

Images et filtres - Propriétés.

  • backdrop-filter : Applique un filtre graphique sur l'élément situé en arrière plan.
  • background-blend-mode : Définit le mélange des couleurs entre image(s) d'arrière-plan et couleur d'arrière-plan.
  • clip-path : Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...)
  • filter : Filtre graphique.
  • image-rendering : Mode de mise à l'échelle des images.
  • mix-blend-mode : Définit le mode de mélange entre le contenu et ce qui est visible en arrière-plan de l'élément.

Images et filtres - Fonctions.

  • blur() : Applique un effet de flou à une image.
  • brightness() : Ajuste la luminosité d'une image.
  • contrast() : Ajuste le contraste d'une image.
  • drop-shadow() : Définit l'ombre d'un élément (dimensions, flou, couleur).
  • grayscale() : Convertit une image en nuances de gris (noir et blanc).
  • hue-rotate() : Change les couleurs d'une image (rotation des teintes).
  • image() : Désigne ou définit une image.
  • inset() : Définit un rectangle, utilisable pour découper une image.
  • invert() : Inverse les couleurs d'une image.
  • opacity() : Détermine le degré de transparence d'un élément.
  • saturate() : Définit la saturation des couleurs d'une image.
  • sepia() : Applique un effet sépia à une image.