Dzisiejszy wpis będzie o CSS image reflections, czyli technice pozwalającej osiągnąć efekt lustrzanego odbicia - możliwy jakiś czas temu jedynie za pomocą Photoshopa. Plus jest taki, że można go stosować już od roku 2008! Gdzie tkwi haczyk? We wsparciu przeglądarek, ponieważ działa to jedynie w tych opartych o WebKita (Chrome, Safari), a do tego trzeba jeszcze stosować odpowiedni atrybut z przedrostkiem.

Problem

Zacznijmy jednak od początku. Wielu front-end developerów miało zapewne do czynienia z bogatą wyobraźnią i fantazją grafików, którzy wpadali czasami na pomysł, by stworzyć efekt lustrzanego odbicia jakiegoś obrazka w podłożu. Takie podejście zazwyczaj kończyło się na wycięciu całości, wstawieniu jej w odpowiednim miejscu i gotowe - zapominamy o problemie. Rzadko zdarzało się, by ktoś się nagle rozmyślał i postanawiał zmienić na przykład wielkość odbicia. Jeśli już, to i tak zabawa sprowadzała się do tego, by grafik podrzucił nam nowy obrazek. Niby problem niewielki, ale... no właśnie. Po co się męczyć, jeśli mamy do dyspozycji magię CSS3!

Rozwiązanie

Aby skorzystać z dobroci CSS wystarczy użyć -webkit-box-reflect. Zobaczmy jak wygląda to w teorii:
-webkit-box-reflect {
  kierunek
  przesunięcie
  maska
}

Kierunek przyjmuje jedną z czterech wartości: left, right, above lub below. Przesunięcie pozwala na umieszczenie odbicia w pewnej odległości od pierwotnego obrazu, np. 10px. Maska pozwala nam dodać odpowiedni efekt.

Przykład

box reflectZobaczmy jak to może wyglądać w praktyce: Zobacz DEMO.
Zaokrąglone rogi i delikatny cień pod obrazkiem to tylko dodatkowy styl, by przykład nie wyglądał topornie. Kod CSS odpowiedzialny za efekt odbicia wygląda następująco:
img {
  -webkit-box-reflect: below 0
    -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(transparent),
      color-stop(0.5, transparent),
      to(white)
  );
}

W powyższym przykładzie jako maski użyliśmy gradientu, dzięki czemu im dalej znajduje się odbicie od oryginału, tym jest mniej widoczne.

Refleksje dla Firefoxa: -moz-element i maska SVG

Istnieje możliwość uzyskania zbliżonego efektu w przeglądarce Firefox, jednak wiąże się to z użyciem -moz-element. Całość polega na odpowiednim umieszczeniu jednego elementu jako tła drugiego elementu, a następnie użycia na nim maski SVG. Więcej o tym rozwiązaniu przeczytać można we wpisie Lea Verou, a także obejrzeć w akcji na CSS Play.

Podsumowanie

Jestem ciekaw czy inne przeglądarki zaimplementują box-reflect, co nie jest takie oczywiste, ponieważ istnieją także przeciwnicy tej techniki. Na pewno jest to ładniejsze, niż używanie -moz-element czy maski SVG, przynajmniej ja tak to widzę. Poza tym coraz więcej ciekawych efektów jesteśmy w stanie zrealizować za pomocą czystego CSSa, co jest bardzo dobrym podejściem. Grafik nadal może szaleć, a strona i tak będzie wyglądać identycznie będąc jednocześnie lekką i dynamiczną. To jest przyszłość CSS3, którą tworzymy właśnie teraz.