Formation CSS3

Mise en forme des boîtes

Les ombres portées

L'attribut box-shadow permet de faire des effets d'ombre sous une boîte.
Il reçoit plusieurs listes de 2 à 4 paramètres séparés par des virgules.
Il est ainsi possible d'attribuer plusieurs ombres de types différents à une boîte.
Les paramètres peuvent être omis, dans ce cas :
- les valeurs numériques seront nulles,
- la couleur sera celle du fond.

Les ombres portées

Les paramètres d'une ombre sont :
- un sélecteur inset, si présent l'ombre sera à l'intérieur de la boite.
- les valeurs numériques suivantes sont :
  - les décalages horizontaux et verticaux (unités CSS),
  - le rayon du flou gaussien (unités CSS),
  - la distance avant le début de l'atténuation.
- le dernier paramètre est la couleur.

Exemple div ayant une ombre externe et une ombre interne :

div {
  box-shadow:inset -1em -1em 3em -0.3em #585,
                   1em 1em 2em -0.3em #00F

La distance avant le début de l'atténuation gaussienne (peut être négative), dans ce cas le flou gaussien sera atténué dès le début de l'ombre

Les coins arrondis

Avec CSS3 il est possible le paramétrer la forme des coins d'une boîte.
Chaque coin peut être transformé en un arc d'ellipse régit par un rayon horizontal et un rayon vertical.
La propriété border-radius assure ce contrôle.
Elle reçoit :
- le rayon horizontal et le rayon vertical de l'ellipse.
- si un seul rayon est fourni les coins seront circulaires :
Exemple div ayant des coins en arc de cercle de la largeur d'un M :
```
div {
  border-radius:1em;
}
```

Les coins arrondis

Il est possible de spécifier indépendamment la courbure de chaque coin :
- border-top-left-radius pour le coin supérieur gauche.
- border-top-right-radius pour le coin supérieur droit.
- border-bottom-left-radius pour le coin inférieur gauche.
- border-bottom-right-radius pour le coin inférieur droit.
border-radius supporte la déclaration simultanée de valeurs différentes.

Exemple div et footer auront les mêmes définition de courbure :

div {border-radius : 2em 1em 4em / 0.5em 3em}
footer {
  border-top-left-radius:     2em 0.5em;
  border-top-right-radius:    1em 3em;
  border-bottom-right-radius: 4em 0.5em;
  border-bottom-left-radius:  1em 3em;}

contrôle du dimensionnement des boîtes

Si le contenu est plus grand que le contenant il faut gérer le comportement.
C'est le rôle de la propriété overflow (CSS2),
Elle peut avoir les valeurs suivantes :
- visible : affiche le contenu en dehors du bloc,
- hidden : cache le contenu en dehors du bloc,
- scroll : permet le déplacement du texte tout en le masquant par l'apport de barres de défilement.
- auto : idem à scroll, mais ne présente les barres que si elles sont nécessaires.

contrôle du dimensionnement des boîtes

En CSS3 il existe également la possibilité de permettre à l'utilisateur un redimensionnement des boîtes.
C'est le rôle de la propriété resize qui peut avoir les valeurs suivantes :
- none : pas de dimensionnement possible par l'utilisateur,
- vertical : dimensionnement vertical autorisé,
- horizontal : dimensionnement horizontal autorisé,
- both : dimensionnement vertical et horizontal autorisé,
Cette propriété ne sera perceptible que si le mode overflow est différent de visible.

La boîte ne pourra qu'être agrandie par rapport à ses dimensions initiales.

contrôle du dimensionnement des boîtes

Exemple de zone de saisie de texte avec possibilité de redimensionnement :
```
textarea {
  overflow:auto;
  resize:both;
  width:20em;
  height:10em;
}
```

Résultat appliqué au HTML suivant :

<textarea rows="2" cols="30">Saisissez un texte</textarea>

Donne le résultat suivant : saisissez un texte

Documentation

Les spécifications du W3C : http://www.w3.org/TR/css3-background