iceblue-test
  CSS3
 

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





 
  TESTTESTTEST  
 
• dies ist der Inhalt im < div id="popup1" >
• befindet sich im Feld "Text UNTER Design"
• das DIV ist nur auf einer Seite zu sehen
• und auf dieser Seite wurde das Design entfernt
• angezeigt wird also nur der Inhalt des einen DIV