Astuces ⇒ HTML CSS facebook twitter youtube

Astuces CSS3 ⇒ & Réaliser un fond en dégradé



Avant les CSS3, pour Réaliser de jolis  fond de couleur en dégradé avec css3 grâce à de nouvelles valeurs de background : linear-gradient et radial-gradient sans utiliser une image.

Le principe  :

  • On définit le type de dégradé voulu : linéaire (linear-gradient) ou radial (radial-gradient) ;
  • On indique les couleurs de départ et d'arrivée et, éventuellement, leurs proportions de mélange.

Attention : Les codes CSS indiqués ci-après ne tiennent compte que ponctuellement des préfixes propriétaires à rajouter selon le navigateur (-moz- pour Firefox, -webkit- pour Safari et Chrome, et -o- pour Opera). Il convient néanmoins de les indiquer systématiquemt si l'on veut assurer une retro-compatibilité.


Le code HTML :

<div class="degrade1">    <p>7astues</p>  </div>  

Dégradés linéaires

Codes CSS:

.degrade1 {  background-image:linear-gradient(white, black);  }  

Ne rien indiquer comme proportions revient à déclarer (white 0%, black 100%), ce qui donne le mélange maximum entre les deux couleurs. Le fondu atteint ses limites on déclarant 50% aux deux couleurs (white 50%, black 50%) ou toute autre quantité où le % de la couleur initiale est supérieur à celui de la couleur finale.
Toujours par défaut, le dégradé se fait vers le bas, ce qui équivaut à déclarer (to bottom, white, black).

 

Résulat

 

7astues

 

Dégradé linéaire

 

Pour un dégradé linéaire allant vers la droite


le code CSS :

 .degrade2 {
   background-image:linear-gradient(to right, white, black); 
    }  
 

 

Attention : les navigateurs utilisant les préfixes propriétaires ont implémenté la propriété gradient sur la base d'une ancienne spec. utilisant les mots clés top, right, bottom, left. Ceux-ci indiquent le côté d'orgine du dégradé et non to bottom, to left (etc.) indiquant le sens du dégradé. Le code précédent préfixé, pour Firefox par exemple, donnera :

 

background-image:-moz-linear-gradient(left, white, black);  

 

Résulat

7astues

 

Dégradé radial

Et un dernier exemple pour un dégradé radial :

Code css:

.degrade3 {  background-image:radial-gradient(white, black);  }  

 

Résulat

 

7astues

 

 

 


Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces