Les bordures constituent un cadre qui entoure des objets tels que les images, les cellules d'un tableau ou les conteneurs. Elles sont fondamentales pour structurer et embellir le contenu web. Le langage CSS offre une multitude de propriétés pour les personnaliser, allant de la simple ligne rectangulaire aux formes plus complexes et interactives. Ce tutoriel explore en détail les propriétés CSS relatives aux bordures, aux formes, aux ombres et aux effets visuels, afin d'enrichir l'esthétique de vos pages web.
Les Propriétés Fondamentales des Bordures
Pour définir l'apparence de base d'une bordure, plusieurs propriétés CSS sont à votre disposition. Ces propriétés peuvent être combinées entre elles pour obtenir des résultats précis.
border-color : La Couleur de la Bordure
La propriété border-color permet de définir la couleur de la bordure. Vous pouvez spécifier le nom de la couleur en anglais, une valeur hexadécimale (par exemple, #FF0000 pour le rouge), ou une valeur RGB (par exemple, rgb(255, 0, 0)).
border-width : L'Épaisseur de la Bordure
La propriété border-width permet de définir l'épaisseur de la bordure. Elle est généralement exprimée en pixels (l'unité la plus appropriée pour cette mesure), par exemple 2px pour une épaisseur de deux pixels.
border-style : Le Style du Trait de la Bordure
La propriété border-style permet de définir le style de la bordure. Le type de bordure d’un élément CSS est fixé par cette propriété. Parmi les options disponibles, on trouve :
solid: un trait simple.double: un double trait.dotted: un trait en pointillés.dashed: un trait en tirets.- Et bien d'autres.
border : La Super-Propriété Raccourcie
La propriété border impose la même couleur, la même épaisseur et le même style de trait aux quatre côtés d’un bloc. Elle permet de combiner jusqu'à trois valeurs : la largeur (par exemple, 2px), la couleur (un nom, une valeur hexadécimale ou RGB) et le type de bordure (par exemple, solid). Cela rend le code plus concis et plus facile à lire. Par exemple, border: 2px solid red; appliquera une bordure rouge de 2 pixels d'épaisseur et de style solide à tous les côtés.
Il est important de noter l'ordre dans lequel les propriétés sont appliquées. Si vous définissez une propriété spécifique comme border-left puis utilisez la super-propriété border, cette dernière annulera l'effet de border-left car la règle border s’applique aux quatre côtés de la bordure. Les deux lignes de code, tapées dans l’ordre inverse, ne produiront pas le même résultat.
border-image : Bordures à Partir d'Images
Comme nous pouvons le remarquer, nous jouons avec les propriétés relatives aux bordures, principalement border-image. Il est important de spécifier une taille, un style et une couleur à notre border de base, sans quoi cette astuce ne fonctionne tout simplement pas. Pour la rendre invisible, il suffit de lui attribuer la « couleur » transparente. Cette propriété offre des possibilités créatives infinies pour des bordures non conventionnelles.
Arrondir les Angles avec border-radius
La version 3 de CSS a introduit une nouvelle propriété qui s'applique aux bordures : border-radius. Avant CSS3, les objets susceptibles d’accueillir des bordures, comme les cellules d'un tableau, les conteneurs ou les champs de formulaires, étaient de forme rectangulaire avec des coins en angle droit. Désormais, et grâce à CSS3, cela a changé. On peut donc avoir des arrondis qui modifient l'apparence classique.
La propriété border-radius permet d'arrondir les angles de n'importe quel élément. Radius signifie rayon. La propriété border-radius arrondit le coin de l'objet de telle sorte à ce qu'il représente le quart de cercle dont le rayon mesure la valeur attribuée à la propriété.
Par exemple, pour créer un cercle parfait à partir d'une balise <div> carrée, nous avons déclaré un rayon égal à la moitié de la largeur et de la hauteur de la balise <div>. On a donc appliqué quatre quarts de cercle sur tous les coins. Réunis, ils forment un cercle parfait.
Il est possible d'appliquer des valeurs différentes à chaque angle. A, B, C et D représentent respectivement les valeurs des arrondis appliquées aux angles : supérieur gauche, supérieur droit, inférieur droit et inférieur gauche. Cela permet d'obtenir des éléments avec 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. De quoi faire des éléments (boutons, encarts, blocs…) uniques sur votre site web.
Ajouter des Ombres pour la Profondeur
Les ombres confèrent des effets de profondeur intéressants sur une page web. C'est particulièrement utile sur les boutons d'un site, par exemple.
box-shadow : Ombre Portée pour les Blocs
La propriété CSS box-shadow permet d'ajouter une ombre portée aux blocs de texte. On doit indiquer le décalage vertical et horizontal de l'ombre, son niveau d'adoucissement et sa couleur.
Par exemple, box-shadow: 6px 6px 0 black; donnerait un élément avec une ombre noire, portée horizontalement et verticalement de 6 pixels, sans adoucissement. En ajoutant une valeur de flou (blur), comme dans box-shadow: 6px 6px 6px black;, l’effet d'ombre est plus esthétique, car il est adouci. Un élément a une ombre portée à fort contraste avec des valeurs plus élevées.
text-shadow : Ombre pour le Texte
La propriété text-shadow permet d'ajouter une ombre sur les lettres de votre texte. Comme pour box-shadow, vous pouvez spécifier le décalage, le flou et la couleur de l'ombre pour le texte.
Créer des Formes et Effets Spéciaux
Au-delà des bordures et des ombres classiques, CSS offre des techniques pour créer des formes non rectangulaires et des effets visuels dynamiques.
Formes Avancées avec clip-path
Vous en avez marre que vos photos soient affichées basiquement, en simples rectangles ? Nous pouvons bien évidemment créer des formes plus compliquées. Cependant, cela peut vite devenir fastidieux. Heureusement, il existe un générateur de clip-path. Cette propriété permet de découper un élément en une forme arbitraire, ouvrant la voie à des designs très créatifs. Compatibilité navigateur : fonctionne sur tous les navigateurs récents, sauf Microsoft Edge.
Effets de Survol Dynamiques avec animation et hover
Pour indiquer aux utilisateurs qu’ils peuvent interagir avec un élément, il est courant d’ajouter un effet lorsque celui-ci est survolé. Nous pouvons par exemple inverser les couleurs d’un bouton, souligner progressivement un texte important ou encore faire vibrer un élément. Pour ce faire, nous allons utiliser la propriété CSS animation. Celle-ci sera enclenchée au survol de notre image grâce à la pseudo-classe hover. Nous allons lui définir un temps de 4 secondes. Nous pouvons jouer avec les différentes valeurs de transform suivant l’effet de vibration voulu. Compatibilité navigateur : fonctionne sur tous les navigateurs récents.
Cours Projet Html Css N°13 Carte animation transform css ? Animer une carte au survol html css.
Effets de Flou sur les Images avec filter
Cette astuce consiste à ajouter un effet de flou sur une image. Ce processus est couramment utilisé lorsque nous désirons afficher du texte par-dessus une image. Pour notre cas, la propriété CSS filter, qui permet d’appliquer des filtres sur des images, nous convient parfaitement. Nous allons l’utiliser en spécifiant comme valeur blur(6px). Plus la valeur du blur est élevée, plus votre image sera floue. Et voilà, le tour est joué !
À présent, si vous désirez afficher du texte par-dessus, il est conseillé d’utiliser une <div> ayant pour background une image, plutôt que de recourir à la balise <img>. Compatibilité navigateur : fonctionne sur tous les navigateurs récents.
Création de Bulles d'Information (Tooltips)
Les bulles d'information sont des éléments interactifs qui fournissent des détails supplémentaires lorsqu'un utilisateur interagit avec un élément, comme le survol.
Pour créer une bulle d'information, nous commençons par créer une <div> qui va inclure le texte pouvant être survolé, ainsi qu’une balise <span> qui elle va faire office de bulle d’informations. Pour créer une bulle style BD, nous allons ajouter un peu de CSS dans .bulle::after. Le bout de code .lien:hover .bulle rappelle que nous pouvons très bien utiliser une pseudo-classe comme sélecteur même si celle-ci ne se trouve pas en dernière position.
Dans l’exemple sur codepen, l’approche est d’utiliser une classe spécifique pour l’info bulle : has-tip. Pour indiquer que l’info-bulle est bien relative (visuellement) à la barre de complétion, nous allons créer avec :before une flèche allant de l’info bulle vers la barre (vers le haut dans notre cas). Pour cela, nous allons jouer avec une astuce des bordures qui nous permet de créer un triangle en deux lignes de CSS. Nous définissons quatre bordures de même taille, type solid, et de couleur transparente sauf celle du bas afin de créer un triangle vers le haut (n’hésitez pas à tester cette technique si elle ne vous est pas familière, c’est très pratique).
L'élément est placé avec transform afin de pouvoir jouer avec cette propriété pendant une animation. Nous commençons par afficher la flèche en modifiant son opacité. N’hésitez pas à déformer, hacker ou adapter cet élément visuel, les possibilités sont vastes. Compatibilité navigateur : fonctionne sur tous navigateurs récents, sauf Safari.
Styliser les Éléments de Texte
Au-delà des blocs, CSS permet également de styliser le texte lui-même de manière créative.
La Lettrine : Mettre en Valeur la Première Lettre
La lettrine est la première lettre d’un paragraphe, elle est bien plus grande que les autres lettres et prend souvent plusieurs lignes. Pour créer cette lettre géante, il nous faut tout d’abord la sélectionner. La pseudo-classe ::first-letter est parfaite pour cela. Afin qu’elle s’intègre parfaitement au texte, nous allons lui ajouter un float: left. Augmentons sa taille avec font-size et changeons sa couleur avec la propriété color.
Généralement, la lettrine accentue le côté solennel, pouvant parfois alourdir l’esthétisme de la page. Dans ces cas-là, il est parfois plus élégant de ne garder du concept que le changement de couleur de la première lettre du paragraphe. Compatibilité navigateur : fonctionne sur tous les navigateurs récents.
Personnaliser la Sélection de Texte avec ::selection
Il suffit d’utiliser la pseudo-classe ::selection et de définir la couleur du texte ainsi que celle du background lorsque le texte est sélectionné. Cela permet une personnalisation poussée de l'expérience utilisateur. Compatibilité navigateur : fonctionne sur tous les navigateurs récents.
Autres Astuces et Bonnes Pratiques
outline vs border
Contrairement à border, outline ne prend pas de place dans le modèle de boîte. Cela signifie qu'un outline ne décalera pas les éléments adjacents et est souvent utilisé pour des indicateurs de focus sans affecter la mise en page.
Gérer les Défilements avec ::webkit-scrollbar
Concernant le CSS, nous pouvons cacher la barre de défilement à l’aide de la pseudo-classe ::-webkit-scrollbar, attention cela ne fonctionne que sur Chrome et Edge. Cette astuce est utile pour des designs minimalistes où les barres de défilement standard peuvent être visuellement encombrantes.
scroll-behavior: smooth pour un Défilement Doux
Grâce à scroll-behavior: smooth, nous allons pouvoir ajouter un effet lisse et doux à notre scroll. Il est également possible de définir cette propriété CSS sur des éléments spécifiques et non sur l’ensemble de notre contenu HTML. Compatibilité navigateur : fonctionne sur tous navigateurs récents, sauf Safari.
Le Modèle de Boîte CSS et l'Impact des Bordures
Dans cette leçon, nous allons explorer comment ajouter des bordures à une boîte en utilisant CSS et comprendre où ces bordures se positionnent. Nous démontrerons l'ajout d'une bordure solide de 10 pixels de couleur grise pour illustrer le concept. Il est crucial de noter que la bordure s'ajoute à l'intérieur de la boîte et non à l'extérieur. Cette information est essentielle pour comprendre comment la largeur totale d'une boîte est calculée dans le modèle de boîte CSS.
Quand des bordures de couleurs différentes se rencontrent, le navigateur crée une jonction en biseau. Il est important de considérer cet aspect lors de la conception de bordures complexes pour s'assurer du rendu désiré.
Compatibilité Navigateur
La compatibilité navigateur est une considération importante lors de l'utilisation de certaines propriétés CSS. Heureusement, la plupart des propriétés liées aux bordures et aux effets visuels mentionnées dans cet article fonctionnent sur tous les navigateurs récents. Des exceptions notables ont été mentionnées pour clip-path (Microsoft Edge), scroll-behavior: smooth (Safari) et ::-webkit-scrollbar (uniquement Chrome et Edge). Toujours tester vos créations sur différents navigateurs pour assurer une expérience utilisateur cohérente.