css-3Blog

Bizonyára sokan találkoztatok már különféle weboldalakon a különböző képi elemek tükrözésével. Főleg az Apple designjaira jellemző, hogy szinte minden képet tükröződve mutatnak. De még ilyen messzire sem kell menni, elég ha ennek a weboldalnak a fejlécét nézitek, és máris látni fogjátok miről beszélek. Most megmutatom, hogy hogyan lehet ezt a hatást CSS 3 segítségével elérni.

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ó.