Le rognage (effets visuels)

"clip" est une propriété qui permet de définir la zone visible pour un élément et, s'applique à "overflow" sauf pour la valeur "visible". Une zone de rognage définit la partie du contenu rendu* d'un élément qui est visible. Par défaut, la zone de rognage a la même taille et forme que la boîte, ou les boîtes, de l'élément. Cependant, celle-ci peut être modifiée à l'aide de la propriété 'clip'. Cette propriéténe bénéficie pas de l'héritage.

*contenu rendu = C'est le contenu d'un élément tel qu'il apparaît après que les instructions des feuilles de style concernées aient été appliquées. Cette propriété "clip" permet finalement à définir un cadre de rognage pour obtenir juste une partie d'un élément.

Tout ceci est bien délicat, si on ne se réfère pas aux recommnadations du W3C et, je ne ne saurais trop vous inciter si vous utilisez cette proriété à recourir à de multiples essais de visualisation avec divers navigateurs.

Rappel de la page précédente : Toutes les fois que survient un débordement, la propriété "overflow" vient spécifier, s'il y a lieu, la façon dont la boîte sera rognée. C'est la propriété "clip", qui spécifie alors la taille et la forme de la zone rognée.

Valeurs applicables à "clip"

auto = la zone de rognage a la même taille et emplacement que la boîte (ou les boîtes) de l'élément parent.(Valeur par défaut)

forme = en CSS2, détermine la partie visible de l’ élément après recadrage. La seule valeur mot-clé admise est : rect ("haut", "droite", <bas>, "gauche") qui représentent les décalages par rapport aux côtés respectifs de la boîte.

"haut", "droite", "bas", et "gauche" peuvent être définies par une valeur de longueur ou bien "auto".Cette dernière fait correspondre un bord donné de la zone de rognage à celui de la boîte générée par l'élément (c.à.d. la valeur "auto" a la même signification que "0" = zéro). Les valeurs négatives sont admises.

Si la zone de rognage excède les limites de la fenêtre du document lors de sa visualisation, son contenu peut se trouver rogner par la fenêtre, en fonction du système d'exploitation.

Il est recommandé de choisir la propriété "position: absolute" pour le bon fonctionnement de l'ensemble et même d'insérer dans une balise DIV..

CLIP sur du texte

Texte origine pour l'exemple

1 2 3 4 5 6 7 8 9 10 11
MMMMMMMMMMMM
RRRRRRRRRRRRRRR
KKKKKKKKKKKKKKK

Code dans HEAD

<style type="text/css">
.....
.rogne
{
position:absolute ;
clip: rect (0px, 50px, 200px, 0px) ;
}
</style>

Code dans BODY

<div class="rogne">
1 2 3 4 5 6 7 8 9 10 11 <br>
MMMMMMMMMMMM<br>
RRRRRRRRRRRRRRR<br>
KKKKKKKKKKKKKKK</div>

Texte rogné, exemple

CLIP sur une image

Image origine pour l'exemple

Code dans HEAD exemple 1

<style type="text/css">
.....
.image1
{
position:absolute ; width: 200px ;
clip: rect (0px, 70px, 200px, 0px) ;
}
</style>

Code dans BODY exemple 1

<div class= "image1"> <img src= "aimages/w300.gif" width= "88" height= "31"> </div>

Image rognée résultat exemple 1

Exemple 2 image avec CLIP en cm

Code dans HEAD exemple 2

<style type="text/css">
.....
.image2
{
position: absolute ; width: 200px ;
clip: rect (0cm, 1.9cm, 1cm, 1cm) ;
}
</style>

Code dans BODY exemple 2

Image rognée résultat exemple 2

Note En CSS2, toutes les zones de rognage sont rectangulaires. Il faut s'attendre à ce que les évolutions ultérieures autorisent des formes qui ne soient pas rectangulaires.