[CSS] Lustrzane odbicie

CSS Opublikowano: 22/08/2010

O autorze

Jestem webmasterem/webdeveloperem
z pasji. Lubię to co robię i chcę dzielić się wiedzą z innymi osobami.
Specjalizuję się w technologiach związanymi z CSS, JS, PHP.

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>

Jak pewnie zauważyłeś, drogi czytelniku, obrazki mają przypisaną klasę. Ma to na celu wskazanie, które obrazki mają mieć odbicie lustrzane.
Kod CSS odpowiadający za obsługę obrazków z odbiciem lustrzanym wygląda następująco:

.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/*/
}

To by było na tyle. Cała magia opiera się na tym jednym, rozbudowanym atrybucie.
Demo z tego artykułu jest dostępne pod tym linkiem: lustrzane odbicie obrazka

4 komentarze/y

procek
22/08/2010 o 13:31
Właśnie w tym jest kłopot, że nie możemy użyć takiego efektu w zastosowaniu produkcyjnym :/ Chrome i Safari mają zbyt mały udział w rynku, aby zainteresować się tym efektem na poważnie. Weźmy jeszcze pod uwagę IE6, który ciągle jeszcze istnieje i wychodzi na to, że wszelkie tego typu bajery musimy odłożyć do szuflady na kolejny rok… Póki co najpewniej jest używać efektów oferowanych np. przez jQuery – tam już ktoś za nas postarał się o to, aby to działało wszędzie…
Piotr Nalepa
22/08/2010 o 17:00
Uważam, że dalsze stosowanie się do IE6 obecnie mija się z celem. Zazwyczaj stosuję metody nakłaniające zmianę przeglądarki co najmniej na IE7. Bo tutaj chodzi też o bezpieczeństwo przeglądania stron WWW. Nawet Microsoft oficjalnie wycofał swoje wsparcie dla IE6.
Co do efektów tylko pod pojedyncze przeglądarki, to uważam że warto je znać, bo być może w najbliższym czasie zostaną zastosowane w pozostałych przeglądarkach.
Poza tym, zawsze można zrobić jakieś ekstra „ficzery” dla użytkowników danej przeglądarki.
KejeN
25/08/2010 o 11:00
Efekt jest porażający. Szkoda, że teraz tylko na webkit, ale nie mniej jednak css3 ciągle mnie zaskakuje bardzo pozytywnie. A co do IE6 to czy producenci filmów itd w HD patrzą na to, że ktoś może ma w domu ‘jupitera’ z 70 lat?
Comandeer
02/11/2010 o 21:40
Nie tylko na webkit. Obecnie gradient jest już w Firefoksie (3.6 chyba, 4.0 na pewno) i Operze – trochę inna składnia. Poza tym gradient jest już dołączony do specyfikacji CSS 3, właśnie ze składnią z FX.