logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

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

Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.