CSS 3 gradiens a Firefox 3.6-ban


A gradiensek (színátmenetek) a web 2.0 stílus divatos és jellemzõ eszközei. Remekül alkalmazhatóak a térhatás illúziójának megteremtésére, és ma már szinte minden weboldalon ott vannak. Gradiensek létrehozásához eddig a különbözõ képszerkesztõ programokra voltunk utalva, de a css stílusleíró nyelv 3. számú változata támogatja a gradienseket, így – bizonyos keretek között – ezek a weboldal megjelenítésekor dinamikusan létrehozhatók.

A szépséghiba az, hogy a css 3 egyelõre csak vázlat, így a böngészõk is csak most kezdik támogatni, messze nem teljeskörûen. A Webkit motorra épülõ böngészõk (pl. Chrome, Safari) élen járnak a CSS 3 támogatásában, és számos új tulajdonságot és szelektort támogatnak. A Gecko motorra épülõ firefox azonban csak most, a 3.6-os verzióval kezd felzárkózni. Ebben a posztban áttekintjük, hogy hogyan lehet rávenni a Firefox 3.6-ot a gradiensek generálására, CSS 3 segítségével. Az általános szintaxis a következõ:

background: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* );
background: -moz-radial-gradient( [<point> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* );

A -moz-linear-gradient segítségével lineáris, a -moz-radial-gradient használatával pedig körgradienst hozhatunk lére. A lineáris gradiens változóinak magyarázata a következõ. A point jelenti a gradiens kezdõpontját. Ugyanazok az értékek elfogadhatóak, mint a background-position esetében. Ha csak egy értéket adunk meg (pl. left), akkor a másik tengely menti értéket center-nek tekinti. Az angle jelenti a gradiens irányszögét. Megadható fokban, gradban vagy radiánban. A stop pedig egy színt jelölt, amelyhez opcionálisan egy helyet is megadhatunk a gradiensen belül, ahol a gradiensnek azt a színt fel kell vennie. Lássunk egy példát is (balra a gradiens, jobbra ugyanaz képként, arra az esetre, ha valaki nem Firefox 3.6-tal nézi):

background: -moz-linear-gradient(top, #000, #FFF);

A körgradiens esetében további változók szorulnak magyarázatra. A point alapértelmezett értéke az objektum középpontja. A shape változó a circle vagy az ellipse értéket veheti fel, ebbõl az utóbbi az alapértelmezett. A circle választásával kapunk tehát valódi körgradienst, egyébként elipszis alakú lesz. A size változó segítségével beállíthatjuk azt, hogy a gradiens hol érjen véget (meddig terjedjen). A lehetséges értékek a következõk:

closest-side
A gradiens a doboz legközelebb esõ oldaláig terjed. A closest-side szinonímája a contain.
closest-corner
A gradiens a doboz legközelebb esõ sarkáig terjed.
farthest-side
A gradiens a doboz legtávolabb esõ oldaláig terjed.
farthest-corner
A gradiens a doboz legtávolabb esõ sarkáig terjed. A closest-side szinonímája a cover.

Íme erre is egy példa (balra a gradiens, jobbra a kép, mint fent):

background: -moz-radial-gradient(cover, white, black);

A Firefox a 3.6 verzióval tehát jelentõsen ledolgozta a hátrányát a Webkit-es böngészõkkel szemben. Egyetlen kellemetlenség, hogy aki még az alpha verzióhoz optimalizálta a CSS-t, annak újra kell írnia (pl. nekem), mert azóta változott a szintaxis. Részletesebb információkat a témáról a Mozilla Developer oldalakon találtok (Using gradients, -moz-linear-gradient, -moz-radial-gradient), angol nyelven.

Kapcsolódó bejegyzések:
  • Nem számít egy nagyon új dolognak a CSS segítségével megvalósított gomb, viszont a dinamikus szélességgel bíró gomb igenis új távlatokat nyit a weblapkészítésben …

  • Itt a legújabb CSS3 online generator. Megnéztem és teljesen jó kódot generál, használata meglehetősen egyszerű, egyértelmű.Egy mintakód, amit generál …

  • CSS alapú legördülő horizontális menü készítését sajátíthatod el a leírás segítségével.Stílus:body { padding: 0px; margin: 0px; behavior: ur …

  • Találtam ma egy nagyon hasznos JS-t (fixie.js), amely arra hivatott, hogy a sitebuilderek életét kicsit megkönnyítse. Méghozzá azáltal, hogy a fixie.js használat …

  • Top Margin: a felső margó beállítását szolgálja, amely megadható hosszúságértékével, vagy százalékos formában, illetve az auto (automatikus) értékkel. A nulla ér …

A cikket beküldte: pkarsai (http://www.css-3.hu)

7 hozzászólás

  1. Harder says:

    Ha nem jelenik meg a cikk, nyomjatok párszor F5-t, vmi bug-t okoz a wp vagy az egyik plugin :(

  2. Tupacko says:

    Nagyon jó dolgok vannak a CSS3ban. Várom már, hogy minden böngészőben lehessen valamilyen módon használni az új lehetőségeket: gradiens, szöveg és doboz árnyék, stb…

  3. Thomas RC says:

    Lineáris átmenetnél azt nem lehet állítani, hogy a színátmenet hány pixel legyen?

  4. zoleytaylor says:

    @Thomas RC dede, lehet, erre szolgál a stop. illetve ez egy sokkal hasznosabb szintaxis, mintha csak az átmenet végét tudnánk megadni. pl: -moz-linear-gradient(left center, red 256px, transparent 512px) — az első 256 pixel piros, a 256.-tól az 512.-ig van az átmenet pirosból átlátszóba, aztán átlátszó a doboz végéig… (kicsit másféle gondolkodást igényel, mint az eddigi css tulajdonságok, de majd csak megszokjuk :)…)

  5. Vizion says:

    Ok, nem WP, hanem Joomla, nem gradiens, hanem table, ezektől eltekintve nem is offolok… :)
    Joomla-ban a cikk content egy table-ba kerül, és hiába adok másik stílust a contentben létrehozott táblázatnak, mindíg öröklődik…
    Adtam másik stílust, kézzel írtam, de akkor is felülírja…
    Hogyan lehet a táblázatba rakott táblázatnál a CSS átvételét kikapcsolni?
    Köszönöm!

  6. Ubuntus says:

    @Vizion: Próbáltad az !important-ot odarakni minden utasítás mögé?
    Pl.: color: #000000 !important;

  7. Vizion says:

    Próbáltam, nem volt elég, kellett neki új osztály, ami üres szinte…

Szólj hozzá
a CSS 3 gradiens a Firefox 3.6-ban c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>