Lustrzane odbicia obrazków z CSS

zdjęcia, photos, images

Kategoria wpisu Kurs CSS, PHP, HTML, CSS Tagi: , , , on przez .



Reading Time: 3 minutes

Dzisiaj pokażę wam jak uzyskać efekt lustrzanego odbicia obrazka (ang. CSS image reflections) z pomocą CSS. Aktualnie z pomocą CSS można uzyskać ten efekt na kilka różnych sposobów.

Efekt odbicia będziemy się starać uzyskać dla obrazka poniżej:

Odbicie z pomocą -webkit-box-reflect

To chyba najprostszy sposób dokonania obrotu obrazka, jednak jest pewien haczyk. Metoda ta nie jest obsługiwana przez wszystkie przeglądarki internetowe. Z właściwości WebKit korzystają na pewno przeglądarki Chrome, Safari, Opera – ale inne już nie koniecznie.

-webkit-box-reflect posiada 3 parametry wartości:

  • Kierunek
    • above; – nad
    • below; – pod
    • left; – na lewo
    • right; – na prawo
  • Przesunięcie
  • Maska

 

Struktura powyższego przykładu:

Kod HTML

Kod CSS

Dwa obrazy

Drugi efekt z kolei polega na zastosowaniu dwóch grafik z których jedna zostanie odpowiedni zmodyfikowana w CSS. Do wykonania tego efektu użyjemy właściwości transform.

Jak widać powyżej obrazki są odpite względem siebie w pionie.

Uzyskałam ten efekt dzięki:

Na razie wszystko idzie dobrze. Teraz przechodzimy do kolejnego etapu obracania.

Poniżej znajdziecie kod tego przykładu:

 

Podsumowanie

Powyższe przykłady nie są jedynymi sposobami na odbicie lustrzane jednak są bardzo łatwe w realizacji i nie powinny powodować wiele problemów.

Znacie jeszcze jakieś sposoby tworzenia odbić obrazków możesz zostawić je w komentarzu poniżej.

 

źródła:
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect
http://blog.end3r.com/152/refleksje-lustrzane-odbicia-obrazkow-w-css-za-pomoca-box-reflect/
http://monkeyraptor.johanpaul.net/2013/07/how-to-mirror-image-using-css3.html

Przeczytaj również

Figury geometryczne z użyciem CSS Pojawienie się CSS3 dało bardzo duże możliwości twórcą stron internetowych (ale nie tylko) a w połączenia z HTML5 zmieniło kodowanie stron w prawdziwe...
Mieszanie kolorów z selektorem mix-blend-mode Właściwość CSS mix-blend-mode określa sposób łączenia się ze sobą elementu nadrzędnego np. obrazka z tłem umieszczonym pod nim. Efekt końcowy jest pod...
Tworzenie przykładowego pliku w SASS Niestety przeglądarki internetowe nie są w stanie samodzielnie odczytać pliku typu SASS, aby to zinterpretować trzeba wygenerować na jego bazie plik C...
Właściwość CSS user-select Właściwość user-select kontroluje możliwość kopiowania tekstu i wyboru obiektu przez użytkownika. Z pomocą tej właściwości można np. zablokować możli...