Les bordures et les ombres

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 :
  • La largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme2px).
  • 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)).
  • 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 :
h1 { border: 3px blue dashed; }

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.
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 :
p
{
border-left: 2px solid black;
border-right: 2px solid black;
}
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 :
p
{
border-radius: 10px;
}
On peut aussi préciser la forme de l'arrondi pour chaque coin. Dans ce cas, indiquez quatre valeurs :
p
{
border-radius: 10px 5px 10px 5px;
}
Les valeurs correspondent aux angles suivants dans cet ordre :
  • en haut à gauche ;
  • en haut à droite ;
  • en bas à droite ;
  • en bas à gauche.
Nous allons ici découvrir deux types d'ombres :
  • les ombres des boîtes ;
  • les ombres du texte.

box-shadow: les ombres des boîtes

La propriété box-shadow s'applique à tout le bloc et prend quatre valeurs dans l'ordre suivant :
  • le décalage horizontal de l'ombre ;
  • le décalage vertical de l'ombre ;
  • l'adoucissement du dégradé ;
  • la couleur de l'ombre.
Par exemple, pour une ombre noire de 6 pixels, sans adoucissement, on écrira :
p
{
box-shadow: 6px 6px 0px black;
}
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 :
p
{
box-shadow: 6px 6px 6px black;
}
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é :
p
{
box-shadow: 6px 6px 6px black inset;
}

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.
p
{
text-shadow: 2px 2px 4px black;
}
  • On peut appliquer une bordure à un élément avec la propriété border. Il faut indiquer la largeur de la bordure, sa couleur et son type (trait continu, pointillés…).
  • On peut arrondir les bordures avec border-radius.
  • On peut ajouter une ombre aux blocs de texte avec box-shadow. On doit indiquer le décalage vertical et horizontal de l'ombre, son niveau d'adoucissement et sa couleur.
  • Le texte peut lui aussi avoir une ombre avec text-shadow.

© 2018