Quelle est la manière la plus simple de créer des dégradés avec CSS?

Question

Je l'ai remarqué utilisé par un service, et l'effet semble super grand

-moz-linear-gradient(center top , #E3EBF3, #D5E1ED) repeat scroll 0 0 transparent 

Answer 1

Utilisez la propriété CSS comme vous avez dans votre question. Ajoutez les préfixes -moz, -webkit, puis utilisez-le sans préfixe.

IE's filter property can do gradients. Il est fondé, mais il fonctionne :)

Answer 2

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

utilisation Modernizr et certains si les blocs IE en haut pour ajouter des classes à votre balise html afin que vous puissiez fournir HTML et CSS valide, et hacks & biens immobiliers à ceux qui sont nécessaires.

par exemple, dans un gradient que j'ai utilisé dans le passé:

body { 
background: #2688cf; 
} 
.cssgradients body{ 
background: -moz-linear-gradient(top, #2688cf 0%, #2989d8 12%, #207cca 14%, #62a2d6 18%, #b9d5ea 28%, #ffffff 40%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2688cf), color-stop(12%,#2989d8), color-stop(14%,#207cca), color-stop(18%,#62a2d6), color-stop(28%,#b9d5ea), color-stop(40%,#ffffff)); 
background: -webkit-linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%); 
background: -o-linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%); 
background: linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%); 
} 

.ie6 body, .ie7 body, .ie8 body, .ie9 body { 
background: -ms-linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2688cf', endColorstr='#ffffff',GradientType=0); 
background: linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%); 
}