CSS3 - Hintergrund - Verlauf - Beispiele

1. Ein Hinweis

Testet das bitte mal mit allen modernen zur Verfügung stehen Browser aus. Dann werdet ihr sehr schnell merken, dass sowohl der Safari als auch der Chrome ganz schön aus der Reihe tanzen.

2. Ein einfacher linearer Verlauf

background: -webkit-linear-gradient(#3775b0, #fff);
background: linear-gradient(#3775b0, #fff);     

3. Ein komplizierter linearer Verlauf

background: -webkit-linear-gradient(left top, #3775b0 20%, #fff 50%, #3775b0 80%);
background: linear-gradient(to left top, #3775b0 20%, #fff 50%, #3775b0 80%);    

4. Ein einfacher radialer Verlauf

background: -webkit-radial-gradient(#fff 30%, #3775b0 100%);
background: radial-gradient(#fff 30%, #3775b0 100%);      

5. Ein komplizierter radialer Verlauf

background: radial-gradient(closest-corner ellipse at 40% 40%, 
              #fff 25px, #3775b0 50px, #fff 75px, #3775b0 100px); 
background: -webkit-radial-gradient(40% 40%, ellipse closest-corner, 
              #fff 25px, #3775b0 50px, #fff 75px, #3775b0 100px);

5. Und zum Schluss der helle Wahnsinn

background: url(../../pics/common/ff_g.png) no-repeat center center, 
            radial-gradient(closest-corner circle at 50% 50%, 
              #ff0 40px, #3775b0 60px, #fff 75px, #3775b0 90px, #fff 110px, #3775b0 130px); 
background: url(../../pics/common/ff_g.png) no-repeat center center, 
            -webkit-radial-gradient(50% 50%, ellipse closest-corner, 
              #ff0 40px, #3775b0 60px, #fff 75px, #3775b0 90px, #fff 110px, #3775b0 130px); );

6. Ein Fazit

Wie ihr seht, kann man mit Verläufen extrem verrückte Dinge anstellen, wenn man mal von den Unzulänglichkeiten bei unseren Webkit-Browsern absieht. Allerdings sollte man meiner Meinung nach die Möglichkeiten eh nicht voll ausschöpfen, da es sonst psychedelisch wirkt und stark in Richtung LSD und 60er geht. Also haltet euch zurück und/oder eure Designer im Zaum.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt