Les extensions en CSS
Dans ce tutoriel, nous allons manipuler les extensions CSS.
page-break-before
page-break-before: auto;
Définit l'endroit où doivent être placés les sauts de page lors de l'impression du document.
La propriété de feuille de style css page-break-before est une feuille de style de type media="print" et est donc utilisée pour l'impression.
Valeurs possibles :
- auto ne force pas et n'interdit pas un saut de page avant.
- always force un saut de page avant
- avoid évite un saut de page avant
- left force un saut de page, avant l'élément de maniére à ce que la page suivante soit mise en forme comme une page de gauche
- right force un saut de page, avant l'élément de maniére à ce que la page suivante soit mise en forme comme une page de droite
- inherit Hérite de la propriété de son parent
page-break-after
page-break-after: auto;
valeurs possibles :
- auto ne force pas et n'interdit pas un saut de page aprés
- always force un saut de page aprés
- avoid évite un saut de page aprés
- left force un saut de page, aprés l'élément de maniére à ce que la page suivante soit mise en forme comme une page de gauche
- right force un saut de page, aprés l'élément de maniére à ce que la page suivante soit mise en forme comme une page de droite.
- inherit Hérite de la propriété de son parent
Rédéfinir l'apparence du curseur de la souris
cursor: pointer;
Valeurs possibles :
- auto
- nw-resize, curseur en forme de double petite fléche en diagonale bas droit vers haut gauche
- crosshair, curseur en forme de croix fine
- n-resize, curseur en forme de double petite fléche verticale
- default, curseur en forme de grosse fléche
- se-resize, curseur en forme de double petite fléche en diagonale bas droit vers haut gauche
- pointer, curseur en forme de main avec un doigt déplié
- sw-resize, curseur en forme de curseur en forme de double petite fléche en diagonale bas gauche vers haut droit
- move curseur en forme de quatre fléches en croix
- s-resize, curseur en forme de double petite fléche verticale
- e-resize, curseur en forme de double petite fléche horizontale
- w-resize, curseur en forme de double petite fléche horizontale
- ne-resize, curseur en forme de double petite fléche en diagonale bas gauche vers haut droit
- text, curseur en forme de sorte de grand I
- help, curseur en forme de fléche et "?"
- wait, curseur en forme de sablier
- inherit la forme du curseur hérite de son parent
- progress, curseur en forme de fléche avec sablier
- not-allowed, curseur en forme de rond barré
- no-drop, curseur en forme de main avec un doigt déplié avec un rond barré
- col-resize, curseur fait de deux traits verticaux avec une fléche de chaque coté
- row-resize, curseur fait de deux traits horizontaux avec une fléche de chaque coté
Exemple avec help comme valeur
Passez votre souris sur ce texte
Code CSS
.curseur-aide
cursor: help;
}
Les filtres
L'opacité avec opacity
opacity: 0.2;
valeur possible :
Nombre : compris entre 0.0 et 1,
0.0 est totalement transparent et 1 est totalement opaque
Exemple
Bloc avec un texte noir une faible opacité, Bloc avec un texte noir et une faible opacité,
Bloc avec un texte noir et une faible opacité,
Pour Internet Explorer (Version < à 9)
Pour obtenir cet effet de transparence sous Internet Explorer, Il faudra ajouter a propriété filter qui est propre à Internet Explorer.
Code CSS
.boite-faible-opacite{
filter : alpha(opacity=10);
opacity : 0.2;
}
L'ombrage du texte avec text-shadow
text-shadow: #000 2px 0px 2px;
Valeur possibles :
4 valeurs dans cet ordre
- Un nombre pour le décalage horizontal de l'ombre
- Un nombre pour le décalage vertical de l'ombre
- Un nmbre pour le rayon du flou (Si la valeur n'est pas complétée, il aura comme valeur 0)
- Une couleur au format hexadécimal ou rgb (peu être mise premier)
Vous pouvez de même utiliser des valeurs seules :
- none Pas d'ombre
- inherit Hérite de son parent
Et enfin pour obtenir des ombres multiples :
Vous devez ajouter une "," aprés chaque bloc des 4 valeurs
Pour internet Explorer
Le text shadow ne s'affiche pa sdans Internet Explorer
Exemple
Bloc avec un flou qui ne s'affiche pas sur Internet Explorer, Bloc avec un flou qui ne s'affiche pas sur Internet Explorer,
Bloc avec un flou qui ne s'affiche pas sur Internet Explorer
Code CSS
.BoiteOmbrage{
text-shadow: #000 2px 0px 2px;
}
