Membuat Efek Cermin Dengan CSS

Metode sederhana ini dapat menghasilkan gambar dengan efek bayangan/ mirror (Reflecting Images) yang memungkinkan kita untuk mencerminkan gambar pada latar belakang apapun. Mudah dibuat karena hanya dengan menggunakan CSS.

Demo Reflecting Images

Untuk membuatnya, kita hanya memerlukan data seperti berikut ini:

CSS

<style type="text/css">
.outerBlack {width:420px; height:420px; background:#000; text-align:center; padding:25px; border-radius:20px; margin:10px 0;}
.element {position:relative; float:left; margin-right:15px;}
.element:nth-last-of-type(1) {margin:0;}

.element:before {display:block; width:100%; height:100%; position:absolute; top:100%; left:0; z-index:10;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.element:after {content:""; display:block; width:100%; height:100%; position:absolute; top:100%; left:0; z-index:100;}
.outerBlack .element:after {
background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1));
}
.p1:before {content:url(https://sites.google.com/site/archivesiugi/home/load/Hot-dan-Sexy.jpg);}
</style>

HTML

<div class="outerBlack">
<div class="element p1"><img src="https://sites.google.com/site/archivesiugi/home/load/Hot-dan-Sexy.jpg" alt="" /></div>
</div>

sumber: cssplay

Share this post