Les effets de dégradés sans image avec CCS3

Les dégradés en css sans image

On trouve de nombreux avantages maintenant avec CSS3, avec la mise à disposition de nombreuses propriétés css bien pratiques.

Par exemple, on peut utiliser les propriétés un dégradé linéaire et un dégradé radial pour créer des dégradés et toutes sortes d’effets déclinés, au lieu d’utiliser comme auparavant , la propriété background-image.

Principe de base pour cette propriété :

  • On choisit le type de dégradé souhaité avecbackground : linear-gradient (dégradé linéaire) etbackground : radial-gradient (dégradé radial)

On définit obligatoirement les couleurs de départ et d’arrivée, ou de mélange

  • repeating-linear-gradient permet de créer un dégradé linéaire avec répétition.
  • repeating-radial-gradient permet de créer un dégradé radial avec répétition.

Créer un dégradé sur le fond d’un élément

radial-gradient
linear-gradient
repeating-radial-gradient
Effet traits
Effet arc-en-ciel

 

Pour ceux qui ne sont pas très emballés par les dégradés, vous pouvez toujours utiliser le générateur de Mozilla pour les dégradés !

http://www.colorzilla.com/gradient-editor/

 

 

VOIR AUSSI
Partagez ce contenu !Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPrint this pageEmail this to someone
Votes sur cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *