Laravel

Un framework qui rend heureux

Voir cette catégorie
Vers le bas
CSS3 : coins arrondis, ombres et couleurs
Dimanche 11 décembre 2016 19:05
Je vous propose de poursuivre l'exploration des possibilités du CSS3 avec pour cet article la possibilité d'arrondir les coins des boîtes, de générer d'élégantes ombres et de gérer finement les couleurs.

Les couleurs

Le CSS3 nous apporte de nouvelles façons de définir les couleurs. Classiquement on peut définir les couleurs :
  • par leur nom, par exemple red, yellow, brown (vous avez la liste complète ici ou directement dans la spécification W3C)
  • par le code hexadécimal, par exemple #22651f, ou en abrégé dans le genre #b52, on définit ainsi les couleurs primaires additives dans l'ordre rouge-vert-bleu
  • par la fonction rgb(), avec les valeurs de rouge-vert-bleu de 0 à 255 ou en pourcentage, par exemple rgb(50,240,30) ou rgb(50%,10%,90%)
Tout ça est déjà bien mais le CSS3 nous apporte aussi : HSL, HSLA et RGBA. Voyons cela de plus près...

RGBA

Le RGBA est comme le RGB mais avec une quatrième valeur pour l'alpha, autrement dit la transparence. Les valeurs autorisées vont de 0 (totalement transparent) à 1 (totalement opaque). Voici un rendu simple de cette transparence (JSFiddle) :

HSL and HSLA

Le HSL est un système différent pour définir une couleur, on n'a plus les primaires comme avec le RGB mais :
  • la teinte (H) : une valeur entre 0 et 359 (0 => rouge, 60 => jaune, 120 => vert, 180 => cyan, 240 => bleu, 300 => magenta)
  • la coloration (S), on parle aussi de saturation, c'est un pourcentage. A 100% on a la couleur totale, et à mesure qu'on descend en pourcentage la couleur devient "délavée"
  • la luminosité (L), aussi un pourcentage avec comme repère la valeur moyenne 50%, au-dessus ça devient plus lumineux et en dessous plus sombre.
On prétend que ce système est plus intuitif que le RGB parce qu'il se rapproche du fonctionnement de l'oeil. Plutôt que de vous faire un grand discours le mieux est d'aller s'amuser avec un générateur en ligne (certainement le plus joli disponible) : Vous allez ainsi comprendre rapidement et visuellement à quoi correspondent les trois paramètres avec en prime l'équivalent en RGB. Le HSLA est la version avec en plus la transparence.

Opacity

Il existe également la règle opacity indépendamment des règles de couleur vue ci-dessus. A priori l'effet est le même qu'avec le paramètre de transparence de RGBA et HSLA (JSFiddle): Mais avec opacity la transprence se transmet aux enfants, ce qui n'est pas le cas avec les fonctions. On peut le voir facilement en reprenant l'exemple ci-dessus en ajoutant un simple texte :

Des coins arrondis

Fonctionnement

Des coins arrondis sont bien plus jolis que des angles aigus. Avec le CSS3 les créer est très facile avec de simples règles comme on va le voir. La syntaxe de base est celle-ci :
border-radius: 15px;
Voici un exemple avec cette règle (JSFiddle) : La valeur correspond tout simplement au rayon du quart de cercle dessiné. Ici le rayon est de 15 pixels. La règle est bien reconnue par les navigateurs actuels : Lorsqu'on saisit une seule valeur on agit sur les 4 coins. On peut se demander ce qui se passe quand on entre plusieurs valeurs. Voici ce que ça donne (JSFiddle) : En résumé :
  • avec 2 valeurs : la première agit sur les coins haut gauche et bas droit, la seconde sur les deux autres
  • avec 3 valeurs : la première agit sur le coin haut droit, la seconde sur les coins haut droit et bas gauche, la dernière sur le coin bas droit
  • avec 4 valeurs : elles agissent dans l'ordre : haut gauche, haut droit, bas droit, bas gauche

Mais la règle border-radius est une version abrégée de 4 autres règles.

On peut facilement obtenir une boîte circulaire : Ce qui peut être pratique pour des photos ou des icônes. La règle unique :
border-radius: 2em;
est un résumé de :
border-top-left-radius: 2em;
border-top-right-radius: 2em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 2em;
Ces 4 règles permettent une plus grande précision en autorisant le dessin d'ellipses. On va ainsi définir non pas le rayon du cercle mais les deux rayons de l'ellipse. Voici un exemple (JSFiddle) : La première valeur correspond au rayon horizontal et la seconde au rayon vertical. Mais il est aussi possible d'obtenir cette action elliptique avec le simple border-radius, c'est juste un peu moins explicite (JSFiddle):

Il suffit d'ajouter un slash, les valeurs à gauche correspondent aux rayons horizontaux, celles de droite aux rayons verticaux.

S'il en manque on applique les mêmes règles déjà vues ci-dessus.

Ressources

On trouve de nombreuses ressources pour ces coins arrondis. Pour les spécifications officielles c'est ici. Il existe des générateurs : La page de MDN Mozilla qui reste une source de référence incontournable. Une galerie intéressante.

Des ombres

Fonctionnement

Les boîtes

Le CSS3 permet de créer des ombres de boîte avec la règle box-shadow. On peut fixer :
  • la couleur
  • la dimension
  • le flou
  • le décalage
Voici un exemple (JSFiddle) : Voyons les valeurs utilisées :
  1. décalage horizontal de 4px
  2. décalage vertical de 8px
Ce sont les valeurs obligatoires, les autres sont toutes optionnelles. Par défaut les décalages se font à droite et vers le bas, mais avec des valeurs négatives on inverse le décalage : On peut régler la couleur (JSFiddle) : On peut aussi ajouter du flou en réglant son épaisseur (JSFiddle), ici de 5px : Si les bords sont arrondis évidemment l'ombre l'est aussi : On peut aussi régler la dimension de l'ombre (JSFiddle), en plus ou en moins : Enfin on peut avoir l'ombre à l'intérieur (inset) : Et rien n'empêche de mettre en place plusieurs ombrages : La règle est bien supportée par les navigateurs :

Les texte

Le CSS3 permet de créer des ombres de texte avec la règle text-shadow. On peut fixer :
  • la couleur
  • la dimension
  • le flou
  • le décalage
Voici un exemple (JSFiddle) : Voyons les valeurs utilisées :
  • décalage horizontal de 3px
  • décalage vertical de 3px
Ce sont les valeurs obligatoires, les autres sont toutes optionnelles. Par défaut les décalages se font à droite et vers le bas, mais avec des valeurs négatives on inverse le décalage : On peut régler la couleur : On peut aussi ajouter du flou en réglant son épaisseur (ici 2px) : On peut créer plusieurs ombres (JSFiddle) : Les effets peuvent ainsi devenir intéressants !

Ressources

Boîtes

On trouve de nombreuses ressources pour ces ombres de boîtes. On a bien sur la spécification du W3C. Une page de démos variées et une autre. Un article de MDN. Il existe aussi des générateurs pour les boîtes, en voici quelques-uns :

Texte

On a aussi des ressources pour les ombres de texte : Un article de MDN. La spécification du W3C. Learn How To Create Different CSS Box Shadow Effects. Des exemples du W3C en français ! Des galeries d'exemples : Des générateurs :

Exemples

Avec ces ombres on peut obtenir des effets séduisants, comme celui-ci issu de ce site : Ou tous ces effets de ce site : J'espère dans cet article vous avoir donné envie de tester tout ça si ce n'est déjà fait !


Par bestmomo

Aucun commentaire