5 propriétés CSS simples et utiles

Cet article présente 5 propriétés CSS utiles. Vous devriez le connaître, mais vous l’utiliserez probablement rarement. Je ne parle pas d'anticiper les nouvelles propriétés CSS3, je parle des anciennes propriétés CSS2 telles que clip, min-height, white-space, curosr et display qui sont largement prises en charge par tous les navigateurs. Alors ne manquez pas cet article car ils pourraient vous être d’une grande utilité.

1. Clip CSS

La propriété clip est comme un masque. Il permet de masquer le contenu des éléments de la page à l'aide de rectangles. Pour découper un élément : vous devez spécifier sa propriété de position comme absolue, puis spécifier les valeurs haut, droite, bas et gauche par rapport à l'élément.

Exemple de détourage d'image ( démo )

L'exemple suivant montre comment utiliser la propriété clip pour masquer une image. Tout d'abord, spécifiez l'élément <div> comme position:relative, puis spécifiez l'élément <img> comme position:absolute et définissez la valeur rect en fonction des besoins réels.

.clip {
position : relative ;
hauteur : 130px ;
largeur : 200 px ;
bordure : solide 1px #ccc ;
}
.clip img {
position : absolue ;
clip : rect(30px 165px 100px 30px);
}

 Redimensionnement et découpage d'image ( démo )

Dans cet exemple, je vais vous montrer comment redimensionner et recadrer une image. L'image stock est rectangulaire et je souhaite la réduire à 50 % de sa taille pour créer une vignette au format carré. J'ai donc utilisé les propriétés width et height pour redimensionner l'image, et la propriété clip pour la masquer. Utilisez ensuite l'attribut left pour déplacer l'image de 15 pixels vers la gauche.

.

galerie li {
flotteur : gauche ;
marge : 0 10px 0 0 ;
position : relative ;
largeur : 70px ;
hauteur : 70px ;
bordure : solide 1px #000 ;
}
.gallery img {
largeur : 100 px ;
hauteur : 70px ;
position : absolue ;
clip : rect(0 85px 70px 15px);
gauche : -15px ;
}