™Galery™

Masih seputar CSS3  yang tetap saya baca dari www.rudyazhar.com karena menurut saya Tutorial-tutorial css3 yang beliau jelaskan sangatlah jelas, menarik dan mudah dipahami, untuk kali ini saya masih mencoba untuk memasangkan efek-efek CSS3 ini pada Gadget Label, bisa digunakkan untuk yang lainnya juga jadi silahkan dikembangkan saja. jangan lupa juga baca artikel sebelumnya Membuat efek Link Nudging Pada Label dengan CSS3 sebelum mencoba artikel ini.

1. Login blogger
2. Rancangan, Elemen laman
3. Cari kode ]]></b:skin> dan simpan CSS berikut diatasnya :

#Label1 .widget-content ul li :hover { width: 65%; color: #000;
background: #a647d8;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
-webkit-transform: scale(1.05) rotate(-1deg);
-moz-transform: scale(1.05) rotate(-1deg);
-o-transform: scale(1.05) rotate(-1deg);
transform: scale(1.05) rotate(-1deg);
-moz-transition: all 0.26s ease-out;  /* FF4+ */
-o-transition: all 0.26s ease-out;  /* Opera 10.5+ */
-webkit-transition: all 0.26s ease-out;  /* Saf3.2+, Chrome */
-ms-transition: all 0.26s ease-out;}

#Label1 .widget-content ul li a:nth-child(2n):hover {
    padding: 5px;
-webkit-transform: scale(1.05) rotate(1deg);
-moz-transform: scale(1.05) rotate(1deg);
-o-transform: scale(1.05) rotate(1deg);
transform: scale(1.05) rotate(1deg);
}