[CSS]Lustrzane odbicia obrazków z użyciem CSS

Dzisiejsze czasy wymagają od projektantów stron WWW umiejętności tworzenia ciekawych efektów przyciągających uwagę użytkownika strony internetowej. Jednym z obszarów w którym szczególnie wskazane jest korzystanie z nich są galerie zdjęć czy też prezentacje produktów w sklepach internetowych. Do ich uatrakcyjnienia można wykorzystać lustrzane odbicia i to jest tematem dzisiejszego artykułu.

Sekcja 1Kod HTML

W naszym przypadku będziemy tworzyć prostą galerię zdjęć do których będą dodane lustrzane odbicia.
Przykładowy kod HTML wygląda następująco:

1 2 3 4 5 6 7 8 9

<section id="reflex"> <div class="image-block">   <div class="reflection">   <div class="overlay"></div> </div> ... </section>

<section id="reflex"> <div class="image-block"> <div class="reflection"> <div class="overlay"></div> </div> ... </section>

Jak widać powyżej, kontenerem zbiorczym będzie sekcja z przypisanym id - reflex i do niej wstawiamy kolejne elementy zawierające pojedyncze zdjęcie. Element ten ma klasę image-block, a w nim znajduje się zdjęcie normalne oraz element ze zdjęciem odbitym i nakładką z przejściem gradientowym.

Sekcja 2Kod CSS

Następnym krokiem jest utworzenie kodu CSS odpowiedzialnego za stworzenie efektu odbicia. Wykorzystamy tutaj atrybuty z prefiksami, ponieważ nie ma jednego ogólnego standardu dla nich i każdy producent przeglądarek tworzył je na własną modłę.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

.image-block { width: 200px; margin: 0px 10px; float: left; } .image-block img { width: 200px; height: 150px; margin: 0; } .reflection { position:relative; } .reflection img { -webkit-transform: scaleY(-1); -moz-transform: scaleY(-1); -ms-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1); filter: flipv; opacity: 0.33; } .overlay { position:absolute; top: 0px; left: 0px; width: 200px; height: 150px; background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%); background-image: -o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0))); }

.image-block { width: 200px; margin: 0px 10px; float: left; } .image-block img { width: 200px; height: 150px; margin: 0; } .reflection { position:relative; } .reflection img { -webkit-transform: scaleY(-1); -moz-transform: scaleY(-1); -ms-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1); filter: flipv; opacity: 0.33; } .overlay { position:absolute; top: 0px; left: 0px; width: 200px; height: 150px; background-image: -moz-linear-gradient( center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%); background-image: -o-linear-gradient( rgba(255,255,255,0) 25%, rgb(255,255,255) 40%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0))); }

Jak zapewne zauważyłeś/aś, atrybuty z prefiksami zostały zastosowane do osiągnięcia gradientu (*-gradient) i odwrócenia zdjęcia (*-transform).
Tak przygotowany kod będzie się dobrze wyświetlał we wszystkich przeglądarkach Mozilla Firefox, Opera, Google Chrome oraz Safari.
Dla Internet Explorera kod będzie wyglądał nieco inaczej.

Sekcja 3Kod dla IE

Tak jak wspomniałem wyżej, kod dla IE jest inny. Wykorzystałem do tego celu JavaScript w postaci biblioteki jQuery oraz dodatku Reflecton.js. Jest to nieuniknione, aby osiągnąć ten sam efekt. Na początku, należy dodać następujący kod do sekcji HEAD strony:

1 2 3 4

<!--[if IE ]> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="reflection.js"></script> <![endif]-->

<!--[if IE ]> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="reflection.js"></script> <![endif]-->

Kolejnym krokiem, który podjąłem, było stworzenie krótkiego kodu JS, który modyfikuje drzewko DOM strony WWW:

1 2 3 4 5 6

<script> $(document).ready(function() { $('.reflection').remove(); $('.image-block img').addClass('reflect'); }) </script>

<script> $(document).ready(function() { $('.reflection').remove(); $('.image-block img').addClass('reflect'); }) </script>

Usuwa on elementy z klasą reflection z kodu strony, a następnie do obrazków umieszczonych w elemencie o klasie image-block dodaje klasę reflect. Dzięki temu nasz skrypt specjalnie przygotowany dla IE również utworzy lustrzane odbicia obrazków, takie same jak dla przeglądarek poprawnie obsługujących CSS3.

Sekcja 4Podsumowanie

W ten sposób doszliśmy do końca prac nad uzyskaniem efektu lustrzanego odbicia dla naszej galerii zdjęć. Dzięki temu tak utworzona galeria uzyska nowy wygląd, który będzie potrafił przyciągnąć uwagę użytkownika i zachęci do interakcji z taką galerią.
Demo z tego artykułu można zobaczyć tutaj: CSS lustrzane odbicia