Setelah sekian minggu tidak update akhirnya saya dapat meluangkan waktu untuk kembali meng-update blog ini dengan posting-postingan yang sobat tunggu-tunggu (siapa yang nunggu? -_-") tentunya saya akan kembali share apa yang saya ketahui tentang keindahan css3, heuheuheu..
Pada kesempatan kali ini saya akan mengajak sobat untuk membuat Animasi Galeri dengan Css3 yang pasti unik dan menarik dilihat mata (o.o).
Fitur utama Css pada tutorial ini adalah z-index yang berfungsi untuk menempatkan suatu objek didepan ataupun dibelakang objek lainnya.
Silahkan saksikan live demonya :
hanya di http://se-avancee.blogspot.com
|
|---|
/* First Css States */
ul#index_SE {
margin-top:10px;
text-align:center;
}
ul#index_SE li {
background:#ccc;
height:300px;
width:130px;
display:block;
float:left;
border:1px solid #666;
padding: 0 10px;
position:relative;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 2px 2px 10px #000;
-moz-box-shadow: 2px 2px 10px #000;
-webkit-box-shadow: 2px 2px 10px #000;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
}
#SE-Gallery1 {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
z-index:2;
left:70px;
top:10px;
}
#SE-Gallery2 {
background-color:#69732B;
z-index:3;
}
#SE-Gallery3 {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
z-index:2;
right:70px;
top:10px;
}
/* Hover States */
ul#index_SE li:hover {
z-index:4;
}
#SE-Gallery1:hover {
-moz-transform: scale(1.1) rotate(-8deg);
-webkit-transform: scale(1.1) rotate(-8deg);
}
#SE-Gallery2:hover {
-moz-transform: scale(1.1) rotate(2deg);
-webkit-transform: scale(1.1) rotate(2deg);
}
#SE-Gallery3:hover {
-moz-transform: scale(1.1) rotate(12deg);
-webkit-transform: scale(1.1) rotate(12deg);
}
/* Content Styling */
ul#index_SE li img {
background:#fff;
margin-top: -5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0px 0px 5px #aaa;
-moz-box-shadow: 0px 0px 5px #aaa;
-webkit-box-shadow: 0px 0px 5px #aaa;
}
h5 {
font-family: comic Sans MS;
padding-bottom: 10px;
}
<ul id="index_SE">
<li id="SE-Gallery1">
<h5>
FACEBOOK</h5>
<a href="http://facebook.com/" target="_blank"><img alt="Facebook" height="auto" src="https://lh4.googleusercontent.com/-RFxyYq_BUE0/Tqa5zp0XFvI/AAAAAAAABko/o39fosqkw3Q/s232/IpodFB.png" title="Facebook" width="auto" /></a>
</li>
<li id="SE-Gallery2">
<h5>
SE AVANCEE</h5>
<a href="http://se-avancee.blogspot.com/" target="_blank"><img alt="Se Avancee" height="auto" src="https://lh5.googleusercontent.com/-ok-U5R1v3pA/Tqa5zESyUrI/AAAAAAAABkg/wxsBkBrElJU/s232/ipodSA.png" title="Se Avancee" width="auto" /></a>
</li>
<li id="SE-Gallery3">
<h5>
TWITTER</h5>
<a href="http://twitter.com/" target="_blank"><img alt="Twitter" height="auto" src="https://lh4.googleusercontent.com/-_3zsJsBOYec/Tqa5yqYrQlI/AAAAAAAABkc/lFRj5oaSFxQ/s232/IpodTW.png" title="Twitter" width="auto" /></a>
</li>
</ul>
Catatan :
* -webkit-transform: rotate(10deg); & -moz-transform: rotate(10deg); berfungsi untuk membuat suatu objek menjadi miring atau terbalik, 10deg menunjukan nilai kemiringan 10 derajat.
* -moz-transform: scale(1.1) rotate(-8deg); & -webkit-transform: scale(1.1) rotate(-8deg); berfungsi untuk membuat suatu objek miring atau terbalik (rotate) sekaligus membesarkan suatu objek, scale atau skala 1.1 adalah nilainya.
Pertanyaan lebih lanjut silahkan salurkan pada komentar dibawah ini.
