Cara Membuat Efek Rotate Miring Dengan CSS3

Thursday, December 22, 2011



Welcome To GENETIK [ Generasi Teknik Informatika ] :
Hallo Semua Sobat Inside Lovers, kali ini Blog's GENETIK [ Generasi Teknik Informatika ] akan memposting Cara Membuat Efek Rotate Miring Dengan CSS3,
oke tanpa basa basi lagi liat tutorialnya di bawah :



 Pada kesempatan kali ini saya ingin membahas 'Cara Membuat Efek Animasi Miring' maksudnya disini Ketika mouse disorot ke header maka header tersebut bergerak ke posisi normal yang sebelumnya miring. Efek Miring tersebut tidak hanya pada header saja, namun pada semua widget di blog anda seperti Gambar dan Tulisan.

Caranya cukuplah mudah dan kode yang perlu di rehab juga cuman kode CSS-nya saja, yaitu dengan menggunakan kode CSS3, Tetapi ada kekurangannya juga, karena hanya browser terbaru yang support CSS3.

Sebelum kita melihat kode CSS nya, disini saya akan memberikan 2 (dua) efek miring yang pertama :

1. Efek miring ke kanan :

transform:rotate(2deg); -moz-transform:rotate(2deg); -webkit-transform:rotate(2deg); -o-transform:rotate(2deg)

2. Efek miring ke kiri :

transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg)

Catatan : Sobat Perhatikan angka yang berwarna merah, itu adalah besar Rotate, jika makin besar angkanya maka akan semakin miring.. intinya itu saja..

Jadi caranya begini, misalkan sobat pengen memberikan efek rotate miring pada bagian Judul Posting, maka kita cari dulu Kode pada bagian Postinganya  dengan kode seperti berikut :

.post h3 a {
color:#222;
margin:0;
text-shadow:0px 1px 1px #fff;
}
.post h3 a:hover {
color:#ddd;
text-shadow:0px 1px 1px #000;
}

Setelah ketemu, sobat tinggal memasukkan kode CSS diatas didalamnya sebelum tag penutup }
Maka hasilnya seperti ini :

.post h3 a {
color:#222;
margin:0;
text-shadow:0px 1px 1px #fff;
transform:rotate(2deg); -moz-transform:rotate(2deg); -webkit-transform:rotate(2deg); -o-transform:rotate(2deg)
}
.post h3 a:hover {
color:#ddd;
text-shadow:0px 1px 1px #000;
transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg)
}

Setelah cara diatas kita lalukan, coba sobat Priview dulu, setelah ada perubahan, baru sobat bisa SAVE TEMPLATE.

Berikut Screenshotnya :
Sebelum di Sorot
Setelah di Sorot

Selamat berkreasi ^_^



1 comments:

Klik Here ( Fadly ) said...

Hmm kok ngga bisa hedernya aku bang cek deh kesalahannya dimana. kalo boleh tau caranya kalo dipasang diheder blog gimana, karena diatas ngga ada. Makasih

Post a Comment

☑ Berkomentarlah di blog ini dengan Etika yang Baik dan Cerdas
✗ Jangan mencantumkan link ex: http://xxx
✗ Jangan berkomentar yang mengandung SARA atau hal yang NEGATIF lainnya !!
✗ Jangan sampai komentarmu masuk ke dalam SPAM !!
(◕‿-) TERIMA KASIH SUDAH BERKUNJUNG (-‿◕)

Subscribe yoo :D

Status Panel Admin
*ket. status :
Jam Sekarang
Tanggal
Salam Sapa :
Status Admin : Online*

Terjadwal : Berarti yang punya blog tidak bisa berinternet

Like This yoo :D

Generasi Teknik Informatika

Template information

Followers