Lustrzane odbicia obrazków z pomocą CSS

Dzisiaj pokażę wam jak uzyskać efekt lustrzanego odbicia obrazka (ang. CSS image reflections) na stronie internetowej z pomocą CSS. Na chwilę obecną istnieje kilka różnych metod z pomocą, których uzyskać możemy złudzenie odbicia. Dziś omówię najpopularniejsze z nich.

Jak zrobić odbicie lustrzane w CSS?

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

Odbicie z pomocą box-reflect (-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.

box-reflect (lub -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

<div class="box">
<img class="aligncenter wp-image-10320 size-medium first" src="https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg" alt="" width="150" height="150" />
</div>

Kod CSS

.box {
width: 100%;
height: 310px; }
.first{
-webkit-box-reflect: below 5px linear-gradient(transparent, blue);
box-reflect: below 5px linear-gradient(transparent, blue);
}

Z pomocą dwóch obrazów

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:

<img class="wp-image-10320 size-medium second" src="https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg" alt="" width="150" height="150" />
<img class="wp-image-10320 size-medium" src="https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg" alt="" width="150" height="150" />

.second{
border:0;
 display:inline-block;
 transform:scale(-1,1);
-webkit-transform:scale(-1,1);
 -moz-transform:scale(-1,1);
-o-transform:scale(-1,1)
}

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

<div class="box">
  <img class="wp-image-10320 size-medium" src="https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg" alt="" width="150" height="150" />
  <img class="wp-image-10320 size-medium third" src="https://aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg" alt="" width="150" height="150" />
</div>

.box {
width: 100%;
height: 310px; }
.box img {
border:0;
display:block;
margin:auto;
}

.third{
border:0;
 display:block;
 margin:auto;
 -moz-transform: scale(1,-1);
 -o-transform: scale(1,-1);
 -webkit-transform: scale(1,-1);
 transform:scale(1,-1);
 opacity:0.4;
 margin-top:-50px;

}

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