Cara Membuat Efek Rorate Miring Dengan CSS3


Cara Membuat Efek Rorate Miring Dengan CSS3 – Sobat Anaktimor-17 , kali ini saya share tips menghias blog . Dalam tips kali ini tidak kalah menarik dengan postingku sebelumnya , dan kali ini saya akan share’ cara membuat efek animasi miring ‘ artinya jika mouse disorot ke bagian header tersebut akan bergerak ke posisi normal yang sebelumnya miring .

            Efek miring tersebut tidak hanya untuk pada bagian headernya saja , tapi bisa diterapkan di widget2 di blog Anda  . Menarikkan? Pengen mencoba? Caranya sangat mudah, Anda hanya perlu membaca tips dibawah ini dan dipraktekkan langsung ke blog Anda . Hanya perlu mengutak-atik sedikit kode CSS-nya yaitu dengan menggunakan kode CSS3 .

NB:

            Hanya browser terbaru yang bisa 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)

NB : 
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 :

.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 di Priview dulu, setelah ada perubahan, baru SAVE TEMPLATE.


Anda dapat menerapkanya pada widget2 di blog Anda , tapi pembahasan saya cukup sampai disini . Tinggal Anda yang mengutak-atiknya .

Salam Ide Kreasi…
Selamat Bekerja dan Semoga Bermamfaat!!
Jangan lupa commentnya…

Comments

Popular posts from this blog

Contoh Surat Lamaran Kerja di Indomaret Terbaru 2018

Cara Melamar Kerja PT. Musashi Auto Parts Indonesia 2019

Cara Melamar Kerja di PT Astra Honda Motor Secara Online