Le CSS vous offre un large choix de bordures pour décorer votre page. Avoir des bordures pour délimiter une zone, mettre en relief une information ou pour entourer les cellules d'un tableau, est très répandu sur les pages web. Il est possible d'ajouter une bordure à nos balises. La propriété permettant d'obtenir une bordure en CSS est tout simplement border. Petit problème : entre la théorie de rendu et la réalité, il y a un petit fossé. Avec MSIE6… Ensuite, tout est permis, ou presque.
La super-propriété border et sa syntaxe
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 : indiquez la largeur de votre bordure en pixels (comme 2px).
- La couleur : c'est la couleur de votre bordure. La couleur de base d'une bordure est un noir #000000. Vous pouvez l'indiquer avec un nom de couleur, une valeur hexadécimale, ou une valeur RGB.
- Le type de bordure : là, vous avez le choix. Votre bordure peut être un simple trait (solid), un double trait (double), des pointillés (dotted), ou encore des tirets (dashed), etc.
Et contrairement à ce que je lu je ne sais plus où, on peut déclarer les couleurs avant les tailles, les tailles après les styles…
Gestion des bordures par côté
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. On peut modifier les bordures de n'importe quel type d'élément sur la page.
Il est même possible d'avoir un élément qui n'aurait un bord que d'un seul côté. Comme vous pouvez le voir, la bordure de cette balise n'a rien à voir avec ce que l'on a déjà vu. Ici aussi, il possible de donner une valeur différente aux 4 bordures. 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 !
Arrondir les angles avec border-radius
Les bordures peuvent à présent, grâce aux CSS3, bénéficier de coins arrondis. La propriété CSS border-radius permet d'arrondir les angles de n'importe quel élément. Il est possible de définir un angle arrondi ou radius à nos bordures.
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. De quoi faire des éléments (boutons, encarts, blocs…) uniques sur votre site web.
Ombres portées : box-shadow et text-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. Ajoutez une ombre portée avec la propriété CSS box-shadow. On doit indiquer le décalage vertical et horizontal de l'ombre, son niveau d'adoucissement et sa couleur. On obtient une ombre noire, portée horizontalement et verticalement, de 6 pixels, sans adoucissement. L’effet d'ombre est plus esthétique avec un adoucissement approprié.
De son côté, text-shadow permet d'ajouter une ombre sur les lettres de votre texte. C'est une technique élégante pour faire ressortir un titre ou un paragraphe important sur un fond contrasté.
25 - CSS de A à Z - Les ombres
Personnalisation des listes et des puces
Lorsqu'on travaille sur des listes, comme pour un menu très simple composé avec les éléments d'une liste, on souhaite parfois ajouter une bordure fine horizontale en pointillé entre chaque élément de ce menu, jusqu'à la page principale du milieu. Il faudra aussi une espace régulier entre chaque entrée du menu et cette bordure. Je pourrais bien sûr utiliser un tableau et des cellules et la fonction Border. J'ai essayé mais ma mise en page est changée.
Pour personnaliser les puces elles-mêmes :
- Positionnement : La propriété
list-style-positionpermet de définir la place de la puce dans la liste : à l’intérieur de la liste (inside) ou à l’extérieur (outside). - Style de puce : La propriété
list-style-typepermet de définir le style de la puce. Dans le cadre d’une liste non ordonnée, nous avons 3 possibilités : disc, circle et square. - Pseudo-éléments : Il existe une autre méthode pour faire comme si vous mettiez une image mais sans en mettre, vous pouvez utiliser un pseudo-élément avec la fonction ::before.
Utilisation des unités relatives (vw, vh)
Dans la conception moderne, les unités jouent un rôle crucial pour la réactivité. Les vw (viewport width) permettent de définir un pourcentage de la largeur du navigateur. Les vh (viewport height) permettent de définir un pourcentage de la hauteur du navigateur. Ces unités sont particulièrement utiles pour dimensionner des blocs ou des bordures de manière fluide, s'adaptant à n'importe quel écran.
Utilisation des images comme bordures
Il est également possible d'aller plus loin que les simples traits. La première étape consiste à définir un border-style. Pour cela, nous allons utiliser la propriété border-image-source qui va spécifier le chemin vers notre image. Maintenant, mon image apparaît bien, mais elle s'affiche très mal (je vous invite à tester de votre côté pour voir le résultat). Cela demande souvent un ajustement précis des propriétés border-image-slice et border-image-repeat pour obtenir un rendu professionnel.
Mise en pratique : Projet Robbie Lens
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.
- 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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Nullam facilisis neque et sem. Proin placerat adipiscing urna. Et contrairement à ce que je lu je ne sais plus où, on peut déclarer les couleurs avant les tailles, les tailles après les styles… Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Nullam facilisis neque et sem. Proin placerat adipiscing urna. Suspendisse potenti. Nullam facilisis neque et sem. Proin placerat adipiscing urna. Suspendisse potenti. Nullam facilisis neque et sem. Proin placerat adipiscing urna. Pour tes liens, il te faut utiliser les différents états de la balise suivants. Enfin, active est l'état très bref lorsqu'on clique sur un lien, entre le début du clic et la fin du clic.
Consultante web freelance, plus de 20 ans d'expérience en webmarketing, mon objectif est de rendre la vie de mes clients plus simple ! Pour chaque problématique étudiée, je partage avec vous le résultat de mon analyse, en espérant que cela vous serve aussi. Ce site utilise Akismet pour réduire les indésirables. Vous avez détecté une faute ou bien un élément incorrect ? N'hésitez pas à vérifier vos déclarations CSS si le rendu ne correspond pas à vos attentes. C’est grisant, n’est-ce pas ?