01/04
Keresztböngésző lineáris gradiensek létrehozása a CSS3-mal
Lineáris gradiensek
A legelterjedtebb gradiens a kétszínű lineáris gradiens. Ez azt jelenti, hogy a gradiens egyenes vonalban mozog, amely az első színtől a másodikig változik. Az ezen az oldalon lévő képen látható a # 999 (sötét szürke) és a #fff (fehér) jobb oldali sávszélessége.
A lineáris gradiensek a legegyszerűbben definiálhatók, és a böngészőkben a legtöbb támogatást élvezik. A CSS3 lineáris gradienseket az Android 2.3+, a Chrome 1+, a Firefox 3.6+, az Opera 11.1+ és a Safari 4+ támogatja. Az Internet Explorer szűrők segítségével növelheti a színátmeneteket, és támogatja őket az IE 5.5-re. Ez nem CSS3, de a böngésző kompatibilitásának lehetősége.
A gradiens meghatározásakor több különböző dolgot kell meghatároznia:
- Milyen típusú gradiens-lineáris vagy sugárirányú
- Ahol a gradiens el kell indulnia
- Ahol a gradiens leáll
- Milyen színek vannak a gradiensben és ahol elindulnak és megállnak
A lineáris gradiensek CSS3 használatával történő meghatározásához a következőket írja:
lineáris gradiens ( szög vagy oldal vagy sarok , színes leállítás , színes leállítás )
- Először meghatározza a gradiens típusát lineáris gradienssel.
- Ezután kétféleképpen definiálhatja a gradiens indítási és leállítási pontját: a vonal szöge 0 és 359 fok között, 0 fokkal egyenesen felfelé. Vagy az "oldalsó vagy sarok" funkcióval, például balra, jobbra, alulra és tetejére. Ezeket a következő oldalon részletesebben ismertetjük. Ha ezeket hagyja ki, akkor a gradiens az elem tetejétől alulig terjed.
- Ezután meghatározza a színmegállásokat. A színkódokat színkóddal és opcionális százalékkal határozza meg. A százalékos érték azt jelzi a böngészőnek, hogy a sorban melyik színnel kezdődik vagy vessen véget. Alapértelmezés szerint a színeket egyenletesen kell elhelyezni a vonal mentén. A színmegállásokról a 3. oldalon tájékozódhat.
Tehát a fenti gradiens CSS3-val való meghatározásához a következőket írja:
lineáris gradiens (bal, # 999999 0%, #ffffff 100%);
És hogy a DIV háttereként írja:
div {
háttérkép: lineáris gradiens (balra, # 999999 0%, #ffffff 100%;
}
Böngészőbővítmények a CSS3 lineáris gradiensekhez
Ahhoz, hogy a színátmenet a böngészőben működjön, böngészőbővítményeket kell használnia a legtöbb böngésző számára, és szűrőt kell használni az Internet Explorer 9 vagy annál alacsonyabb (valójában 2 szűrő) esetén. Mindezek ugyanazokat az elemeket tartalmazzák, mint a gradiens meghatározása (kivéve, hogy az IE-ben csak kétszínű gradienseket határozhat meg).
A Microsoft Szűrők és Extension-Az Internet Explorer a legnehezebb támogatást nyújtja, mert három különböző vonalon van szüksége a különböző böngészőverziók támogatásához. Ahhoz, hogy a fenti szürke és fehér színátmenetet megkapja:
/ * 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- kiterjesztés úgy működik, mint a CSS3 tulajdonság, csak a -moz-kiterjesztéssel. Ahhoz, hogy megkapja a fenti gradienset a Firefoxhoz, írja:
-moz-lineáris gradiens (bal, # 999999 0%, #ffffff 100%);
Opera Extension -The-extension kiterjeszti az átjárókat az Opera 11.1+ -re. A fenti gradiens eléréséhez írja:
-o-lineáris gradiens (bal, # 999999 0%, #ffffff 100%);
Webkit Extension -A -webkit- kiterjesztés sokat működik, mint a CSS3 tulajdonság. A fenti gradiens meghatározásához a Safari 5.1+ vagy a Chrome 10+ esetében a következőket írja:
-webkit-lineáris gradiens (bal, # 999999 0%, #ffffff 100%);
Van egy régebbi verziója a Webkit kiterjesztésnek, amely a Chrome 2+ és a Safari 4+ rendszerrel működik. Ebben megadja a gradiens típusát értékként, nem pedig az ingatlannévben. A szürke fehér vonalú gradiens eléréséhez írja be:
-webkit-gradiens (lineáris, bal felső, jobb felső, színes leállítás (0%, # 999999), színes leállítás (100%, # ffffff));
Teljes CSS3 lineáris gradiens CSS kód
A teljes keresztböngésző támogatásával, hogy a szürke és a fehér színátmenet fölé kerüljön, először tartalmaznia kell egy olyan tartalék színt, amely nem támogatja a színátmenő böngészőket, és az utolsó elemnek a CSS3 stílusnak kell lennie a teljes mértékben kompatibilis böngészők számára. Így írja:
háttér: # 999999;
háttér: -moz-lineáris gradiens (bal, # 999999 0%, #ffffff 100%);
háttér: -webkit-gradiens (lineáris, bal felső, jobb felső, színes leállítás (0%, # 999999), színes leállítás (100%, # ffffff));
háttér: -webkit-lineáris gradiens (bal, # 999999 0%, #ffffff 100%);
háttér: -o-lineáris gradiens (bal, # 999999 0%, #ffffff 100%);
háttér: -ms-lineáris gradiens (balra, # 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%);
A következő oldal ebben a bemutatóban részletesebben ismerteti a gradiens részleteit, és az utolsó oldal olyan eszközre mutat, amely kiváló módja a CSS3 gradiensek automatikus létrehozásának.
Láthatja ezt a lineáris gradienst a műveletben csak CSS segítségével.
02. 04. sz
Diagonális gradiensek létrehozása - a színátmenet szöge
A start és stop pontok meghatározzák a gradiens szögét. A legtöbb lineáris gradiens felülről lefelé vagy balról jobbra halad. De lehetséges egy olyan átmenetet építeni, amely átlós vonallal mozog. Az oldalon látható kép egy egyszerű gradienst mutat, amely jobbra-balra nézve 45 fokos szögben mozog a képen.
Szögek a színátmenetvonal meghatározásához
A szög egy vonal egy képzeletbeli körben az elem középpontjában. 0deg ponttal felfelé, 90deg pont jobbra, 180deg ponttal lefelé, és 270deg pont balra. Minden szöget 0 és 359 fok között határozhat meg.
Meg kell jegyezned, hogy egy négyzetben a 45 fokos szög a bal felső saroktól a jobb alsó részig mozog, de egy téglalapban a kezdő és a végpont kissé kívül esik az alakon, amint a képen látható.
A diagonális gradiens meghatározásának egyik leggyakoribb módja egy sarok definiálása, például a jobb felső sarokban, és a gradiens a saroktól az ellenkező sarokig mozog. A kezdőpontot a következő kulcsszavakkal határozhatja meg:
- felső
- jobb
- alsó
- balra
- központ
És kombinálhatóak specifikusabbak, például:
- jobb felső
- bal felső
- top középen
- jobb alsó
- bal alsó
- alsó középen
- jobb középpont
- balra középre
Itt van a CSS a gradiens hasonló a képen, piros-fehér mozog a jobb felső sarokban a bal alsó:
háttér: ## 901A1C;
háttér-kép: -moz-lineáris gradiens (jobb felső, # 901A1C 0%, # FFFFFF 100%);
background-image: -webkit-gradiens (lineáris, jobb felső, bal oldali 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 nincsenek IE szűrők ebben a példában. Ez azért van így, mert IE csak két típusú szűrőt engedélyez: felülről lefelé (alapértelmezett) és balról jobbra (GradientType = 1 kapcsolóval).
Lásd ezt az átlós lineáris gradienst a műveletben csak CSS segítségével.
03. 04. sz
Színes megáll
A CSS3 lineáris gradiensekkel több színt is hozzáadhat a gradienshez, hogy még kedvezőbb hatásokat hozzon létre. Ezeknek a színeknek a hozzáadásához további színeket ad hozzá a tulajdonának végéhez, vesszővel elválasztva. Fel kell tenned, hogy a sor elején milyen sorrendben kell kezdeni és befejezni a színeket.
Az Internet Explorer csak két színes leállítást támogat, így a gradiens létrehozásakor csak az első és a második színt kell megjeleníteni.
Itt van a fenti háromszínű gradiens CSS:
háttér: #ffffff;
háttér: -moz-lineáris gradiens (bal, #ffffff 0%, # 901A1C 51%, #ffffff 100%);
háttér: -webkit-gradiens (lineáris, bal felső, jobb felső, színes leállítás (0%, # ffffff), színes leállítás (51%, # 901A1C), színes leállítás (100%, # ffffff));
háttér: -webkit-lineáris gradiens (balra, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
háttér: -o-lineáris gradiens (balra, #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 (bal, #ffffff 0%, # 901A1C 51%, # ffffff 100%);
Lásd ezt a lineáris gradienst három színes megállással a művelet során, csak CSS segítségével.
04/04
Az építési gradiensek egyszerűbbé tétele
Két webhelyet ajánlok, amelyek segítenek Önnek a gradiensek építésében, mindegyiknek előnyei vannak és hátrányai vannak nekik, nem találtam olyan gradiens építőt, amely mindent megtesz.
Ultimate CSS Gradient Generator
Ez a gradiens generátor nagyon népszerű, mert hasonlóan történik a gradiens építőkhöz olyan programokban, mint a Photoshop. Én is tetszik nekem, mert megadja az összes CSS kiterjesztést, nem csak a Webkit és a Mozilla. A generátorral kapcsolatos probléma az, hogy csak vízszintes és függőleges gradienseket támogat. Ha diagonális gradienseket szeretne végrehajtani, akkor a másik generátorhoz kell mennie.
CSS3 gradiens generátor
Ez a generátor egy kicsit többet vett, hogy megértse, mint az elsőt, de támogatja a diagonális irányváltást.
Ha tudsz egy másik CSS Gradiens Generátorról, amely jobban tetszik ezek közül, kérjük, tudassa velünk .