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 :
La largeur que l'on définit avec une valeur en pixels (comme 2px).
La couleur que l'on indique avec un nom de couleur, une valeur hexadécimale, ou une valeur RGB.
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.](https://user.oc-static.com/upload/2022/11/10/16680879855007_Capture%20d%E2%80%99e%CC%81cran%202022-11-10%20a%CC%80%2014.45.49.png)
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.
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.](https://user.oc-static.com/upload/2022/11/10/16680926230828_Capture%20d%E2%80%99e%CC%81cran%202022-11-10%20a%CC%80%2016.03.24.png)
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.](https://user.oc-static.com/upload/2022/11/10/16680913024116_Capture%20d%E2%80%99e%CC%81cran%202022-11-10%20a%CC%80%2015.41.21.png)
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.](https://user.oc-static.com/upload/2022/11/10/16680913527207_Capture%20d%E2%80%99e%CC%81cran%202022-11-10%20a%CC%80%2015.42.12.png)
Dans ce cas, indiquez les quatre valeurs correspondant aux angles dans la propriété border-radius
, dans cet ordre :
En haut à gauche.
En haut à droite.
En bas à droite.
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](https://user.oc-static.com/upload/2022/11/10/16680914091127_Capture%20d%E2%80%99e%CC%81cran%202022-11-10%20a%CC%80%2015.43.10.png)
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.](https://user.oc-static.com/upload/2022/11/10/16680861196707_Capture%20d%E2%80%99e%CC%81cran%202022-11-10%20a%CC%80%2014.14.16.png)
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 !](https://user.oc-static.com/upload/2022/11/10/16680945517536_Capture%20d%E2%80%99e%CC%81cran%202022-11-10%20a%CC%80%2016.35.29.png)
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 :
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 :
.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.](https://user.oc-static.com/upload/2022/11/10/16680914489633_Capture%20d%E2%80%99e%CC%81cran%202022-11-10%20a%CC%80%2015.43.50.png)
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.](https://user.oc-static.com/upload/2022/11/10/16680914912713_Capture%20d%E2%80%99e%CC%81cran%202022-11-10%20a%CC%80%2015.44.28.png)
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
:
décalage horizontal,
décalage vertical,
adoucissement,
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.](https://user.oc-static.com/upload/2022/11/10/16680916203151_Capture%20d%E2%80%99e%CC%81cran%202022-11-10%20a%CC%80%2015.46.28.png)
À 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, de1px
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 !