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    

Lineáris átmenet iránya


A gradiens-vonal iránya megadható a függőleges tengellyel bezárt szögével:
00 >> felfelé
900 >> jobbra
1800 >> lefelé
2700 >> balra

A régi, előtaggal írt szintaktika esetén 900-os eltérés van:
00 >> jobbra
900 >> lefelé
1800 >> balra
2700 >> felfelé

Használható kulcsszavak :
left: balról jobbra
right: jobbról balra
top: fentről lefelé
bottom: lentről felfelé
top left: bal felső sarokból, a jobb alsó felé
top right: jobb felső sarokból, a bal alsó felé
bottom left: bal alsó sarokból, a jobb felső felé
bottom right: jobb alsó sarokból, a bal felső felé


A lineáris átmenet beállítása:

kijelölő
{
background-image
:
linear-gradient(irány, szín1, szín2);
}


Példa:

Forráskód


<style> 
  #div1 { 
   /*-webkit-..; -moz-..; -ms-..; -o-.. */
    background-image: linear-gradient(left, #000000, #ffffff); 
  } 
  #div2 { 
   /*-webkit-..; -moz-..; -ms-..; -o-.. */ 
     background-image: linear-gradient(left bottom, #000000, #ffffff); 
  } 
  #div3 { 
    /*-webkit-..; -moz-..; -ms-..; -o-.. */
     background-image: linear-gradient(15deg, #000000, #ffffff); 
  } 
  #div4 { 
   /*-webkit-..; -moz-..; -ms-..; -o-.. */
     background-image: linear-gradient(90deg, #000000, #ffffff);   
  } 
</style> 
</head> 
<body>   
  <div id="div1"><p>left</p></div> 
  <div id="div2"><p>left bottom</p></div> 
  <div id="div3"><p>15deg</p></div> 
  <div id="div4"><p>90deg</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_linear_irany.html