Farbverlauf / Gradient mit CSS :
Einen Farbverlauf ohne Bild können nur "CSS3 -fähige" Browser darstellen. Ob Du einen aktuellen Browser verwendest, kannst du hier testen .
Mozilla-Browser sehen hier einen Farbverlauf :
für Mozilla Browser:
background: -moz-linear-gradient(top,grey,black );
IE-Browser sehen hier einen Farbverlauf:
für IE Browser:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=red , endColorstr=blue );
Safari-Browser und Google Chrome sehen hier einen Farbverlauf:
für Google + Safari Browser:
background: -webkit-gradient(left top, left buttom, from(red ), to(blue ));
background: -webkit-linear-gradient(blue,red );
Opera-Browser (ab Version 11.1) sehen hier einen Farbverlauf:
für aktuelle Opera-Browser:
background: -o-linear-gradient(red,blue );
Gewünschte Klasse / ID bekommt diese CSS-Eigenschaften:
ein Beispiel für Farbverlauf im Hintergrund (hinter dem Design)
der CSS Code für body könnte dann so aussehen :
body {
background-color: #000000 ;
background: -moz-linear-gradient(top,red,blue );
background: -webkit-gradient(left top, left buttom, from(red ), to(blue ));
background: -webkit-linear-gradient(red,blue );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=red , endColorstr=blue );
background: -o-linear-gradient(red,blue ); }
Farben könnt Ihr auch mit
Hex-Werten angeben (Beispiel: #FFFFB2)
Gradient-Generatoren:
Browser: Mozilla + Safari + Google :
http://gradients.glrzad.com
Browser: Mozilla + Safari + Google :
http://westciv.com/tools/gradients/index.html