Make Reflection Effect use CSS3 Gradients

Apa yang mau di posting? Mari kita bermain-main dengan CSS3 gradient Jenis CSS gradients bisa di bagi menjadi dua: Linear Gradient (turun/naik/kiri/kanan/diagonal) dan Gradient radial (pusat/center) AA Koben akan berbagi bagaimana cara membuat effect reflection menggunakan CSS linear-gradient Efek seperti memantulkan bayangan dengan permainan warna latar belakang and linear gradients property.

Demo & resource: cssdeck.com/labs/full/iesvlset

Gue modif kode yg sudah ada dengan menyisipkan variasi gambar!

.icon-r {
top: 0;
color: #fff;
width: 65px;
height: 65px;
line-height: 65px;
font-size: 40px;
cursor: pointer;
border-radius: 5%;
text-align: center;
position: relative;
display: inline-block;
-webkit-transition: top 250ms;
-moz-transition: top 250ms;
-o-transition: top 250ms;
transition: top 250ms;
background: -moz-linear-gradient(#000,#555);
background: -o-linear-gradient(#000,#555);
background: linear-gradient(#000,#555);
background: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#000),color-stop(100%,#555));
background: -webkit-linear-gradient(#000,#555);
}
.icon-r span {
opacity:.8;
-webkit-transition: opacity 250ms;
-moz-transition: opacity 250ms;
-o-transition: opacity 250ms;
transition: opacity 250ms;
}
.icon-r span img {
margin: 0;
padding: 0;
border-radius: 5%;
vertical-align: middle;
}
.icon-r:hover {
top: -5px;
}
.icon-r:hover span {
opacity: 1;
}
.icon-r:hover:after {
bottom: -62px;
}
.icon-r:after {
content:'';
left: 0;
width: 65px;
height: 50px;
bottom: -50px;
position: absolute;
border-radius: 5%;
opacity: .5;
-webkit-transition: bottom 250ms;
-moz-transition: bottom 250ms;
-o-transition: bottom 250ms;
transition: bottom 250ms;
background: -webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#fff),color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(#fff,rgba(255,255,255,0));
background: -moz-linear-gradient(#fff,rgba(255,255,255,0));
background: -o-linear-gradient(#fff,rgba(255,255,255,0));
background: linear-gradient(#fff,rgba(255,255,255,0));
}

<div class="icon-r">
  <span><img src="http://2.bp.blogspot.com/-dJzGsy51O_E/UQBGTp-p8vI/AAAAAAAAA64/AqqyU4NdKvE/s1600/twitter.png" alt="Tweet" /></span>
</div>
<div class="icon-r">
  <span><img src="http://2.bp.blogspot.com/-z4lRtTukgo0/UQBGMkSRRKI/AAAAAAAAA6s/Q_DmGd2ehv0/s1600/facebook.jpg" alt="FB" /></span>  
</div>
<div class="icon-r">
  <span><img src="http://2.bp.blogspot.com/-MkHfO5ZdM7o/UQBGZDHwsUI/AAAAAAAAA7E/JpTVTAi9PTg/s1600/facebook.jpg" alt="YouTube" /></span>
</div>

Warna reflection cocok untuk area dengan warna latar gelap. Kalau untuk area dengan warna terang, sobat tinggal ganti saja kode background pada icon-r:after

Bye :-h