Comment faire une div CSS pure avec un fond dégradé?

Question

Disons que la hauteur du div est de 34 pixels et la largeur de 480 pixels. Le div devrait ressembler à ceci:

et je ne veux pas qu'il utilise réellement une image, juste CSS. C'est possible?

Answer 1

C'est avec CSS3. Il y a même un générateur de dégradé pratique qui élimine les conjectures. Bien sûr, cela n'est pas pris en charge dans IE8 et les versions antérieures.

---

Éditer

Par souci d'exhaustivité, comme sluukkonen mentionné, IE prend en charge les dégradés en CSS en utilisant le filtre filter:progid:DXImageTransform.Microsoft.Gradient .

Answer 2

Il existe des moyens de le faire avec -webkit-gradient et -moz-linear-gradient 'fonctionne' comme valeur de background-image. Celles-ci utilisent une syntaxe différente mais seront normalisées si la spécification de gradient en fait la version finale de CSS 3.

/ * exemple de webkit */
 background-image: -webkit-gradient (
 linear, left top, left bottom, from (rgba (50,50,50,0,8)), 
 à (rgba (80,80,80,0.2)), color-stop (.5, # 333333) 
);

/ * exemple mozilla - FF3.6 + */
 background-image: -moz-linear-gradient (
 rgba (255, 255, 255, 0.7) 0%, rgba (255, 255 , 255, 0) 95% 
);