Az eddig bemutatott CSS 3 technikák mindegyike működött Webkit motor alatt (azaz Safarin és Chrome-on), de a Firefox 3.5 nem állt ilyen jól. Reményre adott okot, hogy a Firefox 3.6 Alpha1 Codename Namoroka viszont gyakorlatilag mindent tudott, amit a Webkit-es böngészők.
Ehhez képest igencsak meglepődtem, amikor kijött a 3.6-os Firefox, és ami működött az Alphában, az elsőre nem működött a végleges verzióban.
De aztán helyreállt a világ rendje, kiderült, hogy működik az, csak már nem azt a szintaxist kell használni, mint az alpha verzióban. Az új szintaxis a következő:
1 | -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ); |
2 | -moz-radial-gradient( [<point> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* ); |
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):
nem Firefox 3.6-tal nézi):
1 | 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):
1 | 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). 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.
5 hozzászólás
Nincsenek megjegyzések:
Megjegyzés küldése