Cours IT Bases CSS 024_Bordures, Contour, Ombres

Bordures

Les bordures (Borders) en CSS sont des propriétés de style importantes utilisées pour créer des limites visuelles autour des éléments.

Propriétés de bordure

• border-width : Définit la largeur de la bordure.
• border-style : Définit le style de la bordure (solid : ligne continue, dotted : ligne pointillée, dashed : ligne tiretée, double : double ligne, groove : rainure, ridge : relief, inset : enfoncé, outset : saillant, none : sans bordure).
• border-color : Définit la couleur de la bordure.

Exemple :

1
    .example1 {
2
        border-width: 2px;
3
        border-style: solid;
4
        border-color: #333;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border: 2px solid #333;
10
        /* Propriété raccourcie */
11
        width: 200px;
12
        height: 200px;
13
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Effet :

Direction de la bordure

border-top, border-right, border-bottom, border-left : Définissent respectivement la bordure supérieure, droite, inférieure et gauche.

Exemple :

1
    .example1 {
2
        border-top: 2px solid #333;
3
        border-right: 1px dashed #555;
4
        border-bottom: 3px solid #777;
5
        border-left: 1px dotted #999;
6
        width: 200px;
7
        height: 200px;
8
    }

1
    <div class="example1"></div>

Effet :

Coins arrondis

border-radius : Définit les coins arrondis de la bordure.

Exemple :

1
    .example1 {
2
        border-radius: 10px;
3
        /* Tous les coins ont un rayon de 10px */
4
        border: 1px solid black;
5
        width: 200px;
6
        height: 200px;
7
    }
8
    .example2 {
9
        border-top-left-radius: 10px;
10
        border-top-right-radius: 20px;
11
        border-bottom-left-radius: 30px;
12
        border-bottom-right-radius: 40px;
13
        border: 1px solid black;
14
        width: 200px;
15
        height: 200px;
16
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Effet :

Ombres

L’ombre (box-shadow) en CSS est une propriété qui crée des effets d’ombre autour des éléments. Les ombres peuvent être utilisées pour renforcer l’effet de profondeur des éléments, rendant la page plus vivante. En ajoutant le mot-clé inset avant la valeur de box-shadow, on peut créer des ombres internes. Plusieurs effets d’ombre peuvent être ajoutés en séparant plusieurs valeurs de box-shadow par des virgules. Si un élément a des coins arrondis, l’ombre sera appliquée en conséquence sur les coins arrondis.

Les ombres peuvent avoir plusieurs paramètres, incluant le décalage horizontal, le décalage vertical, le rayon de flou, la couleur de l’ombre, etc.

• Décalage horizontal (horizontal offset) : Le décalage horizontal de l’ombre.
• Décalage vertical (vertical offset) : Le décalage vertical de l’ombre.
• Rayon de flou (blur radius) : Le degré de flou de l’ombre.
• Rayon d’expansion (spread radius) : La taille de l’ombre, les valeurs positives l’agrandissent, les valeurs négatives la réduisent.
• Couleur de l’ombre : La couleur de l’ombre.

Exemple :

1
    .base {
2
        border: 1px solid black;
3
        width: 200px;
4
        height: 200px;
5
    }
6
    .example1 {
7
        box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
8
    }
9
    .example2 {
10
        box-shadow: inset 3px 3px 5px rgba(0, 0, 0, 0.3);
11
    }

1
    <div class="base example1"></div>
2
    <br>
3
    <div class="base example2"></div>

Effet :

Contour

Le contour (outline) en CSS est une bordure visible qui peut être ajoutée autour des éléments, généralement utilisée pour mettre en évidence le bord extérieur des éléments. Les contours n’affectent pas la mise en page et ne changent pas la taille ni la position de l’élément. Les contours sont couramment utilisés pour la visualisation du focus sur les éléments de formulaire, l’état actif des liens, etc.

• outline-color : Définit la couleur du contour.
• outline-style : Définit le style du contour.
• outline-width : Définit la largeur du contour.
• outline-offset : Définit le décalage du contour, l’espacement entre le contour et la bordure.

Exemple :

1
    .example1 {
2
        outline-color: blue;
3
        outline-style: dotted;
4
        outline-width: 2px;
5
        outline-offset: 5px;
6
        border: 1px solid red;
7
        width: 200px;
8
        height: 200px;
9
    }
10
    .example2 {
11
        outline: 2px solid green;
12
        border: 1px solid red;
13
        width: 200px;
14
        height: 200px;
15
    }

1
    <div class="example1"></div>
2
    <br>
3
    <div class="example2"></div>

Effet :