• 15 hours
  • Easy

Free online content available in this course.

Paperback available in this course

course.header.alt.is_certifying

Got it!

Last updated on 11/4/24

Créez des bordures et des ombres

Créez des bordures avec la propriété CSS  border

Le CSS offre un large choix de 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  dans le chapitre précédent ? Cela fonctionne sur le même principe : on va pouvoir combiner plusieurs valeurs.

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

  1. La largeur que l'on définit avec une valeur en pixels (comme 2px).

  2. La couleur que l'on indique avec un nom de couleur, une valeur hexadécimale, ou une valeur RGB.

  3. Le type de bordure qui peut être solid (un trait simple),  double (un double trait), dotted (un trait en pointillés), dashed (un trait en tirets), ou autre. Vous avez un large panel d'options :

On voit 4 carrés avec chacun un type de bordure différent : simple trait, double trait, pointillés et tirets.

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 :

  1. border-top  : bordure du haut.

  2. border-bottom  : bordure du bas.

  3. border-left  : bordure de gauche.

  4. border-right  : bordure de droite.

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 elles ne s'appliquent donc qu'à un seul côté.

On pourrait faire une compilation de nos éléments juste au-dessus.

On écrit dans le fichier HTML :

<p class="element">Élément</p>

Puis dans le CSS:

.element {
    border-top: 3px #EB5353 dotted;
    border-right: 3px #F9D923 double;
    border-bottom: 3px #36AE7C dashed;
    border-left: 3px #187498 solid;
}

Ce qui nous donnerait :

La bordure du haut est un trait rouge en pointillés, la bordure de gauche est un simple trait bleu, la bordure de droite est un double trait jaune et la bordure du bas un un trait vert en tirets.
L'élément a 4 styles de bordures différents

Bon ce n'est pas forcément du plus bel effet, mais c'était pour la démonstration !

On pourrait très bien avoir un élément qui n'aurait un bord que d'un seul côté. Pour cela, il suffit de ne déclarer qu'une seule propriété. Ici, on utilise uniquement la propriété  border-left  :

.element {
    font-size: 25px;
    background-color: skyblue;
    border-left: 5px #187498 solid;
    padding: 100px;
}

Ce qui donne :

Le carré n'a qu'une seule bordure, elle est à gauche.
L'élément a une bordure à gauche

Arrondissez vos angles avec  border-radius

La propriété CSS border-radius permet d'arrondir les angles de n'importe quel élément. Il suffit d'indiquer la taille de l'arrondi en pixels :

.element {
    font-size: 25px;
    background-color: skyblue;
    border-radius: 10px;
    padding: 100px;
}

Ce qui donne :

Les 4 coins de l'élément sont arrondis avec un radius de 10px. Sans cela ils seraient par défaut en angle droit.
L'élément a des coins arrondis

Dans ce cas, indiquez les quatre valeurs correspondant aux angles dans la propriété  border-radius  , dans cet ordre :

  1. En haut à gauche.

  2. En haut à droite.

  3. En bas à droite.

  4. En bas à gauche.

.element {
    font-size: 25px;
    background-color: skyblue;
    border-radius: 10px 30px 0px 90px;
    padding: 100px;
}

Ce qui donne :

L'angle en haut à gauche est un peu arrondi avec un radius de 10 pixels, celui en haut à droit est arrondi avec un radius de 30 pixels, celui en bas à droite n'est pas arrondi car il a un radius de 0 pixel et celui en bas à gauche est extrêmement arr
L'élément a des radius de différentes valeurs pour chaque angle

Il est même possible de créer des courbes elliptiques avec  border-radius .Pour cela, il faut indiquer deux valeurs séparées par une barre oblique (slash) :  /. Mais le rendu est assez dur à anticiper. Il vaut mieux utiliser des outils de visualisation comme  Fancy Border Radius du rendu final :

Capture d'écran de l'outil de visualisation pour créer des bordures elliptiques. Grâce à des poignées, on peut choisir à la main l'allure des courbes. Il suffit ensuite de copier et coller les valeurs générées automatiquement par cet outil.
Des courbes elliptiques sur un élément

Il ne reste plus qu'à cliquer sur "copy" pour reporter la valeur du border-radius générée automatiquement (sans oublier le point virgule  ;  à la fin de la ligne) dans notre code :

.element {
    font-size: 25px;
    background-color: skyblue;
    border-radius: 30% 70% 70% 30% / 30% 58% 42% 70%;
    padding: 100px;
}

Et voilà le résultat ! De quoi faire des éléments (boutons, encarts, blocs…) uniques sur votre site web :

Avec la propriété border-radius, on peut créer des formes elliptiques en copiant et collant des valeurs générées automatiquement grâce à des outils en ligne. Le résultat est unique !
L'élément a des courbes elliptiques

Ajoutez une ombre portée avec la propriété CSS  box-shadow

Les ombres donnent des effets de profondeur intéressants sur une page web. C'est particulièrement utile sur les boutons d'un site par exemple. Du fait de l'impression de relief, un bouton avec une ombre portée indique visuellement aux visiteurs du site qu'il est "cliquable".

La propriété CSS 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 :

.element {
    font-size: 25px;
    background-color: skyblue;
    border-radius: 10px;
    box-shadow: 6px 6px 0px rgba(0, 0, 0);
    padding: 100px;

Ce qui donne :

On voit que l'ombre portée horizontalement et verticalement est très dure et contrastée : elle apparaît complètement noire, ce qui ne fait pas tellement penser à une ombre.
L'élément a une ombre portée à fort contraste

On obtient une ombre noire, portée horizontalement et verticalement, de 6 pixels, sans adoucissement. Ce qui n'est pas forcément l'effet recherché… Ajoutons donc un adoucissement grâce au troisième paramètre de la propriété  box-shadow  , tout en jouant sur l'opacité de la couleur avec RGBA :

.element {
    font-size: 25px;
    background-color: skyblue;
    border-radius: 10px;
    box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.5);
    padding: 100px;
}

Ce qui donne :

Grace au niveau d'opacité que l'on a baissé grâce à la valeur de la couleur en rgba, l’effet d'ombre paraît plus réaliste.
L’effet d'ombre est plus esthétique

Ajoutez une ombre à un texte avec  text-shadow

text-shadow permet d'ajouter une ombre sur les lettres de votre texte. Effet vintage garanti !

Les valeurs fonctionnent exactement de la même façon que  box-shadow :

  1. décalage horizontal,

  2. décalage vertical,

  3. adoucissement,

  4. et couleur.

Voyez ce que ça donne dans le morceau de code juste en dessous :

h1 {
    font-size: 50px;
    text-shadow: 3px 3px 0px rgba(0,0,0,0.2);
    padding: 100px;
}

Et voyez ce que ça nous donne :

L'ombre est portée horizontalement vers la droite et verticalement vers le bas, créant un effet de relief sur le texte.
Le texte a une ombre portée

À vous de jouer !

C’est maintenant le moment de mettre en pratique ce que vous venez d’apprendre, dans le projet de Robbie Lens. Pour cela, vous allez :

  • ajouter des arrondis sur les liens "Un projet ? Écrivez-moi" et "Voir mon portfolio", d'une valeur de  50px  (le rendu n'est pas très beau, mais ne vous inquiétez pas, nous allons l'améliorer au fil des chapitres) ;

  • créer une  div , sur la page À propos, qui englobe le paragraphe et la liste de compétences de Robbie Lens ; lui ajouter une bordure à droite et en bas, de  1px  d'épaisseur et de la couleur  #8e86b5  .

En résumé

  • On peut appliquer une bordure à un élément avec la super-propriété CSS  border. Il faut indiquer la largeur de la bordure, sa couleur et son type (simple, double, pointillés, tirets).

  • On peut arrondir les bordures avec la propriété CSS  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.

C’est grisant, n’est-ce pas ? Vous allez voir, dans le prochain chapitre, on va encore plus s’amuser en créant des apparences dynamiques en fonction des actions de l’utilisateur. Allons-y !

Example of certificate of achievement
Example of certificate of achievement