CSS3 lineáris gradiensek [CSS3 tippek]
Gradiens A CSS3 egy nagyszerű színtulajdonság. Ahelyett, hogy csak egy színt szeretne hozzáadni, egy deklarációs blokkban több színkombinációt adhatunk anélkül, hogy a képekre támaszkodnánk, ami csökkentheti a HTTP-kérést weboldalunkon, amely lehetővé teszi a webhely gyorsabb betöltését.
Ha a CSS3 színátmeneteivel játszott, valószínűleg ismeri a két módszert: radiális és lineáris gradiens. A mai hozzászólás az utóbbiakról szól.
Színátmenetek létrehozása
Mivel a CSS3-ban a spec-gradiensek egy kép, nem rendelkezik olyan különleges tulajdonsággal, mint a többi új funkció hozzáadása, így azt a háttérkép tulajdonság helyett.
Ha megnézzük a színátmenet teljes szintaxisát, egy kicsit néz ki tömött, ami néhány ember számára zavart okozhat.
div háttérkép: -webkit-lineáris gradiens (felső, # FF5A00 0%, # FFAE00 100%); háttérkép: -moz-lineáris gradiens (felső, # FF5A00 0%, # FFAE00 100%); háttérkép: -ms-lineáris gradiens (felső, # FF5A00 0%, # FFAE00 100%); háttérkép: -o-lineáris gradiens (felső, # FF5A00 0%, # FFAE00 100%); háttérkép: lineáris gradiens (felső, # FF5A00 0%, # FFAE00 100%);
Tehát vessünk egyenként a szintaxis minden egyes részébe, hogy tisztábbá tegyük a dolgokat.
Először is a lineáris gradienst a lineáris-gradiens () funkció. A funkciónak három fő értéke van. Az első érték a gradiens kiindulási helyzetét határozza meg. Használhat egy leíró kulcsszót, mint például felső a. \ t felső;
div háttérkép: lineáris gradiens (felső, # FF5A00, # FFAE00);
A fenti részlet a W3C hivatalos verziója a színátmenetek létrehozásához. Ez valóban egyszerűbb és önmagától értetődő, és a következő gradienst is létrehozza.
Használhatja azt is alsó az ellenkezőjét, vagy máskülönben jobb és balra.
Átlós gradienst is létrehozhatunk a szögfok a gradiens kiindulási pozíciója. Íme egy példa:
div háttérkép: lineáris gradiens (45deg, # FF5A00, # FFAE00);
A fenti részlet a következő színátmenetet hozza létre:
A függvény második értéke megmondja a első szín információk és annak stop pozíció százalékban kifejezve. A stop pozíció valójában opcionális; a böngésző elég okos ahhoz, hogy meghatározza a helyes pozíciót, így amikor nem határozzuk meg az első szín megállását, akkor a böngésző megteszi 0% alapértelmezettként.
És a következő érték a második szín kombináció. Úgy működik, mint az előző érték, csak akkor, ha ez az utolsó szín, és nem adtuk meg a stop pozíció, értéke 100% az alapértelmezettnek tekintendő. Most nézzük meg az alábbi példát:
div háttérkép: lineáris gradiens (felső, # FF5A00 0%, # FFAE00 100%);
A fenti részlet egy olyan színátmenetet hoz létre, mint amit korábban láttunk (nincs különbség), de most a színmegállási pozíciót adjuk meg;
Most változtassuk meg színes megállás, és ezúttal meg fogjuk határozni 50% az első szín és 51% a második színért, és lássuk, hogyan kiderül;
div háttérkép: lineáris gradiens (felső, # FF5A00 50%, # FFAE00 51%);
Átláthatóság
létrehozása átláthatóság gradiensben is lehetséges. A hatás létrehozásához a színt le kell fordítani hex -ba RGBA módban, és csökkentse az alfa csatornát.
div háttérkép: lineáris gradiens (felső, rgba (255,90,0,0,2), rgb (255,174,0,0.2));
A fenti részlet a következőképpen csökkenti a színintenzitást: 20%, és a színátmenet ilyen lesz:
Több szín
Ha több színt szeretne hozzáadni, add hozzá a vesszőkkel elválasztott színeket, és hagyja, hogy a böngésző meghatározza az egyes színmegállási pozíciókat.
div háttérkép: lineáris gradiens (felső, piros, narancs, sárga, zöld, kék, indigó, lila);
A fenti részlet a következő szivárványt hozza létre.
Böngésző kompatibilitás
Sajnos, az írás idején minden jelenlegi böngészőnek még támogatnia kell a szabványos szintaxist. Még mindig szükségük van a szállító előtagjára (-webKit-, -Moz-, -Kisasszony- és -o-). Ezért jelenik meg a teljes szintaxis így:
div háttérkép: -webkit-lineáris gradiens (felső, # FF5A00 0%, # FFAE00 100%); háttérkép: -moz-lineáris gradiens (felső, # FF5A00 0%, # FFAE00 100%); háttérkép: -ms-lineáris gradiens (felső, # FF5A00 0%, # FFAE00 100%); háttérkép: -o-lineáris gradiens (felső, # FF5A00 0%, # FFAE00 100%); háttérkép: lineáris gradiens (felső, # FF5A00 0%, # FFAE00 100%);
Másrészt, az Internet Explorer, különösen a 9. és az alacsonyabb verzió, messze van a szabványtól. A gradiens a IE9 és az alábbiak szerint szűrő, így ha ezekhez a böngészőkhöz gradienst kívánunk hozzáadni, valami ilyet kell írni;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # FF5A00, endColorstr = # FFAE00);
A szűrő korlátai vannak: először nem teszi lehetővé a több mint három szín hozzáadását, és az átláthatósági hatás létrehozása is kicsit trükkös - nem teszi lehetővé RGBA, de az IE szűrő felhasználások #ARGB;
div filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = # 33FF5A00, endColorstr = # 33FFAE00);
Itt van egy eszköz, amely segít átalakítani RGBA nak nek #ARGB.
- Demó
- Letöltés forrása
A szintaxis gyorsabb írása
Amint a fentiekben láthatjuk, a böngészők közötti gradiens kompatibilitás fenntartásához öt további kódot kell hozzáadnunk, amelyek nem hatékonyak.
Számos módon tehetjük a feladatot, hogy egyszerűsítsük a feladatot; például a Prefix-mentes, Prefixr, LESS vagy Sass használata a kódok összeállításához, de mindenekelőtt azt javasoljuk, hogy használja ezt az eszközt, a ColorZilla Gradientt. Ez az eszköz egyszerűen generálja az összes szükséges kódot a gradiensek működéséhez minden böngészőben.
Végső szavak
Ma már nagyon sokat beszéltünk a színátmenetek létrehozásáról, a szintaxis minden részét megvizsgáljuk, átlátható hatásokat hozunk létre és fenntartjuk a böngésző kompatibilitását. Tehát ebben a pillanatban reméljük, hogy már jobban megérted a témát.
Még mindig sok dolog van, amit felfedezünk CSS3 gradiensek a jövőbeni hozzászólásainkban, így maradjon hangolva a Hongkiat.com-ra. Végül, köszönöm, hogy elolvasta ezt a hozzászólást, reméljük, hogy élvezted.
További irodalom
- Bullet Proof keresztböngésző RGBA hátterek - Lea Verou
- CSS3 kép - W3.org
- Mikor használhatom a CSS3 gradienseket - CanIUse.com
