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 a színátmeneteket a szűrő é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 van -
lineárisvagysugá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 a névvel
lineáris -gradiens. - Ezután megadja a gradiens indítási és leállítási pontját kétféleképpen: a
szöga vonal 0-tól 359-ig, 0 fokkal egyenesen felfelé. Vagy az "oldalsó vagy sarok" funkcióval, példáulbalra,jobb,alsó, ésfelső. 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 állítsa be, mint háttér a DIV írsz:
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őhöz és a szűrő az Internet Explorer 9 és az alacsonyabb (valójában 2 szűrő). 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).
Microsoft Szűrők és bővítmény-Internet Explorer a legnehezebb a támogatás, 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 bővítmény-A -moz- a kiterjesztés úgy működik, mint a CSS3 tulajdonság, csak a -moz- kiterjesztés. Ahhoz, hogy megkapja a fenti gradienset a Firefoxhoz, írja:
-moz-lineáris gradiens (bal, # 999999 0%, #ffffff 100%);
Opera bővítmény-A -o- kiterjesztés növeli az Opera 11.1+ színátmenetét. A fenti gradiens eléréséhez írja:
-o-lineáris gradiens (bal, # 999999 0%, #ffffff 100%);
Webkit bővítmény-A -webkit- a 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. szDiagoná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 rámutat, 90deg jobbra mutat, 180 fokkal rámutat, és 270deg balra mutat. 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 leggyakoribb módja egy sarok definiálása, például jobb felső é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, mert IE csak kétféle szűrőt engedélyez: felülről lefelé (alapértelmezett) és balról jobbra (a GradientType = 1 kapcsoló).
Lásd ezt az átlós lineáris gradienst a műveletben csak CSS segítségével.
03. 04. szSzí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/04Az é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 GeneratorEz 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átorEz 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.
