Előre szeretném bocsátani, hogy ez a megoldás inkább egy érdekesség bemutatása lesz, de a Photoshoptól még nem búcsúzhatunk el, ha tükröződéseket szeretnénk készíteni. Ennek két oka van. Egyrészt, amit itt be fogok mutatni az csak Webkit alapú böngészőkön, tehát Chrome és Safari alatt működik, máshol egyelőre nem. Másrészt a tükröződés minősége valahogy nem ugyanaz, mint amit egy képszerkesztő programmal elő lehet állítani. Tagadhatatlan előnye viszont, hogy dinamikus, tehát nem kell előre tudnunk, hogy mit tükrözünk, ami nagyon hasznos lehet például egy képgaléria esetén.

Nézzük tehát, hogy hogy működik a dolog. A CSS tulajdonság, aminek értéket kell adnunk, a -webkit-box-reflect. Három értéket kell megadnunk: hol legyen a tükörkép, milyen távolságra legyen az eredetitől és egy maszkot, ami eldönti, hogy mely pixel mennyire legyen látható a tükörképen. Az általános alak a következő:

	-webkit-box-reflect: direction offset mask-box-image;

A direction adja meg, hogy hol legyen a tükörkép. Az above (fölül), below (alul), left (balra) és right (jobbra) értékek közül választhatunk. Az offset segítségével állíthatjuk be, hogy az elem és a tükörképe között mekkora távolság legyen. A mask-box-image pedig az a “maszk”, ami a tükörkép tetejére kerül. Hogy a kívánt hatást elérjük, ennek a maszknak egy webkit-gradiensnek kell lennie. Nézzünk egy példát:

img.reflected {
	-webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
	vertical-align: top;
}

Ezt a kódot most alkalmazzuk egy képre. A bal oldalon látható az általad használt böngésző segítségével készült tükröződés, jobb oldalon pedig egy képernyőmentés azok számára, akik nem Webkit alapú böngészőt használnak.

Nagyjából ennyi az egész. Még azt érdemes megemlíteni, hogy a dolog nemcsak képekre működik, hanem például a <video> elemre is, és ilyenkor az éppen futó video is tükröződik. Még egy jó pont, hogy a tükörkép nem veri szét a weboldal elrendezését, hanem szülő-elemének overflow-jaként funkcionál. Tehát ha nincs számára elég hely, és overflow: hidden; a beállítás, akkor a tükörkép csak részlegesen vagy egyáltalán nem látható.

Mivel a tulajdonság pontos megvalósítása még változhat, ezért — ahogy már megszokhattuk — az egyes layout-motor fejlesztők itt is egyedi neveket vezettek be. A Webkit alapú böngészők esetén -webkit-transition, a Gecko alapúaknál -moz-transition, a Presto esetében pedig -o-transition a tulajdonság pontos neve. Szerencsére paraméterezésük minden motor esetén megegyezik. Akik fejből tudják, hogy melyik böngésző melyik layout-motort használja, azok az előző mondatból már kikövetkeztették, hogy a Chrome, a Safari, a Firefox és az Opera a szerencsés nyertesek. Viszont hozzátartozik az igazsághoz, hogy mivel a Gecko csak az 1.9.3 verziótól támogatja, ezért a Firefox csak a még meg nem jelent 3.7-es verziótól tudja az itt leírtakat. Az Opera pedig, bár elvileg támogatja, gyakorlatilag nem mindig a várakozásoknak megfelelően jeleníti meg az átmeneteket. Így végeredményben azt kell mondanom, hogy a példák maradéktalan élvezetéhez Webkit alapú böngésző (azaz Chrome vagy Safari) javasolt. Ha beállítjuk CSS-ben az alapértelmezett színt, akkor Opera alatt is a várakozásoknak megfelelően működik. A többi böngészőnél ez nem fontos.

A hosszas bevezető után lássuk a két példánkat, amelyeken keresztül a dolog működését szemléltetjük. Az alábbi képek élesebbek, ha az egeret föléjük mozgatjuk, egyébként elhalványodnak. Ami a lényeg: ez a változás nem egyből, hanem fél másodperc alatt zajlik le. (Akinél egyből megtörténik, annak a böngészője nem támogatja ezt a tulajdonságot).

A fenti példa létrehozásához a következő kódot alkalmaztam:

img {
	opacity: .5;
	-webkit-transition: opacity .5s ease-in;
	-moz-transition: opacity .5s ease-in;
	-o-transition: opacity .5s ease-in;
}
img:hover {
	opacity: 1;
}

Most lássunk egy példát egy olyan űrlapra, ahol az éppen kiválasztott beviteli mező háttere megváltozik:

A varázslat a következő beállításoknak köszönhető:

input, textarea {
    background-color: white;
	-webkit-transition: background-color .5s linear;
	-moz-transition: background-color .5s linear;
	-o-transition: background-color .5s linear;
}
input:focus, textarea:focus {
	background: #eeeeee;
}

Most következzen a kód magyarázata. A fenti példákban a transition ún. shorthand formáját alkalmaztam, azaz egyben adtam meg több beállítást:

transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

Lássuk az egyes tulajdonságokat külön-külön:

transition-property

Itt kell megadnunk azt a tulajdonságot, amelyre az átmenetet alkalmazni akarjuk. Ez lehet egy szín (color), lehet az áttetszőség (opacity), de lehet az elem szinte bármely tulajdonsága, mint például a  left, a border-width, stb. Nyilvánvalóan nem értelmezhető viszont az olyan tulajdonságokra, amelyekből nem lehet átmeneteket képezni, mint például a position, a display, stb.

transition-duration

Itt állíthatjuk be, hogy mennyi idő alatt menjen végbe az átmenet. Például 1.5s beállítása esetén — nem meglepő módon — másfél másodperc alatt fog az átmenet lezajlani.

transition-timing-function

Itt egy függvényt adhatunk meg az átmenet sebességének meghatározására. Ha a linear beállítást használjuk, akkor az átmenet egyenletes sebességgel megy végbe. Az ease-in hatására az átmenet lassan kezdődik és később gyorsul fel. Az ease-out ennek az ellenkezője: gyorsan indul, és a végén lassabb. Vagy megadhatunk tetszőleges Bézier-görbét a sebesség meghatározásához: cubic-bezier(x1, y1, x2, y2).

transition-delay

Ha azt szeretnénk, hogy az átmenet ne egyből, hanem egy bizonyos idő elteltével kezdődjön, akkor ennek a tulajdonságnak is érteket kell adnunk. A fenti példákban ezt nem használtam.

A transition tulajdonságok részletes leírását az egyes layout-motorok szemszögéből ezeken a linkeken találjátok: Webkit, Gecko, Presto.

A CSS 3 tehát ismét kezünkbe adott egy lehetőséget, hogy egy, a modern web designban népszerű, effektet jQuery vagy egyéb Javascript megoldás nélkül alkalmazhassunk. Ráadásul mivel az ehhez hasonló effektek ritkán nélkülözhetetlen elemei egy weboldalnak, még azért sem kell aggódnunk, hogy mi van akkor ha egy nem kompatibilis böngészőben az átmenet nem fokozatosan, hanem egyből végbemegy. A web design szakma egyre inkább egyetért abban, hogy itt az ideje a weboldal építésnél azt a szemléletet magunkévá tenni, hogy a funkcionalitásnak működnie kell minden népszerű böngészőben, viszont ha a egy-két spéci effekt csak a legkorszerűbb böngészőkben látható az még nem a világ vége.

-moz-transition:  [ <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay> ]

Egy kép többet ér ezer szónál, ezért kezdjük az ismerkedést egy példával. Igyekeztem egy olyan példafájlt szerkeszteni, ahol együtt tudom bemutatni mindazt, amiről ebben a posztban írni szeretnék. Elég nehéz volt minden lehetőségre olyan példát kitalálni, ami akár hasznos is lehet a való életben, de remélem, hogy ez a pszeudo-osztályok többségében sikerült. A példafájl első látásra valószínűleg kínai lesz, de az alábbi magyarázatokkal talán hasznosnak bizonyul.

:target Bizonyára ismeritek az egyes oldalakon belül elhelyezhető ún. “horgonyokat”, amelyek lehetővé teszik, hogy egy link ne egy adott oldalra, hanem az oldalon belül valahova mutasson. Ha egy ilyen linkre kattintunk, akkor az URL végén #valami látható, ahol a valami a horgony neve. Pl. a http://www.css-3.hu/wp-content/code-samples/css-pseudo-class.html#section1 jelenik meg a címsorban ha a példa fájl tartalomjegyzékének első hivatkozására kattintunk, ahol a link célpontjaként az első bekezdésre mutató horgony van beállítva. Az ilyen “célpontokhoz” lehet stílusokat rendelni a :target pszeudo-osztállyal. Ezt a lehetőséget a példában arra használtam fel, hogy a horgony célpontját képező h3 fejlécnek saját stílust adjak. Tehát ha a felhasználó a tartalomjegyzékről egy adott horgonyra ugrik, akkor a horgony mellett megjelenik egy piros csík, jelezve, hogy “ide ugrottál”. A szükséges kód a következő volt:

h3:target {
border-left: red thick solid;
padding-left: 20px;
}

:nth-child A CSS pszeudo-osztályokkal foglalkozó korábbi posztban foglalkoztam a :first-child pszeudo-osztállyal, ami lehetővé tette, hogy egy elemre akkor vonatkozzon a megadott stílus, ha ő a DOM struktúrában a szülő elemének az első gyermeke. Ezt a lehetőséget bővíti ki az :nth-child pszeudo-osztály, úgy hogy ne csak az első, hanem tetszőleges sorszámú elem vagy elemek legyenek kiválaszthatóak. A 3. elem kiválasztása például az :nth-child(3) megadásával történhet. De itt még nem ér véget az örömünk, ugyanis ennél lényegesen többet tud ez a pszeudo-osztály! A zárójelek között ugyanis nem csak egy konstanst adhatunk meg, hanem egy an+b alakú kifejezést, tehát előírhatjuk, hogy a stílus minden valahányadik elemre vonatkozzon. A példában ezt a táblázat páros sorainak alászínezésére használtam föl, a következő kóddal:

tbody tr:nth-child(2n+2) {
background-color: #C4EAEA;
}

Minden 2. sort akartam alászínezni, és mivel az n 0-ról indul (erre nincs befolyásunk), ezért kellett a +2.

:only-of-type Ez az érdekes pszeudo-osztály azokat az elemeket választja ki, akik egyedüliként léteznek adott típusúként a szülő elemükön belül. A példába tettem egy olyan sort, amiben csak egy kép van és egy olyat, amiben három. Az :only-of-type segítségével beállítottam, hogy abban az esetben, ha csak egy kép van az adott sorban, akkor az kapjon egy bordó keretet. Ehhez a következő kódot használtam.

img:only-of-type {
border: #990000 solid thick;
}

Persze lehet vitatkozni azon, hogy ennek mennyi haszna van, de el tudok képzelni olyan design-t, ahol más stílust akarunk adni egy elemnek ha egyedül áll, és mást, ha több egyforma is van belőle.

:not() Ez is egy érdekes pszeudo-osztály. Segítségével a stílus hatálya alól kizárhatunk egy adott osztálynak megfelelő elemet. A példában ezt arra használtam fel, hogy lent, a Hozzászólások részben minden olyan hozzászólás-fejlécet szürkével jelenítsek meg, amelyet nem az admin írt, azaz nem rendelkezik az admin_comment osztállyal. Ez a kizárás a következő kóddal valósult meg:

.comment_header:not(.admin_comment) {
color: gray;
}

Kompatibilitás tekintetében egész jól állunk a pszeudo-osztályokkal. Az Internet Explorer kivételével minden fontos böngésző támogatja őket. De még őt is rá lehet a legtöbb CSS 3 pszeudo-osztály támogatására egy javascript framework, például a jquery használatával. Az Operának a :target pszeudo-osztállyal gyűlik meg a baja egy kicsit, mert nem frissíti megfelelően a stílusokat a Back és a Forward gombok használatakor. Ezeket leszámítva minden működik, de itt is érvényes az, ami a CSS 3 megoldásokra általában: mivel a szabvány még nem végéleges, ne használjuk olyan dolgokra amelyek működése nélkülözhetetlen a weboldalunkon.

::selection {
background: #FFFF00;
color: #00FF00;
}

::-moz-selection {
background: #FFFF00;
color: #00FF00;
}

Az egyszerűen selection néven futó tulajdonságot a Webkit és a Presto érti, a Gecko számára pedig a -moz-selection tuladonságra van szükségünk. Az eredményt mindenki kipróbálhatja az alábbi szövegen.

A dolog gyakorlati haszna elenyésző, de ha a designt odáig akarjuk finomítani, hogy a kijelölés színét is szeretnénk az oldal színvilágához igazítani, akkor nem teljesen haszontalan. Talán még az is lehet, hogy visszakerül a CSS 3 specifikációi közé.

Ez a tulajdonság a word-wrap, amely a hosszú szavak problémáját hivatott megoldani. Segítségével azok a szavak, amelyek hosszabbak, mint amilyen széles az őket tartalmazó entitás, nem lógnak ki, hanem “betördelődnek” a rendelkezésre álló helyre.

Ezt kapjuk word-wrap nélkül, vagy a word-wrap: normal; beállítással:

Ezt pedig akkor, ha a word-wrap: break-word; beállítást használjuk.

Megtörni egy szót az elválasztási szabályok figyelmen kívül hagyásával persze nem szerencsés, de általában még mindig jobb megoldás, mint hagyni, hogy a szépen megtervezett weboldalunkon egy ilyen csúnya sebhely éktelenkedjen, mint amilyet az első változat okoz. Persze mindennek akkor van leginkább értelme, ha a tartalom változik az oldalon – mondjuk fájlból vagy adatbázisból olvasunk be -, így nem tudhatjuk előre, milyen hosszú lesz a leghosszabb szó. De ne felejtsük el, hogy még egy statikus oldalt is “elronthat” a látogató, ha ki vagy be zoom-ol böngészője segítségével, tehát a beállítás még ilyenkor sem teljesen haszontalan.

Az Internet Exploreren kívül támogatja még a Firefox, a Safari és a Chrome, sajnos az Opera nem.

Kezdetben volt ugye a .gif, amivel az áttetszőséget megoldani próbáltuk. Aki használta már az tudja, hogy elég sok kívánnivalót hagy maga után: egy képpont vagy átlátszó vagy nem, azaz opacity = 100% vagy opacity = 0%, középút nincs. Ha viszont azt szeretnénk, hogy az objektum élethűen legyen átlátszó, szükségünk van az átmenetekre. A .png erre nagyon jó megoldás, mert engedi a részleges áttetszőséget, de az IE6 sajnos alapból nem támogatja. Szerencsére remek megoldások vannak a .png áttetszőség megtanítására az IE6-nak, de ez még mindig nem az igazi. Mi lenne, ha volna olyan megoldás, amely lehetővé tenné, hogy

1. ne csak előre legyártott .png képeket tehessünk áttetszővé
2. akkkor is áttetszővé tehessünk egy – nem csak .png formátumú – képet, ha erre nem a kép készítésekor, hanem csak utólag gondolunk

Ezekre ad megoldást a CSS 3 rém egyszerű szabálya, az opacity. Nem kell mást tennünk, mint megadnunk egy 0 és 1 közötti számot, ami az áttetszőség százalékos értéke lesz. 1 az egyáltalán nem áttetsző, 0 pedig az annyira áttetsző, hogy már nem is látszik.

img {
    opacity: .9;
}

Hogy lássuk működés közben, gyorsan összedobtam egy képet, ami akár egy website menüje is lehetne. De ahelyett, hogy egyben mentettem volna el – vagy külön a menüt és a hátteret, de .png-ben – két .jpg fájlt készítettem, ami önmagában nem támogatja az áttetszőséget. Az egyiket a másikra helyeztem és 90%-os opacity-t állítottam be. Az eredmény itt látható. A menü mögött feltűnik egy kicsit a háttér, pedig a menü .jpg fájl teljesen átlátszatlan. Aki nem hiszi, járjon utána: töltse le a menü képét (jobb klikk a menün, save as…) és nyissa meg egy képnézegető programmal. Ez persze csak a példa fájlra vonatkozik, mert itt, a poszt bélyegképén nem CSS 3 megoldást alkalmaztam, hogy a nem kompatibilis böngészőkkel rendelkezők is láthassák, miről is írok.

Végül néhány szó a támogatásról. A WebKit és a Gecko a fent leírt formában támogatja, tehát a Chrome, a Safari és a Firefox tudja. A Konqueror KHTML motorja is támogatja, de -khtml-opacity néven. Az Internet Explorernek saját módszere van, már az 5.5-ös verizótól kezdve, ami ráadásul változott a 8-as verzióval, de ennek ismertetése meghaladja a poszt kereteit

De félreértés ne essék: a lekerekített sarkok szépek, ízlésesek és a CSS 3 segítségével leegyszerűsíthetjük megvalósításukat. Ha eddig lekerekített sarkokra vágytunk, akkor választhattunk jQuery-s megoldást vagy a szintén népszerű Nifty Corners-t. A CSS 3 mellett nincs szükségünk másra, mint néhány beállításra, amire álljon itt a következő kód:

div {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

Itt pedig megnézhető a kód segítségével készült példa. A border-radius tulajdonság a kerekítés mértékét adja meg: minél nagyobb az érték, annál kerekebb a sarok.

A kerekített sarkokat egyelőre a WebKit-es Safari és Chrome, valamint a Gecko-s Firefox támogatja, kísérleti jelleggel.

A CSS 3 @font-face szabálya – bizonyos feltételekkel, de erről majd később – megoldja a problémát. Az alapötlet egyszerű. Fel kell töltenünk a kívánt betűtípus-fájlt egy olyan helyre, ahová hivatkozhatunk a stíluslapunkról, majd azt a forrásfájlt belinkeljük a stíluslapra, például így:

@font-face {
    font-family: "Myriad Pro Light";
    src: url('Myriad-Pro-Light.otf');
}

Ezután már használhatjuk is a Myriad Pro Light betűtípust a stíluslapunkon, és ha nincs meg a felhasználó gépén, akkor a CSS 3 kompatibilis böngészőnk tudni fogja, hogy hol keresse a font-fájlt:

Ez Myriad Pro Light-tal jelenik meg, ha a böngésződ is úgy akarja!

Idáig minden szép és jó volna, de sajnos ez itt még nem a kánaán. Két probléma sötétíti be a @font-face szabály napfényes egét. Az egyik probléma technikai: van amikor nem az jelenik meg, aminek kellene. Bizonyos esetekben a megírt szöveg helyett egy zagyva karakterhalmazt kapunk. Aztán lefrissítjük az oldalt és minden rendben. Aztán lefrissítjük mégegyszer és megint rossz. Ezt sikerült a Firefox-szal és a Safarival is produkálni. Remélhetőleg ezt is megoldják hamarosan.

A második probléma jogi természetű. Jelenleg alig van olyan font, amely licencszerződése engedélyezné a @font-face-es felhasználást. Persze vannak nagyon jó ingyenes fontok is, amelyeknél ez megengedett, de a mainstream designer fontok esetében ez egy komoly korlát. Főleg a fizetős munkáknál, ahol nagyon nem szeretnénk, hogy később az ügyfélt azért zaklassák, mert mi nem olvastuk el a felhasználási feltételeket. De a @font-face-ben akkora lehetőség van, hogy szerintem erre is találnak megoldást.

Ja, és működik mind a 4 CSS 3-as böngészőben: Chrome, Firefox, Opera, Safari. Sőt, még a Konqueror-ban is. Sőt, még az Internet Explorer-ben is (hű, először írom le ezt a nevet ebben a blogban ), de hogy ne bízzuk el magunkat, neki .eot formátumban kell a font. Minden más böngésző az .otf és .ttf formátumokat fogadja el, és az .eot-ot nem. De nem kell választanunk, mindkettőt deklarálhatjuk a stíluslapunkban, feltéve, hogy mindkét formátumban megvan a fontunk.

Hogy pontosabban értsük, itt egy példa, ami Firefox, Chrome és Safari alatt működik. De mire is jó ez? Manapság a legtöbb monitor inkább széles, mint magas. Viszont a weboldalak pont ellenkezőleg, inkább hosszúak, mint szélesek, ezért viszonylag sok hely marad kihasználatlanul. Persze tudom, hogy fontos a whitespace, de sokszor tényleg fölöslegesen sok hely marad. Egyszerűen azért, mert azt a szabályt is be akarjuk tartani, hogy a tartalom sorai bizonyos hosszt ne lépjenek túl. Ha figyelembe vesszük az olvasói szokásokat, nem mindegy, hogy mennyi tartalom tud a címlap rögtön látható részére kerülni. Az olvasók egy része hamarabb tovább áll, mielőtt lejjebb görgetne. Persze a túl sok és sűrű szöveg ijesztő, úgyhogy a több hasáb is csak mértékkel, és a megfelelő mennyiségű whitespace-szel együtt javasolt.

A CSS 3 többoszlopos formázási lehetőségeivel a szöveget tetszőleges számú, szélességű és távolságú hasábra lehet tördelni. Elsőre nem biztos, hogy világos ennek a jelentősége, hiszen most is készíthetünk akárhány div-et, és a szöveget elosztogathatjuk köztük. Vagy használhatjuk a következő beállítást:

p {
display: inline;
width: 200px;
}

De az első megoldással az a gond, hogy a dinamikus tartalmakról, különösen az adatbázisból származókról, szinte semmit nem feltételezhetünk előre. Lehet, hogy jól fog kinézni a szöveg, de lehet, hogy túl rövid vagy túl hosszú, megbontva ezzel a vizuális egyensúlyt. A második megoldás sem jobb, mert a bekezdések egymás mellett fognak sorakozni, így az első hasáb első bekezdése után a második hasáb első bekezdése következik, majd a harmadik hasábé, stb. És csak ha már elfogyott a vízszintes terület, mehetünk vissza folytatni az első hasáb olvasását.

A CSS-3 a column-width, a column-count, a column-rule, a column-rule-width és még több más, column előtagú beállítási lehetőséggel segít a probléma megoldásában. Mind a WebKit-ben, mind a Gecko-ban egyelőre csak kísérleti lehetőségként szerepel ez a formázás, de hellyel-közel működik. Az utasítások és a paraméterek ugyanazok, de használni kell a -webkit és a -moz előtagokat. A példában látott eredményt a következő beállítással kapjuk:

body {
    -webkit-column-count: 5;
    -webkit-column-width: 200px;
    -webkit-column-rule: dotted;
    -webkit-column-rule-width: thin;
    -moz-column-count: 5;
    -moz-column-width: 200px;
    -moz-column-rule: dotted;
    -moz-column-rule-width: thin;
}

A Firefox, legalábbis a 3.5, fontosabbnak tartja hogy az 5 oszlop betöltse a teljes body területet, mint azt, hogy egy oszlop 200 pixel széles legyen, de ez a szépséghiba feltételezhetően orvosolható ha az egészet egy fix szélességű div-be helyezzük. Ezt leszámítva működik, és szerintem egész ízléses eredmény mutat, persze nem így, hanem megfelelő módon az adott weboldal stílusához formázva.

A CSS 3 lehetőséget ad gradiensek definiálásra, helyettesítve az eddig elterjedt photoshop-os megoldást. Messze még az az idő, amikor ezt minden böngésző támogatni fogja, de a CSS 3 gradiensei már most is jó megoldást jelentenek ott, ahol a gradiens csak plusz stilisztikai elem, nem pedig a design kulcsfontosságú része. Például ezen a blogon, a háttérben a fehértől a világosszürkéig terjedő gradiens fut végig. Ezt most még csak azok láthatják, akik WebKit-es böngészőt használnak, azaz Safari-t vagy Chrome-ot, illetve azok, akik letöltötték a Firefox 3.6-os verziójának alfáját. (A Firefox 3.6 gradiens kezelése az alfa verzió óta jelentősen változott, ezért az alábbi példák nem működnek. Az új szintaxisról bővebben ebben a posztban.)

Lineáris gradiens

A megvalósítás nem bonyolult, de jelenleg layout-motor függő. A WebKit esetében a következő példa illusztrálja a használt beállítás szintaxisát:

background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));

A Firefox, a 3.6-tól felfelé, a következő szintaxist várja:

background: -moz-linear-gradient(left top, left bottom, from(#ffffff), to(#dddddd));

Az egyetlen eltérés a két formátum között, hogy a gradiens típusa a WebKit esetében egy paraméter, míg a Firefox Gecko motorja esetében a függvény nevében szerepel. Meg kell adni a gradiens kezdőpontját és a végpontját, valamint a kezdőszínt és a célszínt. A köztes színeket a függvény kiszámolja. A kezdő és végpontokat lehet pixel szinten, százalékban vagy olyan módon megadni, ahogy én tettem a példában. Lehet még szín-stopot is közbeiktatni, mégpedig a color-stop (a, b) formulával. Itt a vagy egy százalékban megadott, vagy egy 0 és 1 közötti szám, és ez jelöli a szín-stop helyét, b pedig az a szín, amit a megadott ponton látni szeretnénk. Íme egy Firefox példa:

background-image: -moz-linear-gradient(left, right,
from(red),
color-stop(16%, orange),
color-stop(32%, yellow),
color-stop(48%, green),
color-stop(64%, blue),
color-stop(80%, indigo),
to(violet));

Itt egy példa lineáris gradiensre, WebKit és Gecko támogatással.

Körgradiens

Persze nem csak lineáris gradienst készíthetünk. A WebKit esetében így adhatunk meg körgradienst, akár többet is:

background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),
-webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188));

A Firefox szintaxisa körgradiens megadására a következő:

background: -moz-radial-gradient(45px 45px, 15px, 55px 55px, 40px, from(aqua), to(rgba(0, 0, 255, 0)), color-stop(0.95, blue));

Körgradiens példa. A WebKit-es böngészőt használók 2-t látnak, a Gecko-sok 1-t.

Hol használhatjuk?

A Gecko még elég korlátozottan támogatja a gradienseket: még az említett 3.6 alfa is csak a background paraméter részeként. A WebKit ennél sokkal szélesebb lehetőségeket nyújt. Mindenütt használható gradiens, ahol kép (img) használata megengedett. Példák:

• background-image
• border-image
• list-style-image
• content property