Les bordures et les ombres

Bordures standard

Le CSS vous offre un large choix de bordures pour décorer votre page.
De nombreuses propriétés CSS vous permettent de modifier l'apparence de vos bordures: border-width, border-color, border-style…

Pour aller à l'essentiel, je vous propose ici d'utiliser directement la super-propriété border qui regroupe l'ensemble de ces propriétés.
Vous vous souvenez de la super-propriété background? Cela fonctionne sur le même principe : on va pouvoir combiner plusieurs valeurs.

Pour border on peut utiliser jusqu'à trois valeurs pour modifier l'apparence de la bordure:

1. La largeur: indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme 2px).


2. La couleur: c'est la couleur de votre bordure.
   Utilisez, comme on l'a appris, soit un nom de couleur (black, red, …), soit une valeur hexadécimale (#FF0000), soit une valeur RGB (rgb(198, 212, 37)).


3. Le type de bordure: là, vous avez le choix.
   Votre bordure peut être un simple trait, ou des pointillés, ou encore des tirets, etc.
   Voici les différentes valeurs disponibles:
• none: pas de bordure (par défaut);
• solid: un trait simple;
• dotted: pointillés;
• dashed: tirets;
• double: bordure double;
• groove: en relief;
• ridge: autre effet relief;
• inset: effet 3D global enfoncé;
• outset: effet 3D global surélevé.

Ainsi, pour avoir une bordure bleue, en tirets, épaisse de 3 pixels autour de mes titres, je vais écrire:

1 h1 2 { 3 border: 3px blue dashed; 4 }

La figure suivante vous présente les différents styles de bordures que vous pouvez utiliser.

Haut

En haut, à droite, à gauche, en bas…

Qui a dit que vous étiez obligés d'appliquer la même bordure aux quatre côtés de votre élément ?
Taratata, si vous voulez mettre des bordures différentes en fonction du côté (haut, bas, gauche ou droite), vous pouvez le faire sans problème.
Dans ce cas, vous devrez utiliser ces quatre propriétés:

• border-top: bordure du haut;
• border-bottom: bordure du bas;
• border-left: bordure de gauche;
• border-right: bordure de droite.

À savoir!! Il existe aussi des équivalents pour paramétrer chaque détail de la bordure si vous le désirez: border-top-width pour modifier l'épaisseur de la bordure du haut, border-top-color pour la couleur du haut, etc.

Ce sont aussi des super-propriétés, elles fonctionnent comme border mais ne s'appliquent donc qu'à un seul côté.

Pour ajouter une bordure uniquement à gauche et à droite des paragraphes, on écrira donc:

1 p 2 { 3 border-left: 2px solid black; 4 border-right: 2px solid black; 5 }

À savoir!! On peut modifier les bordures de n'importe quel type d'élément sur la page. Nous l'avons fait ici sur les paragraphes mais on peut aussi modifier la bordure des images, des textes importants comme <strong> , etc.

Haut

Bordures arrondies

Les bordures arrondies, c'est un peu le Saint Graal attendu par les webmasters depuis des millénaires (ou presque). Depuis que CSS3 est arrivé, il est enfin possible d'en créer facilement !

La propriété border-radius va nous permettre d'arrondir facilement les angles de n'importe quel élément. Il suffit d'indiquer la taille (« l'importance ») de l'arrondi en pixels:

1 p 2 { 3 border-radius: 10px; 4 }

L'arrondi se voit notamment si l'élément a des bordures, comme sur la figure suivante.

… ou s'il a une couleur de fond, comme sur la figure suivante.

On peut aussi préciser la forme de l'arrondi pour chaque coin. Dans ce cas, indiquez quatre valeurs:

1 p 2 { 3 border-radius: 10px 5px 10px 5px; 4 }

Les valeurs correspondent aux angles suivants dans cet ordre:

1. en haut à gauche;
2. en haut à droite;
3. en bas à droite;
4. en bas à gauche.

Enfin, il est possible d'affiner l'arrondi de nos angles en créant des courbes elliptiques figure suivante).
Dans ce cas, il faut indiquer deux valeurs séparées par une barre oblique (slash, caractère /). Le mieux est certainement de tester pour voir l'effet:

1 p 2 { 3 border-radius: 20px / 10px; 4 }

Haut

Les ombres

Les ombres font partie des nouveautés récentes proposées par CSS3. Aujourd'hui, il suffit d'une seule ligne de CSS pour ajouter des ombres dans une page!

Nous allons ici découvrir deux types d'ombres:

• les ombres des boîtes;
• les ombres du texte.

Haut

box-shadow: les ombres des boîtes

La propriétébox-shadows'applique à tout le bloc et prend quatre valeurs dans l'ordre suivant:

1. le décalage horizontal de l'ombre;
2. le décalage vertical de l'ombre;
3. l'adoucissement du dégradé;
4. la couleur de l'ombre.

Par exemple, pour une ombre noire de 6 pixels, sans adoucissement, on écrira:

1 p 2 { 3 box-shadow: 6px 6px 0px black; 4 }

Cela donne le résultat illustré à la figure suivante (j'ai ajouté une bordure au paragraphe pour qu'on voie mieux l'effet).

Ajoutons un adoucissement grâce au troisième paramètre (figure suivante).
L'adoucissement peut être faible (inférieur au décalage), normal (égal au décalage) ou élevé (supérieur au décalage). Essayons un décalage normal:

1 p 2 { 3 box-shadow: 6px 6px 6px black; 4 }

On peut aussi rajouter une cinquième valeur facultative :inset. Dans ce cas, l'ombre sera placée à l'intérieur du bloc, pour donner un effet enfoncé:

1 p 2 { 3 box-shadow: 6px 6px 6px black inset; 4 }

Je vous laisse essayer de voir le résultat.

Haut

text-shadow: l'ombre du texte

Avec text-shadow, vous pouvez ajouter une ombre directement sur les lettres de votre texte ! Les valeurs fonctionnent exactement de la même façon que box-shadow: décalage, adoucissement et couleur.

1 p 2 { 3 text-shadow: 2px 2px 4px black; 4 }

Le résultat est illustré à la figure suivante.

Haut