Cara Membuat Efek Rotate Miring Dengan CSS3 ~ Blogcunayz

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

Tips-Trik Blogger

CSS

Edit HTML

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,,?

AnonymousMonday, 10 October, 2011
Very useful info. Thank you for sharing. Hope can be useful for others.

Sincerely,
Bisnis Online BlogMonday, 10 October, 2011
sangat menarik ternyta menulis banyak stlye
Rama88Monday, 10 October, 2011
mantab gan,, ane pake di menu navigasi di blog ane,, =)) =)) thx udah sharing
cardiackuMonday, 10 October, 2011
Makasih sob atas berbagi tutorialnya nih...bermanfaat
Rizky WardiansyahMonday, 10 October, 2011
@ 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
SintoMonday, 10 October, 2011
Wah transform rotate nya di terapin di judul postingan ya, wah pasti miring2 itu nanti sip postingan yg mantap
Rizky WardiansyahMonday, 10 October, 2011
@ Zh!nTho : hahaha itu kan cuma contoh gan thank gan
abufarrasMonday, 10 October, 2011
Kalau untuk di header misal home, profil. buku tamu dll...kode yang harus dicari atau diletakkannya dimana yah mas...?makasih atas petunjuknya
Rizky WardiansyahMonday, 10 October, 2011
@ abufarras : untuk d header cari kode #header caranya simple tinggal tambah kode rotate di kode tampilan yang ingi agan bikin miring,...
Kumpulan ArtikelMonday, 10 October, 2011
wah info yang sangat bagus nih kawan . . . thanks iya . . .
Rizky WardiansyahTuesday, 11 October, 2011
@ Kumpulan Artikel : trimakasih kawan,...
Remix-7 | Free DownloadTuesday, 11 October, 2011
Pelajaran Yang sangat menarik gan,.. Have a nice blog
Rizky WardiansyahTuesday, 11 October, 2011
@ Remix-7 | Free Download : thank gan
BRI Jakarta VeteranTuesday, 11 October, 2011
wah keren ... ijin copas ya, salam
Rizky WardiansyahTuesday, 11 October, 2011
@ BRI Jakarta Veteran : silahkan gan jangan lupa link sumbernya ya
Ruang InformasiTuesday, 11 October, 2011
Mantap sob, udah saya praktekin di blog. Top markotop...
Rizky WardiansyahTuesday, 11 October, 2011
@ Ruang Informasi : trimakasih gan
UnknownTuesday, 11 October, 2011
Tipmu selalu menarik sob,kucoba ditemplateku jalan.Makasih tipsnya,sukses selalu untukmu.
tautanpenaTuesday, 11 October, 2011
Pena hadir dan absen malam gan...makasih atas tipsnya gan..pena coba dulu yah
FarixsantipsWednesday, 12 October, 2011
bagus nih css3 transform rotate mampir kesini
Rizky WardiansyahWednesday, 12 October, 2011
@ Er'end : trimakasih gan
@ tautanpena : thank atas kunjungannya,... silahkan gan
@ Farixsantips : trimakasih gan
SintoThursday, 13 October, 2011
mampir malam gan
Rizky WardiansyahThursday, 13 October, 2011
@ Zh!nTho : trimakasih atas kunjungannya gan tapi lain kali tinggal kan pesannya di guest book aja ya gan
Mbah QopetFriday, 14 October, 2011
wah keren nih bisa di coba , btw bisa di taruh di mana aja kan ?

jawab di blog saya
Cek InfoFriday, 14 October, 2011
infony bagus ini kan ad toolny dan bisa kita kreasikan sendiri buat (-) k kiri y? (+) k kanan
Rizky WardiansyahFriday, 14 October, 2011
@ Mbah Qopet : ia siap gan laksanakan
@ Cek Info : betul gan tinggal edit angka rotatenya aja "verry simple"
Shinobi CaemkSaturday, 15 October, 2011
waaa... keren nih, kpn2 ta coba aah..
Rizky WardiansyahSaturday, 15 October, 2011
@ Shinobi Caemk : silahkan gan pake blog baru nih gan.
BaBlogLoSaturday, 15 October, 2011
wah....kira2 apa gk berat tuh mas..pengen coba tapi takutnya bikin berat blog...ujung2nya blog jadi sepi... (
Rizky WardiansyahSunday, 16 October, 2011
@ BaBlogLo : kalo menurut saya gk sob tapi gk tau kao menurut agan saya juga pernah pake and hasilnya ringan kok
Shinobi CaemkMonday, 17 October, 2011
kalo efek link bergeser gimana bro ???
Rizky WardiansyahMonday, 17 October, 2011
@ 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
Shinobi CaemkTuesday, 18 October, 2011
siip, makasih sob.. ta coba dlu nih...
binkbenkWednesday, 19 October, 2011
nice tips sob ijin pakai ilmunya ya
Rizky WardiansyahFriday, 21 October, 2011
@ Shinobi Caemk : ok sama2 sob
@ binkbenk : siahkan sob
Shinobi CaemkSaturday, 22 October, 2011
berhasil sob ... makasih nih udah di ajarin ..
Rizky WardiansyahSaturday, 22 October, 2011
@ Shinobi Caemk : ok sipt,kan sesama blogger harus saling berbagi, selamat malam minggu gan
AYRIY ZONESaturday, 12 November, 2011
Terima kasih atas infonya sobat,
Rizky WardiansyahSaturday, 12 November, 2011
@ AYRIY ZONE : sama2 sobat,btw blog ente makin mantap aja apalagi daper PR 3 dari google muantaps
sukses selalu untuk agan
Tutorial BlogSaturday, 12 November, 2011
keren sob, perlu dicoba nih, makasih ya udah share, semoga sukses selalu
Rizky WardiansyahSaturday, 12 November, 2011
@ Tutorial Blog : silahkan di coba sob,iya sama2,amien sob sukses juga untuk sobat
Ayriy ZoneWednesday, 11 January, 2012
MAntap nih tutornya sobat,, ijin coba dulu ah,,
Rizky WardiansyahWednesday, 11 January, 2012
@ Ayriy Zone : silahkan sobat semoga bermanfaat
UnknownSunday, 04 November, 2012
7552577034663442470Wah keren sob

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.

Blogcunayz

Cara Membuat Efek Rotate Miring Dengan CSS3

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

Pasang Iklan Anda Disini

Popular Posts