Sugárirányú színátmenetek

Sugárirányú színátmenetnél egy pontból kiindulva ellipszis vagy kör alakban jön létre az átmenet.

Lehetséges formák:
circle >> kör
ellipse >> ellipszis

Sugárirányú színátmenetek beállítása:

kijelölő

{

background-image

radial-gradient(forma at pozíció méret, szín1 pozíció, szín2 pozíció, … színN pozíció);

}

Sugárirányú színátmenetek beállítása -webkit- előtaggal:

kijelölő

{

background-image

-webkit-radial-gradient(pozíció, forma méret, szín1 pozíció, szín2 pozíció, … színN pozíció);

}

Példa:

Forráskód

<style> 
  #div1 { /* -moz-..; -ms-..; -o-.. */  
    background: -webkit-radial-gradient(center, circle closest-side, 
                 #4444ff 0%,#000044 90%,#000000 100%);    
    background: radial-gradient(circle at center closest-side, 
                 #4444ff 0%, #000044 90%, #000000 100%); } 
#div2 { /* -moz-..; -ms-..; -o-.. */ 
    background: -webkit-radial-gradient(center, ellipse closest-side, 
                 #4444ff 0%,#000044 90%,#000000 100%); 
    background: radial-gradient(ellipse closest-side at center, 
                 #4444ff 0%, #000044 90%, #000000 100%); } 
</style> 
... 
<body>   
  <div id="div1"><p>circle</p></div> 
  <div id="div2"><p>ellipse</p></div> 
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: hatter_szinatmenet_radian_alak.html