Odbicie lustrzane w CSS3 – funkcje transform i gradient
Surfując po Internecie regularnie spotykam strony, wykorzystujące rozmaite możliwość najnowszej wersji CSS. Standardem stają się zaokrąglone rogi, cienie i mniejsze lub większe animacje. Czasami jednak można przy pomocy kombinacji kilku funkcji stworzyć interesujący efekt. Tym razem pokażę jak przygotować prezentację zdjęcia, wraz z delikatnym odbiciem lustrzanym u jego podstawy. Końcowy efekt poniższego artykułu można zobaczyć na przygotowanej stronie demo.
Podstawowy HTML
Zaczniemy jak zwykle od początku, czyli od pokazania wykorzystanego kodu HTML.
<div class="content">
<div class="image">
<img src="http://placekitten.com/100/150" alt="" />
<div><img src="http://placekitten.com/100/150" alt="" />
<div class="fade"></div>
</div>
</div>
<div class="image">
<img src="http://placekitten.com/100/150" alt="" />
<div><img src="http://placekitten.com/100/150" alt="" />
<div class="fade"></div>
</div>
</div>
</div>Dla wygody interesujące nas obrazki umieszczam w jakimś kontenerze, w tym przypadku o nazwie klasy content. Obrazek wraz z jego odbiciem umieszczam w kontenerze o klasie image. Kolejny div odpowiada za nasze odbicie lustrzane, więc w nim umieszczamy drugi raz interesujący nas obraz, który potem za pomocą CSS3 odwrócimy i zasłonimy półprzezroczystym gradientem stworzonym dzięki pustemu divowi o klasie fade.
W tym miejscu warto zauważyć konieczność dublowania tego samego obrazka, co prawda wczyta się on tylko raz, ale w dużych ilościach efekt ten może lekko zwolnić naszą przeglądarkę. Warto więc ostrożnie korzystać z tego rozwiązania.
Kod CSS
Jak widać powyżej, kod HTML do tego przykładu nie jest trudny i myślę, że nie powinien przysparzać nikomu kłopotów. Do naszego rozwiązania wykorzystamy funkcje transform i gradient dostępne w CSS3. W powyższych linkach znajdują się szczegółowe informacje na temat tych funkcji. Osoby bardziej zainteresowane tematem, zachęcam do ich przeczytania. Oczywiście dla wygody i przyspieszenia pracy wykorzystałem liczne generatory CSS3, opisane wcześniej w artykule: Narzędzia CSS3.
Jak zwykle opisze kolejne ważne elementy kodu CSS osobno, a na końcu zamieszczę końcowy listing ze stylami.
Na początku naszym zadaniem jest ustawienie obu zdjęć jedno pod drugim.
.image{ width:100px;float:left;margin-right:20px; }Cały kontener ograniczamy do szerokości obrazka, czyli w naszym przypadku 100px, to automatycznie ustawia drugi obrazek poniżej.
Teraz czas na obrócenie naszego obrazka, wykorzystamy do tego wspomniany wcześniej generator co zaowocuje nam kodem.
.image div img{
-moz-transform: scaleY(-1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scaleY(-1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scaleY(-1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scaleY(-1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scaleY(-1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
filter: FlipV;
-ms-filter: "FlipV";
}Dzięki takiej metodzie w łatwy i szybki sposób stworzymy kod przeznaczony dla wielu przeglądarek. Jedna z wad generatorów jest tworzenie dosyć rozbudowanego kodu. W rzeczywistości wszystkie parametry z wartościami zerowymi można pominąć, pozostawiając tylko opcje scaleY(-1). Oczywiście dla IE stosujemy dodatkowe, alternatywne metody filter.
Jak mamy już obrócony obrazek, to czas zmniejszyć jego przezroczystość. W tych parametrach warto poeksperymentować, gdyż znacząco wpływają one na jakość prezentowanego odbicia.
.image div img{
filter: alpha(opacity=25);
opacity: 0.25;
}Ostatnim etapem naszej pracy jest stworzenie gradientu imitującego płynne znikanie naszego odbicia w tle. Zaczniemy od relatywnego ustawienia naszego diva fade względem odbitego obrazka.
.image div .fade {
position:absolute; top:0px; left:0px; width:100px; height:150px;
}Następnie przy pomocy genialnego generatora, tworzymy gradient. Od dołu w kolorze naszego tła (u mnie biały), kolejny krok w okolicy 40% wysokości również w kolorze tła i ostatni najwyższy punkt przezroczysty. Wynikiem tego otrzymamy kod podobny do:
.image div .fade {
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(40%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 100%); /* W3C */
}
I tym sposobem doszliśmy do końca naszego artykułu, poniżej przedstawiam kod CSS w całości.
<style type="text/css">
.image{width:100px;float:left;margin-right:20px;}
.image div {
position:relative;
height: 50px;overflow: hidden; /* Dla IE*/
}
.image div img{
-moz-transform: scaleY(-1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scaleY(-1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scaleY(-1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scaleY(-1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scaleY(-1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
filter: FlipV;
-ms-filter: "FlipV";
filter: alpha(opacity=25);
opacity: 0.25;
}
.image div .fade {
position:absolute; top:0px; left:0px; width:100px; height:150px;
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(40%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 100%); /* W3C */}
</style>Ograniczenia
Warto chwilę zatrzymać się i zastanowić nad ograniczeniami jakie posiada ta metoda. Po pierwsze tło naszej strony musi być jednolitym kolorem, a prawdziwy obszar naszego obrazka zajmuje podwójną wysokość (właściwy obrazek + jego odbicie). Dochodzi jeszcze oczywiście kompatybilność ze starszymi przeglądarkami, oraz problem z gradientami w Internet Explorerze, które nie posiadają wielostopniowych gradientów. W tym przypadku można gimnastykować się z wysokością naszego odbicia, np.:
.image div {
height: 50px;overflow: hidden; /* Dla IE*/
}
albo najzwyczajniej w świecie wyłączyć ten efekt, poprzez wcześniejsze wykrycie przeglądarki i zastosowanie funkcji display:none;.
DyskusjaKomentarze: 1
A czy jest możliwość przy pomocy CSS zdublowania raz wstawionego elementu i przeprowadzania odpowiednich manipulacji a takiej kopii?
Ciekawie by było gdyby można zmultiplikować odpowiednie elementy (nie koniecznie tylko obrazki), bez ingerencji w kod HTML.
P.S. Namiastkę takiego rozwiązania zobaczyłem w text-shadow, które może służyć jako "kopiowania" napisów. Jednakże takie "kopie" można przetwarzać jedynie pod kątem koloru i rozmycia kształtów.
Dodaj komentarz Komentarze są moderowane, a przy linkach używane jest rel="nofollow". Prosimy o nie reklamowanie i nie spamowanie w komentarzach.
Linki tworzone za pomocą tagu [url] np: [url=www.xyz.pl]xyz[/url]
Źródła za pomoc tagu [code] z wskazaniem języka np. [code=php] echo [/code]