Lineáris színátmenetek létrehozása a CSS3-ban

Keresztböngésző lineáris színátmenetek létrehozása CSS3 segítségével

A fenti kép egyszerű balról jobbra színátmenetet mutat # 999 (sötétszürke) és #fff (fehér) között.

A lineáris színátmeneteket a legkönnyebb meghatározni, és a legtöbb támogatást nyújtják a böngészőkben. A CSS3 lineáris gradienseket támogatják az Android 2.3+, a Chrome 1+, a Firefox 3.6+, az Opera 11.1+ és a Safari 4+.

Amikor meghatároz egy színátmenetet, azonosítsa annak típusát -lineáris vagy sugárirányú- és ahol a színátmenetnek meg kell állnia és el kell indulnia. Adja hozzá a színátmenet színeit és azt is, hogy ezek a színek egyenként kezdődnek és végződnek.

A lineáris gradiensek CSS3 használatával történő megadásához írjon:

lineáris színátmenet (szög vagy oldal vagy sarok, színleállás, színleállás) 

Először határozza meg a színátmenet típusát a névvel.

Ezután a gradiens kezdő és leállítási pontját kétféleképpen határozhatja meg: a vonal szöge 0 és 359 fok között, 0 fok egyenesen felfelé mutat. Vagy az „oldal vagy sarok” funkcióval. Ha ezeket elhagyja, a színátmenet az elem tetejétől az aljáig folyik.

Ezután meghatározza a szín leállásait. A színállásokat a színkóddal és egy választható százalékkal határozhatja meg. A százalék megmondja a böngészőnek, hogy a sorban hol kezdje vagy fejezze be ezt a színt. Alapértelmezés szerint a színeket egyenletesen helyezzük el a vonal mentén. A színleállásokról a 3. oldalon talál többet.

Tehát a fenti gradiens CSS3-val történő meghatározásához a következőket írja:

lineáris gradiens (bal, # 999999 0%, #ffffff 100%); 

És hogy beállítsuk a DIV írás hátterévé:

div {
háttérkép: lineáris gradiens (balra, # 999999 0%, #ffffff 100%;
} 

Böngészőbővítmények a CSS3 lineáris színátmenetekhez

Ahhoz, hogy a színátmenet több böngészőben is működjön, a legtöbb böngészőhöz böngészőbővítményeket kell használnia, és a szűrő az Internet Explorer 9-es és régebbi verzióihoz (valójában 2 szűrő). Mindezek ugyanazokat az elemeket veszik igénybe a színátmenet meghatározásához (kivéve, hogy csak kétszínű színátmeneteket határozhat meg IE-ben).

Microsoft szűrők és kiterjesztés- Az Internet Explorer a legnagyobb kihívást támogató, mert három különböző sorra van szükség a böngésző különböző verzióinak támogatásához. A fenti szürke-fehér színátmenet eléréséhez írjon:

/ * IE 5,5–7 * /
szűrő: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
/ * IE 8–9 * /
-ms-filter: "progid: DXImageTransform. Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1) ";
/ * IE 10 * /
-ms-lineáris-gradiens (bal, # 999999 0%, #ffffff 100%); 

Mozilla kiterjesztés-A -moz- a kiterjesztés úgy működik, mint a CSS3 tulajdonság, csak a kiterjesztéssel. A Firefox fenti színátmenetének megszerzéséhez írjon:

-moz-lineáris gradiens (bal oldalon, # 999999 0%, #ffffff 100%); 

Opera kiterjesztése-A -o- kiterjesztés ad színátmenetet az Opera 11.1+ verzióhoz. A fenti színátmenet megszerzéséhez írja be:

-o-lineáris gradiens (bal, # 999999 0%, #ffffff 100%); 

Webkit kiterjesztés-A -webkit- a kiterjesztés sokban működik, mint a CSS3 tulajdonság. A fenti színátmenet definiálásához a Safari 5.1+ vagy Chrome 10+ írásra:

-webkit-lineáris-gradiens (bal, # 999999 0%, #ffffff 100%); 

Van egy régebbi verziója is a Webkit kiterjesztésnek, amely a Chrome 2+ és a Safari 4+ rendszerekkel működik. Ebben a színátmenet típusát értékként határozza meg, nem pedig a tulajdonság nevében. A szürke-fehér színátmenet elérésével ezzel a kiterjesztéssel írja be:

-webkit-gradiens (lineáris, bal felső, jobb felső, szín-stop (0%, # 999999), color-stop (100%, # ffffff)); 

Teljes CSS3 lineáris gradiens CSS kód

A teljes böngészők közötti teljes támogatás érdekében a fenti szürke-fehér színátmenet eléréséhez először egy tartalék egyszínűt kell tartalmaznia olyan böngészőknél, amelyek nem támogatják a színátmeneteket, és az utolsó elemnek a CSS3 stílusnak kell lennie azoknak a böngészőknek, amelyek teljesen vannak megfelelõ. Tehát írod:

háttér: # 999999;
háttér: -moz-lineáris-gradiens (bal oldalon, # 999999 0%, #ffffff 100%);
háttér: -webkit-gradiens (lineáris, bal felső, jobb felső, color-stop (0%, # 999999), color-stop (100%, # ffffff));
háttér: -webkit-lineáris-színátmenet (bal, # 999999 0%, #ffffff 100%);
háttér: -o-lineáris-gradiens (bal, # 999999 0%, #ffffff 100%);
háttér: -ms-lineáris-gradiens (bal, # 999999 0%, #ffffff 100%);
szűrő: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
-ms-filter: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# 999999', endColorstr = '# ffffff', GradientType = 1);
háttér: lineáris gradiens (balra, # 999999 0%, #ffffff 100%); 

Átlós színátmenetek létrehozása - a színátmenet szöge

A kezdő és a stop pont meghatározza a gradiens szögét. A legtöbb lineáris gradiens fentről lefelé vagy balról jobbra van. De lehetséges átlós vonalon mozgó gradiens építése. Az ezen az oldalon található kép egy egyszerű színátmenetet mutat, amely 45 fokos szögben mozog a képen jobbról balra.

Szögek a színátmenet vonalának meghatározásához

A szög egy vonal egy képzeletbeli körön az elem közepén. Mértéke 0deg felfelé mutat, 90deg jobbra mutat, 180deg lefelé mutat, és 270deg pont maradt. Használjon bármilyen szögméretet.

Egy négyzetben 45 fokos szög mozog a bal felső saroktól a jobb alsóig, de egy téglalapban a kezdő és a végpont kissé kívül esik az alakzaton.

Az átlós színátmenet meghatározásának leggyakoribb módja egy sarok meghatározása, mint pl jobb felső és a színátmenet abból a sarokból a szemközti sarokba mozog. Határozza meg a kiindulási helyet a következő kulcsszavakkal:

• tetejére
• jobb
• alsó
• bal
• központ

És kombinálhatók konkrétabbá, például:

• jobb felső
• bal felső
• felső központ
• jobb alsó
• bal alsó
• alsó középső
• jobb középen
• bal középen

Itt látható a képen láthatóhoz hasonló színátmenet CSS-je, piros-fehér a jobb felső saroktól a bal alsó felé haladva:

háttér: ## 901A1C;
háttérkép: -moz-lineáris-gradiens (jobb felső, # 901A1C 0%, # FFFFFF 100%);
háttérkép: -webkit-gradiens (lineáris, jobb felső, bal alsó, color-stop (0, # 901A1C), color-stop (1, #FFFFFF));
háttér: -webkit-lineáris-gradiens (jobb felső, # 901A1C 0%, #ffffff 100%);
háttér: -o-lineáris-gradiens (jobb felső, # 901A1C 0%, #ffffff 100%);
háttér: -ms-lineáris-gradiens (jobb felső, # 901A1C 0%, #ffffff 100%);
háttér: lineáris gradiens (jobb felső, # 901A1C 0%, #ffffff 100%); 

Lehet, hogy észrevette, hogy ebben a példában nincsenek IE szűrők. Az IE ugyanis csak kétféle szűrőt engedélyez: fentről lefelé (alapértelmezett) és balról jobbra (a GradientType = 1 kapcsoló).

Színes leáll

A CSS3 lineáris színátmenetekkel adjon hozzá több színt a színátmenethez, hogy még fantasztikusabb hatásokat hozzon létre. Ezeknek a színeknek a hozzáadásához illesszen be további színeket a tulajdon végére vesszővel elválasztva. Meg kell adnia, hogy a vonalon hol kezdődjenek vagy végződjenek a színek is.

Az Internet Explorer szűrői csak két színmegállást támogatnak, ezért ennek a színátmenetnek a felépítésekor csak az első és a második színt kell megadnia.

Itt van a fenti három szín gradiens CSS-je:

háttér: #ffffff;
háttér: -moz-lineáris-gradiens (balra, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
háttér: -webkit-gradiens (lineáris, bal felső, jobb felső, szín-stop (0%, # ffffff), color-stop (51%, # 901A1C), color-stop (100%, # ffffff));
háttér: -webkit-lineáris-gradiens (balra, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
háttér: -o-lineáris-gradiens (bal, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
háttér: -ms-lineáris gradiens (balra, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
szűrő: progid: DXImageTransform. Microsoft.gradient (startColorstr = '# ffffff', endColorstr = '# ffffff', GradientType = 1);
háttér: lineáris gradiens (balra, #ffffff 0%, # 901A1C 51%, # ffffff 100%); 

Nézze meg ezt a lineáris gradienst három színmegállással, csak CSS használatával.