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.
Co znajdziesz w tym wpisie
Odbicia lustrzane z pomocą 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://www.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://www.aurainweb.pl/wp-content/uploads/2018/03/parasolki-150x150.jpg" alt="" width="150" height="150" />
<img class="wp-image-10320 size-medium" src="https://www.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://www.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://www.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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.