Ico JavaScript
Ico CSS
Ico HTML
Ico mooTools
Ico PHP
Ico Astuces

Les dégradés en CSS3

Date 29/03/2014
Ico CSS
Comms 0 commentaire

Une fonctionnalité du CSS3 très pratique si vous souhaitez mettre un dégradé de couleurs sur le background d'un div (ou autre), c'est les fonctions gradient !


Pour un dégradé linéaire du blanc vers noir de gauche à droite :


background: linear-gradient(to right, #fff, #000);


On peut aussi enchainer les couleurs en ajoutant des codes couleurs en paramètre. Par exemple, passer du vert au rouge en passant par le jaune (rastafari !) :


background: linear-gradient(to right, #0f0, #f0ff00, #f00);


Pour un dégradé circulaire du blanc vers noir calé à gauche du bloc :


background: radial-gradient(at left center, #fff, #000);


Cette fonctionnalité CSS3 est prise en charge par les navigateurs récents (même IE10 le comprend, c'est dire !), mais pour garantir d'avoir une couleur même sur les vieux navigateurs ne prenant pas en charge cette fonctionnalité, on peut en amont de la déclaration du dégradé déclarer une couleur unie :


background: #f00;

background: radial-gradient(at left center, #f00, #fff);


De cette manière, les navigateurs ne comprenant pas radial-gradient() l'ignoreront et la ligne précédente sera utilisée, donc un fond uni rouge dans le cas présent.


Et si les codes de couleur en hexadécimal vous fiche la nausée, il existe une fonction permettant de codifier les couleurs en décimal : rgba(rouge, vert, bleu, alpha).


Très pratique car en plus on peut préciser le degré de transparence de la couleur (alpha: 0 pour complètement transparente, 1 pour complètement opaque).


Une couleur bleue transparente à 50% sera codifiée ainsi :


background: rgba(0, 0, 255, 0.5);


Et on peut bien sûr utiliser cette fonction en lieu et place des codes #hexa, dans les propriétés CSS background, color,



Vous avez aimé ce billet ?

 

Vous aimerez peut être...
> Génération d'une bannière texte
> Animation d'élements en CSS3
> Quelques bons scripts MooTools
> ComboBox pour envoi de fichiers
> ComboxBox de choix d'images
 

Mot-clefs de ce billet...
background couleur couleurs css3 degrades gradient

Commentaires


Aucun commentaire...


Ajouter un commentaire


La validation des commentaires se fait automatiquement, suite à la validation d'un « captcha » qui permet de filtrer le spam. La publication de votre commentaire se fera ensuite automatiquement. L'administrateur du blog se réserve toutefois le droit de supprimer votre commentaire après publication s'il contrevient à nos condition d'utilisation ou s'il est considéré comme spam.

Auteur
Email
 
(facultatif et caché)
Site web
 
(facultatif)
Message

Ico Valider


MP  Mighty Productions
> Blogs
> Partage de codes sources - PHP / JS / mooTools
> CSS
> Les dégradés en CSS3
 
RSS       Mentions légales       Comms  Haut de la page  
◄ ►