Make Reflection Effect use CSS3 Gradients - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Reflection Effect use CSS3 Gradients, we have prepared well for this article you read and download the information therein. hopefully fill posts Article CSS, Article CSS3, Article HTML, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make Reflection Effect use CSS3 Gradients
link : Make Reflection Effect use CSS3 Gradients

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

Thus articles Make Reflection Effect use CSS3 Gradients

that is all articles Make Reflection Effect use CSS3 Gradients This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Reflection Effect use CSS3 Gradients with the link address https://autopostingblogspot.blogspot.com/2014/11/make-reflection-effect-use-css3.html