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 pozíciója


A sugárirányú színátmenet középpontjának pozíciója megadható kulcsszóval, hosszméretben vagy százalékban.

Használható kulcsszavak:
left top: bal felső sarok
right top: jobb felső sarok
left bottom : bal alsó sarok
right bottom : jobb alsó sarok
left center: baloldalon, függőlegesen középen
right center: jobboldalon, függőlegesen középen
center top : fent, vízszintesen középen
center bottom : lent, vízszintesen középen
center bottom : lent, vízszintesen középen


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, #4444ff 0%,#0000aa 50%,#000088 100%);
   background: radial-gradient(circle at center, #4444ff 0%, #0000aa 50%, #000088 100%);}
  #div2 { /* -moz-..; -ms-..; -o-.. */
   background: -webkit-radial-gradient(10% 80%, circle, #4444ff 0%,#0000aa 50%,#000088 100%);
   background: radial-gradient(circle at 10% 80%, #4444ff 0%, #0000aa 50%, #000088 100%);}
  #div3 { /* -moz-..; -ms-..; -o-.. */
   background: -webkit-radial-gradient(10px 80px, circle, #4444ff 0%,#0000aa 50%,#000088 100%);
   background: radial-gradient(circle at 10px 80px, #4444ff 0%, #0000aa 50%, #000088 100%);}
  #div4 { /* -moz-..; -ms-..; -o-.. */
   background: -webkit-radial-gradient(left top, circle, #4444ff 0%,#0000aa 50%,#000088 100%);
   background: radial-gradient(circle at left top, #4444ff 0%, #0000aa 50%, #000088 100%);}
</style>
...
<body>   
  <div id="div1"><p>center</p></div>
  <div id="div2"><p>10% 80%</p></div>
  <div id="div3"><p>10px 80px</p></div>
  <div id="div4"><p>left top</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_pozicio.html