Bordures et ombres en CSS

Pour continuer sur les effets de style en CSS, il est logique après avoir vu les couleurs, le fond et la transparence, d’étudier les propriétés de bordures et d’ombres. Ce sont des propriétés qui peuvent aussi bien s’appliquer sur le texte que sur des blocs constituants notre page Web.
Si vous n’avez pas de connaissances sur les propriétés qui permettent d’ajouter de la couleur à une page Web, je vous recommande de lire ce cours en cliquant ici.

Les Bordures

Le CSS propose une large palette de propriété afin de personnaliser les bordures de votre page. Par exemple, nous avons border-width pour l’épaisseur ou border-color pour la couleur…

Tout comme pour le fond, il existe cependant une propriété plus générale dans laquelle on peut indiquer les différentes valeurs de ces effets spécifiques. Il s’agit de border tout simplement. Grâce à border indiquera donc en une fois l’épaisseur de la bordure, la couleur et le type de bordure (border-style).

1. Largeur : première valeur à indiquer, de préférence en pixel, ce sera la largeur de votre bordure ;
2. Couleur : deuxième valeur à indiquer, ce sera la couleur de votre bordure, choisissez la méthode de notation que vous préférez dans le cours précédent ;
3. Style de bordure : le CSS vous offre un large choix de type de bordure, choisissez celui qui vous convient le mieux. Voilà la liste des différentes valeurs et leurs effets sur les bordures :
   • none : valeur par défaut, pas de bordure ;
   • solid : trait simple ;
   • double : trait double ;
   • dotted : traits pointillés ;
   • dashed : tirets ;
   • groove : trait en relief ;
   • ridge : un autre trait en relief ;
   • inset : effet 3D enfoncé ;
   • outset : effet 3D surélevé.

Par exemple, si je veux obtenir une bordure verte en trait double avec une épaisseur de 5 pixels pour mon paragraphe, je vais taper :

 

Bordures de côté

Pour encore plus de style, vous pouvez appliquer des propriétés différentes à chacune de vos bordures ! Au lieu d’utiliser la propriété générale border qui s’applique aux 4 côtés, il suffit d’utiliser la propriété du côté concerné :

• border-top pour la bordure du haut ;
• border-bottom pour la bordure du bas ;
• border-left pour la bordure de gauche ;
• border-right pour la bordure de droit.

Ce sont aussi des propriétés générales, auxquelles vous pouvez donner une largeur, une couleur et un style de trait.

Vous pouvez aussi utiliser les équivalences spécifiques à chaque propriété pour détailler une seule propriété d’un côté spécifique : par exemple, border-bottom-color pour donner une couleur à la bordure du bas. La valeur de la propriété spécifique prendra la priorité sur la valeur de la propriété générale. Ainsi, si je désire faire une bordure de 20 pixel, verte avec un trait double, mais que je veux que le côté du bas soit en bleu, je vais coder ceci dans mon éditeur :

 

 

Bordures arrondies

Attendue avec impatience par les développeurs Web, la propriété border-radius est arrivée avec le CSS 3 et a permis enfin de créer très facilement des angles arrondis. En effet, il suffit d’indiquer en pixel la taille de l’arrondi. Bien entendu, pour être visible, il est nécessaire d’avoir créé au préalable la bordure concernée. Reprenons notre exemple précédent pour lui appliquer une bordure de 20 pixels, je vais donc coder :

Cependant, il est aussi possible de donner une bordure spécifique à chacun des coins. Il suffit en effet d’indiquer 4 valeurs en pixel, en les séparant d’un espace. La première valeur correspondra au coin supérieur gauche, la deuxième au coin supérieur droit. La troisième au coin inférieur droit et la dernière à l’inférieur gauche.

 

Les Ombres

Les ombres sont aussi une des nombreuses nouveautés du CSS 3. Avec une seule ligne de code vous pouvez ajouter des ombres dans votre bloc ou dans votre texte.

Les ombres des boîtes

La propriété pour créer des ombres sur un bloc est box-shadow et prendra 4 valeurs.

• la première pour décaler l’ombre horizontalement;
• la deuxième pour décaler l’ombre verticalement ;
• la troisième pour adoucir le dégradé de l’ombre;
• la quatrième pour donner la couleur de l’ombre.

Ainsi, si je veux appliquer à mon paragraphe une ombre de 10 pixels vers le bas et à droite, avec un adoucissement de 5px et rouge, je devrai coder :

Je vous conseille aussi de tester sans adoucissement (0px), vous constaterez que l’effet est vraiment moins beau. Il est possible également de faire l’effet d’ombre vers l’intérieur du bloc. Pour cela, vous avez simplement à ajouter une cinquième valeur : inset.

L’ombre du texte

Avec la propriété text-shadow, vous avez la possibilité d’ajouter directement une ombre sur les lettres de votre texte. De la même manière que box-shadow, vous avez les 2 valeurs de décalage, l’adoucissement et la couleur. Ainsi, votre code devra être de ce format-là :

 

Pour résumer

• Avec la propriété border, on peut donner une bordure à un élément HTML, en lui donnant trois valeurs : la largeur (en pixel), la couleur et le type de trait.
• Grace à la propriété border-radius, on peut arrondir les angles, en lui donnant une valeur en pixel.
• En utilisant la propriété box-shadow, on peut donner un effet d’ombre aux différents blocs de la page, on indiquera le décalage vertical et horizontal en pixel, un niveau d’adoucissement aussi en pixel et sa couleur.
• On peut aussi donner de l’ombre au texte de la même manière en utilisant text-shadow au lieu de box-shadow.

J’espère que ce cours vous a plu, laisser un commentaire si vous avez une question et abonnez-vous pour recevoir les derniers articles, JB.