9. Bordures et ombres
 |
| Bordures et ombres - SAGProfProg - HTML CSS - Programmation, Développement web, Développement d'application, Génie Logiciel, Langage de programmation, Application web, Tutos, Informatique, Système d'information, Administration d'application |
Dans le dernier chapitre, nous avons appris à ajuster les couleurs et les arrière-plans de nos éléments.
Mais CSS vous offre beaucoup plus d'options pour styliser votre site et améliorer votre conception Web.
Dans ce chapitre, nous allons examiner plus en détail les bordures et les effets d'ombrage, ces derniers pouvant être appliqués à la fois aux éléments de bloc et au texte qu'ils contiennent.
Tout ce que nous avons appris au cours du chapitre précédent vous sera utile car les bordures et les ombres utilisent les couleurs et fonctionnent de manière quelque peu comparable aux arrière-plans.
Commençons par les bordures.
Les bordures
Le langage CSS vous offre un large choix de propriétés pour décorer vos éléments avec des bordures.
Les trois principales propriétés que nous allons utiliser sont border-width, border-style et border-color qui contrôlent respectivement la largeur, le style et la couleur de vos bordures.
Voici comment ils fonctionnent.
La largeur de la bordure spécifie la taille de votre bordure et prend une valeur de longueur. Je recommande d'utiliser les pixels comme une unité, mais n'hésitez pas à utiliser l'une des unités de longueur que nous avons vues dans le chapitre Formatage du texte.
La couleur de la bordure est la couleur de votre bordure. Comme nous l'avons appris dans le chapitre précédent, vous pouvez soit taper le nom de la couleur (par exemple rouge), son code hexadécimal (par exemple #f00) ou sa valeur RVB (par exemple rgb(255, 0, 0)).
Le style de bordure est un peu différent. Vous disposez de plusieurs options pour personnaliser votre bordure en fonction du type d'effet recherché. Vous pouvez choisir entre une ligne droite, une ligne pointillée ou même une ligne pointillée.
Voici les valeurs qu'il peut prendre :
- solid : une seule ligne continue
- dashed : une ligne pointillée
- dotted: une ligne pointillée
- double : un double trait plein
- groove : une ligne rainurée
- ridge : une ligne striée
- inset : une ligne d'incrustation 3D
- outset : une ligne de départ 3D
- none : pas de bordure (par défaut)
Pour vous donner une idée claire des différents effets, vous pouvez jeter un œil au graphique suivant.
<capturer>
Testons ces nouvelles propriétés.
p
{
border-width: 3px;
border-style: dashed;
border-color: deeppink;
}
Et voici le résultat que vous devriez obtenir dans votre navigateur.
<capturer>
Vous pouvez bien sûr expérimenter ces propriétés en modifiant leurs valeurs autant que vous le souhaitez.
Pourquoi ai-je besoin de trois propriétés pour utiliser les bordures en CSS ? Un seul devrait suffire !
En effet, devoir définir trois propriétés pour les bordures d'un même élément peut rapidement rendre votre code long et redondant.
Heureusement, CSS vous permet d'utiliser la super-propriété border qui combine les trois propriétés que nous venons de découvrir.
Vous souvenez-vous des super-propriétés du chapitre précédent ?
Les super-propriétés ou propriétés abrégées vous permettent de condenser plusieurs propriétés CSS en une seule ligne de code.
Voici comment fonctionne la frontière.
bordure : <border-width> <border-style> <border-color> ;
Si nous devions réviser notre exemple pour utiliser cette nouvelle super-propriété.
p { border: 3px dashed deeppink; }
Ce code produit exactement le même résultat que le plus long montré un peu plus haut.
Bordures individuelles
À partir de maintenant, nous avons appris à ajuster les bordures autour d'un élément HTML donné.
Mais vous avez peut-être remarqué que la super-propriété border affecte chaque côté du bloc rectangulaire.
En réalité, chaque élément possède quatre bordures individuelles pour chaque côté géométrique (haut, bas, gauche, droite).
Vous pouvez les décorer séparément avec ces quatre super-propriétés.
- border-top : la bordure supérieure
- border-right : la bordure droite
- border-bottom : la bordure inférieure
- border-left : la bordure gauche
Bien qu'ils n'appliquent leur style qu'à un seul côté, ce sont des super-propriétés et fonctionnent de la même manière que la bordure.
Voici comment vous pouvez les utiliser.
p
{
border-top: 5px solid deeppink;
border-right: 20px groove red;
border-bottom: 5px solid deepskyblue;
border-left: 20px double orangered;
}
Vous pouvez voir le résultat dans la figure suivante.
<capturer>
Ce sont en fait des super-propriétés.
De la même manière que border combine les propriétés border-width, border-style et border-color, vous pouvez également écrire border-top-width ou border-left-style.
Par exemple.
p
{
border: 5px solid orangered;
border-top-color: deeppink;
border-bottom-style: double;
border-bottom-color: deepskyblue;
}
Voici quelques-uns des résultats que vous pouvez obtenir avec un peu d'imagination.
<capturer>
Vous n'êtes pas obligé d'appliquer une bordure de chaque côté.
Vous pouvez ajouter une seule bordure au-dessus ou au-dessous de votre élément si vous souhaitez utiliser la propriété CSS appropriée.
Bordures arrondies
Les bordures CSS de base sont donc plutôt cool.
Mais depuis l'arrivée de CSS3, vous pouvez aller encore plus loin dans la personnalisation de vos bordures avec la fonction de bordure arrondie.
<capturer>
La propriété dont vous aurez besoin est border-radius et prend entre une et quatre valeurs.
Les valeurs représentent le rayon ("quantité d'arrondi") de chaque coin des bordures ou de l'arrière-plan appartenant à votre élément.
Commençons par le cas le plus simple.
Si vous indiquez une seule valeur, chaque coin aura le même rayon.
border-radius: 15px;
L'effet n'est visible que si vous définissez d'abord une bordure, comme illustré dans l'image ci-dessous.
<capturer>
L'effet arrondi fonctionne sur les bordures mais aussi sur les fonds.
p
{
background-color: orangered;
border-radius: 15px;
}
Voici un exemple.
<capturer>
Cela couvre le cas le plus simple des bordures arrondies en CSS : lorsque chaque coin a la même rondeur.
Il y a bien sûr beaucoup plus d'options.
Plusieurs valeurs de rayon
Vous pouvez également spécifier le rayon de chaque coin.
Dans ce cas, la propriété border-radius prendra quatre valeurs.
border-radius: 10px 25px 10px 25px;
Ces valeurs correspondent aux quatre coins dans cet ordre :
- top left
- top right
- bottom right
- bottom left
Vous devez juste vous rappeler qu'il commence par le coin supérieur gauche et va dans le sens des aiguilles d'une montre.
Une règle simple de CSS : chaque fois que vous avez affaire à des valeurs pour différents points géométriques (ou côtés), l'ordre est toujours une rotation dans le sens des aiguilles d'une montre en commençant généralement par le haut.
Vous n'êtes pas non plus obligé d'entrer exactement quatre valeurs.
Voici les différents scénarios en fonction du nombre de valeurs que vous indiquez.
border-radius: <all corners>;
border-radius: <top-left and bottom-right> <top-right and bottom-left>;
border-radius: <top-left> <top-right and bottom-left> <bottom-right>;
border-radius: <top-left> <top-right> <bottom-left> <bottom-right>;
Si cela semble déroutant, reportez-vous simplement à l'aide visuelle suivante.
<capturer>
En pratique, il suffit de retenir la première et la dernière règle (une et quatre valeurs) car ce sont les plus courantes.
Coins elliptiques
Il nous reste à découvrir une dernière fonctionnalité de la propriété abrégée border-radius : comment créer des coins elliptiques.
Pour créer des courbes elliptiques, vous devez spécifier deux valeurs par coin, séparées par une barre oblique (/).
La première valeur est le rayon horizontal et la seconde est le rayon vertical.
border-radius: 20px / 10px;
Avoir des valeurs différentes est ce qui crée la courbe elliptique.
Vous pouvez voir quelques résultats ci-dessous.
<CAPTURER>
Cela couvre toutes les utilisations des bordures arrondies en CSS.
Boîte ombre
L'ajout d'un effet d'ombrage est l'une des dernières fonctionnalités de CSS3.
Puisqu'une image vaut mille mots, voici un exemple de l'effet que vous pouvez obtenir avec CSS.
<CAPTURER>
Plutôt cool?
Apprenons donc à ajouter cet effet à certains de nos éléments.
La propriété dont vous aurez besoin est box-shadow. Il prend entre deux et cinq valeurs.
Deux est le strict minimum, représentant le décalage horizontal et vertical de l'ombre.
Voici un exemple.
div { box-shadow: 5px 5px; }
C'est l'utilisation la plus simple et la plus directe de cette propriété.
Un décalage horizontal de 5 pixels et un décalage vertical de 5 pixels.
Le résultat de ce code est illustré dans l'exemple A de la figure ci-dessous.
<CAPTURER>
Comme vous l'avez peut-être deviné à partir de l'image, il existe de nombreuses autres façons de personnaliser vos ombres à l'aide de cette propriété.
Mais pour ce faire, nous aurons besoin des cinq valeurs, pas seulement des deux valeurs obligatoires que nous avons utilisées dans notre démonstration.
Voici les cinq valeurs que la propriété box-shadow peut inclure.
- Décalage horizontal (obligatoire). La distance horizontale entre l'ombre et l'élément. Autrement dit la "taille" horizontale de l'ombre. Une valeur positive décalera l'ombre vers la droite tandis qu'une valeur négative la décalera vers la gauche.
- Décalage vertical (obligatoire). La distance verticale entre l'ombre et l'élément. Autrement dit la "taille" verticale de l'ombre. Une valeur positive décalera l'ombre vers le bas alors qu'une valeur négative la décalera vers le haut.
- Rayon de flou (facultatif). La quantité de flou appliquée à l'ombre. Par défaut, il vaut 0, ce qui rend l'ombre la plus nette possible.
- Rayon d'épandage (optionnel). La propagation de l'ombre par rapport à la taille de l'élément.
- Couleur (facultatif). La couleur de l'ombre. Si elle n'est pas spécifiée, elle sera généralement de la même couleur que celle du texte à l'intérieur de l'élément.
Les quatre premiers sont des valeurs de longueur et, à l'exception du rayon de flou, ils prennent tous en charge des valeurs négatives.
Essayons.
h1
{
background: deeppink;
box-shadow: 5px -5px 0 0 black;
}
div
{
background: orangered;
box-shadow: -7px 10px 5px -5px deepskyblue;
}
C'est le résultat que vous devriez obtenir.
<CAPTURER>
Vous pouvez jouer avec cette propriété jusqu'à ce que vous obteniez l'effet souhaité.
Ombres intérieures
Plutôt qu'une ombre portée, vous pouvez créer une ombre incrustée simplement en ajoutant le mot-clé incrusté avant ou après les autres valeurs.
box-shadow: inset 5px 5px 3px 0 #f00;
Voici quelques-uns des résultats que vous pouvez obtenir en jouant avec les ombres de boîte.
<CAPTURER>
L'effet d'ombre interne est le plus visible sur les trois exemples du bas.
Ombre de texte
Nous venons d'apprendre à appliquer des ombres de boîte aux éléments de notre page Web avec CSS.
Mais il existe un autre type d'ombre que nous pouvons utiliser, l'ombre du texte.
Comme son nom l'indique, il ajoute un effet d'ombre non pas à l'élément lui-même mais à chaque lettre du texte.
Voici une démonstration.
<CAPTURER>
La propriété dont nous avons besoin pour gérer l'ombrage du texte est text-shadow.
Voici les valeurs qu'il accepte.
- Décalage horizontal (obligatoire). La distance horizontale entre l'ombre et le texte. En d'autres termes la "longueur" horizontale de l'ombre. Une valeur positive décalera l'ombre vers la droite tandis qu'une valeur négative la décalera vers la gauche.
- Décalage vertical (obligatoire). La distance verticale entre l'ombre et le texte. En d'autres termes la "longueur" verticale de l'ombre. Une valeur positive décalera l'ombre vers le bas alors qu'une valeur négative la décalera vers le haut.
- Rayon de flou (facultatif). La quantité de flou appliquée à l'ombre. Par défaut, il vaut 0, ce qui rend l'ombre la plus nette possible.
- Couleur (facultatif). La couleur de l'ombre. La couleur par défaut dépendra du navigateur.
Comme vous pouvez le voir, celles-ci sont très similaires aux valeurs de la propriété box-shadow à l'exception de l'option rayon de propagation qui n'est pas utilisée pour les ombres de texte.
Cela signifie que text-shadow aura au plus quatre valeurs.
Voici un exemple d'effet d'ombre de texte très simple.
text-shadow : 3px 3px ;
Et un peu plus avancé.
text-shadow: 5px 5px 7px #f00;
Avec un peu de créativité, vous pouvez facilement créer un effet de texte très cool avec juste cette propriété.
<CAPTURER>
Ombres multiples
Enfin, sachez que vous pouvez facilement créer plusieurs ombres en les séparant par une virgule.
Cela fonctionne à la fois pour les ombres de boîte et les ombres de texte.
Manifestation.
div
{
box-shadow: 5px 5px 0 0 #f0f, -3px -3px 1px 2px #f00;
text-shadow: 1px 1px 1px #000, 3px 3px 5px #f00;
}
Voici quelques-uns des effets que vous pouvez obtenir en utilisant plusieurs ombres.
<CAPTURER>
Ceci conclut notre chapitre sur les bordures et les ombres en CSS.
Aucun commentaire