clip
Obsolète: Cette fonctionnalité n'est plus recommandée. Même si certains navigateurs la prennent encore en charge, elle a peut-être déjà été supprimée des standards du web, est en passe d'être supprimée ou n'est conservée qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible ; consultez le tableau de compatibilité au bas de cette page pour vous aider à prendre votre décision. Sachez que cette fonctionnalité peut cesser de fonctionner à tout moment.
Attention :
Cette propriété est dépréciée, on utilisera clip-path à la place.
La propriété CSS clip définit la portion visible d'un élément. La propriété clip ne s'applique qu'aux éléments positionnés absolument — c'est-à-dire les éléments avec position:absolute ou position:fixed.
Syntaxe
/* Valeur avec un mot-clé */
clip: auto;
/* Valeur de type <shape> */
clip: rect(1px, 10em, 3rem, 2ch);
/* Valeurs globales */
clip: inherit;
clip: initial;
clip: revert;
clip: revert-layer;
clip: unset;
Valeurs
rect()-
Un rectangle défini à l'aide d'une fonction
rect()de la formerect(<top>, <right>, <bottom>, <left>). Les valeurs<top>et<bottom>sont des décalages par rapport au _bord supérieur de la boîte, tandis que<right>et<left>sont des décalages par rapport au _bord gauche de la boîte - c'est-à-dire l'étendue de la marge de remplissage de boîte.Les valeurs
<top>,<right>,<bottom>et<left>peuvent être soit une longueur (<length>) soitauto. Si la valeur d'un côté estauto, l'élément est rogné sur le bord intérieur de la bordure de ce côté.
Note :
La fonction rect() <shape> utilisée dans la propriété dépréciée clip est différente de la fonction CSS rect() utilisée pour définir une <basic-shape> CSS.
auto-
L'élément n'est pas rogné (par défaut). Attention, le comportement est différent de celui obtenu avec
rect(auto, auto, auto, auto), qui rogne l'élément aux bords intérieurs de la bordure.
Définition formelle
| Valeur initiale | auto |
|---|---|
| Applicabilité | éléments positionnés de manière absolue |
| Héritée | non |
| Valeur calculée | auto si spécifié comme auto, sinon un rectangle avec quatre valeurs dont chacune vaut auto si elles sont spécifiées comme auto sinon, la longueur calculée |
| Type d'animation | un rectangle |
Syntaxe formelle
clip =
<rect()> |
auto
<rect()> =
rect( <top> , <right> , <bottom> , <left> )
Exemples
Rogner une image
<p class="dotted-border">
<img src="macarons.png" title="Image originale" />
<img id="top-left" src="macarons.png" title="Image rognée en haut à gauche" />
<img id="middle" src="macarons.png" title="Image rognée au centre" />
<img
id="bottom-right"
src="macarons.png"
title="Image rognée en bas à droite" />
</p>
.dotted-border {
border: dotted;
position: relative;
width: 390px;
height: 400px;
}
#top-left,
#middle,
#bottom-right {
position: absolute;
top: 0;
}
#top-left {
left: 400px;
clip: rect(0, 130px, 90px, 0);
}
#middle {
left: 270px;
clip: rect(100px, 260px, 190px, 130px);
}
#bottom-right {
left: 140px;
clip: rect(200px, 390px, 290px, 260px);
}
Spécifications
| Specification |
|---|
| CSS Masking Module Level 1 # clip-property |
Compatibilité des navigateurs
Voir aussi
- La propriété
clip-path - La propriété
position - La propriété
mask - La propriété
shape-image-threshold - La propriété
shape-outside