CSS3 körkörös és elliptikus gradiensek [CSS3 tippek]
Ma folytatjuk a vitát CSS3 gradiensek. Az előző hozzászólásban megmutattuk, hogyan kell létrehozni Lineáris gradiensek. Ezúttal a rokonokat fedjük le, Körkörös és elliptikus színátmenetek.
A színátmenet szintaxisa
A CSS3 gradiensét a háttérkép ingatlan. Ez a jobb kompatibilitás, ha hozzá kell adnunk háttérszín egyetlen szabályrendszerben, hogy ne ütközzenek egymással. Ezután a sugárirányú gradiens létrehozásához egyszerűen ezt hívjuk radiális-gradiens () funkció. A gradiens megfelelően beállítható négy funkcióval.
Az első érték az gradiens pozíció. Használhatunk egy leíró kulcsszót, mint például a felső, az alsó, a középső és a bal oldali, vagy konkrétabbak vagyunk, 50% 50% a középpontban vagy a 0% 0% a gradiens elindításához bal felső.
A második érték a alakja és a gradiens mérete, két érv van a színátmenetek alakításához, először a ellipszis ami az alapértelmezett, a második pedig kör.
És a gradiens mérete, az alábbi hat érv közül választhatunk.
| értékek | Leírás |
|---|---|
legközelebb oldali | A színátmenet alakja megfelel a középponthoz legközelebb eső doboz oldalának (köröknél) vagy a középponthoz legközelebb eső függőleges és vízszintes oldalakkal (ellipszisek esetén). |
legközelebb sarok | A színátmenet alakja úgy van méretezve, hogy pontosan megfeleljen a központ legközelebbi sarkának. |
legtávolabbi oldali | Hasonló a legközelebbi oldalhoz, kivéve, ha az alakzat úgy van méretezve, hogy megfeleljen a központtól legtávolabbi (vagy függőleges és vízszintes oldalak) oldalának oldalán.. |
legtávolabbi sarok | A színátmenet alakja úgy van méretezve, hogy pontosan megfeleljen a központ legtávolabbi sarkának. |
tartalmaz | Szinonimája |
borító | Szinonimája |
A táblázat forrása: Mozilla fejlesztői hálózat.
Végül a harmadik és a negyedik meghatározza a színkombináció. Tehát itt van, hogyan írjuk a szintaxist, hogy létrehozzuk a Elliptikus színátmenetek, és ezúttal fogjuk használni borító a gradiens méretéhez, így széles körben terjed, amely lefedi a tartályt;
test háttérkép: radiális gradiens (középpont, ellipszis fedél, # ffeda3, # ffc800);
A Kör alakú a színátmenet egyszerűen így tehető:
test background-image: radiális-gradiens (középpont, körborító, # ffeda3, # ffc800);
Ahogy a neve is mutatja, a színátmenet alakja kör.
Böngésző támogatás
Csak vegye figyelembe, hogy az összes böngésző még mindig támogatja a szolgáltatás teljes körű támogatását, így még mindig szükség van a szállító előtagjára. Így a teljes teljes szintaxis, amely minden modern böngészőben fog működni - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ és Opera 11+ - így fog kinézni;
test háttérkép: sugárirányú gradiens (középső alsó, ellipszisborító, # ffeda3, # ffc800); háttérkép: -o-radiális-gradiens (középső alsó, ellipszis fedél, # ffeda3, # ffc800); háttérkép: -ms-radiális-gradiens (középső alsó, ellipszisborító, # ffeda3, # ffc800); háttérkép: -moz-radial-gradiens (középső alsó, ellipszisborító, # ffeda3, # ffc800); háttérkép: -webkit-radiális-gradiens (középső alsó, ellipszisborító, # ffeda3, # ffc800);
Nézze meg a bemutatót, vagy töltse le a forrást a színátmenetek lejátszásához.
- Demó
- Letöltés forrása
Végső szavak
A CSS3 sugárirányú gradiens létrehozása nem olyan nehéz, mint gondolná, és különösen akkor, ha ezekből az eszközökből segítséget kap a kód generálásához:
- Colorzilla gradiensek
- Gradientoo
A sugárirányú gradiens csak egy típusú CSS3 modul, folytatjuk a témával kapcsolatos megbeszéléseket a jövőbeni hozzászólásokban, így maradjon hangolva a Hongkiat.com-on
