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 mérete


A befoglaló kör vagy ellipszis méretét kulcsszavakkal adhatjuk meg.

A használható kulcsszavak:
closest-side: Az alakzat széle érinti a befoglaló elem legközelebbi oldalát.
farthest-side: Az alakzat széle érinti a befoglaló elem legtávolabbi oldalát.
closest-corner: Az alakzat széle érinti a befoglaló elem legközelebbi sarkát.
farthest-corner : Az alakzat széle érinti a befoglaló elem legközelebbi sarkát.


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(30% 30%, circle closest-side, #4444ff 0%,#000044 90%,#000000 100%);
    background: radial-gradient(circle closest-side at 30% 30%, #4444ff 0%, #000044 90%, #000000 100%);
  }
  #div2 { /* -moz-..; -ms-..; -o-.. */
    background: -webkit-radial-gradient(30% 30%, circle farthest-side, #4444ff 0%,#000044 90%,#000000 100%);
    background: radial-gradient(circle farthest-side at 30% 30%, #4444ff 0%, #000044 90%, #000000 100%);
  }
  #div3 { /* -moz-..; -ms-..; -o-.. */
    background: -webkit-radial-gradient(30% 30%, circle closest-corner, #4444ff 0%,#000044 90%,#000000 100%);
    background: radial-gradient(circle closest-cornerr at 30% 30%, #4444ff 0%, #000044 90%, #000000 100%);
  }
  #div4 { /* -moz-..; -ms-..; -o-.. */
    background: -webkit-radial-gradient(30% 30%, circle farthest-corner, #4444ff 0%,#000044 90%,#000000 100%);
    background: radial-gradient(circle farthest-corner at 30% 30%, #4444ff 0%, #000044 90%, #000000 100%);
  }
</style>
...
<body>   
  <div id="div1"><p>closest-side</p></div>
  <div id="div2"><p>farthest-side</p></div>
  <div id="div3"><p>closest-corner</p></div>
  <div id="div4"><p>farthest-corner</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_meret.html