HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

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