VISSZA
MENÜ
TOVÁBBA 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