Caranya pasangnya cukuplah mudah, cuma perlu mengedit sedikit 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
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 :
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 :
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 di Priview dulu, setelah ada perubahan, baru SAVE TEMPLATE.
Nah, sekian dulu posting saya mengenai Cara Membuat Efek Rorate Miring Dengan CSS3. semoga artikel ini bermanfaat bagi sobat blogger semua!
.jpg)
.jpg)
