[CSS] Lustrzane odbicie

W dzisiejszym krótkim artykule po dłuższej przerwie postanowiłem opisać sposób na zrobienie lustrzanego odbicia jakiegoś obrazka.
Dzięki temu, będzie można tworzyć efektownie wyglądające galerie zdjęć bez wykorzystywania skryptów PHP czy JavaScript.
Niestety, ta metoda ma jedną wadę - nie działa we wszystkich przeglądarkach. Działa jedynie w przeglądarkach opartych o silnik Webkit, czyli Google Chrome i Safari. Lecz istnieje prawdopodobieństwo, że w przyszłości specyfikacja CSS3 zostanie wzbogacona o obsługę tego typu efektów.

Na początek tworzymy strukturę HTML naszej galerii, która może przyjąć następującą postać:

<p>
   <img class="reflex" src="img1.jpg" alt="Mustang 1" />
   <img class="reflex" src="img2.jpg" alt="Ferrari" />
   <img class="reflex" src="img3.jpg" alt="Mustang 2" />
</p>

.reflex {
	-webkit-box-reflect: below 0px /*kierunek gradientu przezroczystego - above|below|left|right*/
	-webkit-gradient(linear, 0% 0%, 0% 100%, /*krycie gradientu, w tym kierunek krycia - top left | bottom left*/
	from(transparent), color-stop(0.25, transparent), to(white)); /*maska kryjąca - więcej o tym, tutaj - http://webkit.org/blog/181/css-masks/*/
}