share all free for you

Advertiser Here

Cara Membuat Efek Rotate Miring Dengan CSS3

 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 ^_^

Title : Cara Membuat Efek Rotate Miring Dengan CSS3
URL : http://blogcunayz.blogspot.com/2011/10/cara-membuat-efek-rotate-miring.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Cara Membuat Efek Rotate Miring Dengan CSS3 sebagai Sumbernya.

Sudah ada [ 44 komentar ] bagaimana pendapat Anda,,?

  1. Very useful info. Thank you for sharing. Hope can be useful for others. :)

    Sincerely,
    Health is Everything

    ReplyDelete
  2. sangat menarik ternyta menulis banyak stlye

    ReplyDelete
  3. mantab gan,, ane pake di menu navigasi di blog ane,, =)) =)) thx udah sharing

    ReplyDelete
  4. Makasih sob atas berbagi tutorialnya nih...bermanfaat

    ReplyDelete
  5. @ Healthy Living : thank my friend
    @ Bisnis Online Blog : terimakasih
    @ Rama88 : ok sama2 emang menu punya agan mantaps abis
    @ cardiacku : sama2 sob,... alhamdulillah ilmu saya bisa bermanfaat

    ReplyDelete
  6. Wah transform rotate nya di terapin di judul postingan ya, ;)) wah pasti miring2 itu nanti :)) sip postingan yg mantap

    ReplyDelete
  7. @ Zh!nTho : hahaha itu kan cuma contoh gan :)) thank gan

    ReplyDelete
  8. Kalau untuk di header misal home, profil. buku tamu dll...kode yang harus dicari atau diletakkannya dimana yah mas...?makasih atas petunjuknya

    ReplyDelete
  9. @ abufarras : untuk d header cari kode #header caranya simple tinggal tambah kode rotate di kode tampilan yang ingi agan bikin miring,... :)

    ReplyDelete
  10. wah info yang sangat bagus nih kawan . . . thanks iya . . . :D

    ReplyDelete
  11. @ Kumpulan Artikel : trimakasih kawan,... :))

    ReplyDelete
  12. Pelajaran Yang sangat menarik gan,.. Have a nice blog :)

    ReplyDelete
  13. @ Remix-7 | Free Download : thank gan

    ReplyDelete
  14. @ BRI Jakarta Veteran : silahkan gan jangan lupa link sumbernya ya :)

    ReplyDelete
  15. Mantap sob, udah saya praktekin di blog. Top markotop...

    ReplyDelete
  16. @ Ruang Informasi : trimakasih gan :))

    ReplyDelete
  17. Tipmu selalu menarik sob,kucoba ditemplateku jalan.Makasih tipsnya,sukses selalu untukmu.

    ReplyDelete
  18. Pena hadir dan absen malam gan...makasih atas tipsnya gan..pena coba dulu yah

    ReplyDelete
  19. bagus nih css3 transform rotate :) mampir kesini :)

    ReplyDelete
  20. @ Er'end : trimakasih gan
    @ tautanpena : thank atas kunjungannya,... silahkan gan
    @ Farixsantips : trimakasih gan :)

    ReplyDelete
  21. @ Zh!nTho : trimakasih atas kunjungannya gan tapi lain kali tinggal kan pesannya di guest book aja ya gan :))

    ReplyDelete
  22. wah keren nih bisa di coba , btw bisa di taruh di mana aja kan ?

    jawab di blog saya

    ReplyDelete
  23. infony bagus ini kan ad toolny dan bisa kita kreasikan sendiri buat (-) k kiri y? (+) k kanan :))

    ReplyDelete
  24. @ Mbah Qopet : ia siap gan laksanakan
    @ Cek Info : betul gan tinggal edit angka rotatenya aja "verry simple" :))

    ReplyDelete
  25. waaa... keren nih, kpn2 ta coba aah..

    ReplyDelete
  26. @ Shinobi Caemk : silahkan gan pake blog baru nih gan.

    ReplyDelete
  27. wah....kira2 apa gk berat tuh mas..pengen coba tapi takutnya bikin berat blog...ujung2nya blog jadi sepi... :((

    ReplyDelete
  28. @ BaBlogLo : kalo menurut saya gk sob tapi gk tau kao menurut agan saya juga pernah pake and hasilnya ringan kok

    ReplyDelete
  29. kalo efek link bergeser gimana bro ??? :)

    ReplyDelete
  30. @ Shinobi Caemk : bisa pake efek hover dengan kode ini sob : color:#009900; padding-left:10px; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; -o-transition:all .2s ease-out

    ReplyDelete
  31. siip, makasih sob.. ta coba dlu nih... :D

    ReplyDelete
  32. nice tips sob ijin pakai ilmunya ya

    ReplyDelete
  33. @ Shinobi Caemk : ok sama2 sob
    @ binkbenk : siahkan sob

    ReplyDelete
  34. berhasil sob ... makasih nih udah di ajarin .. :P

    ReplyDelete
  35. @ Shinobi Caemk : ok sipt,kan sesama blogger harus saling berbagi, selamat malam minggu gan :))

    ReplyDelete
  36. Terima kasih atas infonya sobat,

    ReplyDelete
  37. @ AYRIY ZONE : sama2 sobat,btw blog ente makin mantap aja apalagi daper PR 3 dari google muantaps
    sukses selalu untuk agan

    ReplyDelete
  38. keren sob, perlu dicoba nih, makasih ya udah share, semoga sukses selalu

    ReplyDelete
  39. @ Tutorial Blog : silahkan di coba sob,iya sama2,amien sob sukses juga untuk sobat

    ReplyDelete
  40. MAntap nih tutornya sobat,, ijin coba dulu ah,,

    ReplyDelete
  41. @ Ayriy Zone : silahkan sobat semoga bermanfaat

    ReplyDelete
  42. [code]7552577034663442470[/code]Wah keren sob

    ReplyDelete

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah