Last updated on Tuesday, August 30, 2016
  • 20 hours
  • Easy

Free online content available in this course.

Videos available in this course

Paperback available in this course

eBook available in this course.

Certificate of achievement available at the end this course

You can get support and mentoring from a private teacher via videoconference on this course.

Got it!

Les bordures et les ombres

Log in or subscribe to enjoy all this course has to offer!

Nouveau chapitre, nouveau lot de propriétés CSS. Ici, nous allons nous intéresser aux bordures et aux effets d'ombrage que l'on peut appliquer, aussi bien sur le texte que sur les blocs qui constituent notre page.

Nous réutiliserons en particulier nos connaissances sur les couleurs pour choisir la couleur de nos bordures et de nos ombres.

Prêts à vous en mettre une nouvelle fois plein la vue ? 

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 :

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

  • 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;
}

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

Les différents types de bordures
Les différents types de bordures

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;
}

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 :

p
{
    border-radius: 10px;
}

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

Des bordures arrondies
Des bordures arrondies

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

Un fond aux coins arrondis
Un fond aux coins arrondis

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 :

  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 :

p
{
    border-radius: 20px / 10px;
}
Bordures arrondies elliptiques
Bordures arrondies elliptiques

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.

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 :

  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 :

p
{
    box-shadow: 6px 6px 0px black;
}

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

Une ombre sous le paragraphe
Une ombre sous le paragraphe

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;
}
Une ombre adoucie sous le paragraphe
Une ombre adoucie sous le paragraphe

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;
}

Je vous laisse essayer de voir le résultat.

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;
}

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

Texte ombré
Texte ombré

En résumé

  • 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.

Example of certificate of achievement
Example of certificate of achievement