Accueil    CSS    Propriété Clip
 



style css clip  Style CSS clip

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété clip permet de délimiter une zone fixe pour l'élément qu'elle décrit (souvent utilisée pour limiter la taille d'une image par exemple). Cette zone ne peut être que rectangulaire et se déclare de la façon suivante :
   clip:rect(y1, x2, y2, x1)
- x1 : valeur d'origine horizontale
- x2 : valeur horizontale maximale
- y1 : valeur d'origine verticale
- y2 : valeur verticale maximale

Pour un rectangle de hauteur 60 pixels et de largeur 100 pixels masquant une hauteur de 30 pixels on déclare :
   clip:rect(30px,100px,90px,0px)

Finalement il faut bien tenir compte du fait que cette propriété ne s'applique qu'aux éléments dont la position est définie de façon absolue (style position : absolute;).



Propriétés pour le style clip :




Propriété Définition Valeurs CSS
clip Permet de définir une zone de taille fixe pour afficher l'élément auto
rect()
inherit
CSS 2


Exemple d'utilisation du style css clip :





Affichage de l'image réelle :
<img alt="exemple clip" src="exemple.png"
   style="height:150px; width:150px;" />

Affichage de l'image obtenue avec l'application de la propriété clip :
<img alt="exemple clip" src="exemple.png"
   style="position:absolute; height:150px; width:150px; clip:rect(20px,100px,100px,20px);" />



Affichage de l'image réelle :

exemple clip


Résultat de l'image associée à la propriété clip :

exemple clip