Cara buat efek rotate miring dengan css 3

Black-market7-Selamat pagi untuk semuanya pada kesempatan kali ini ada yang baru,maksudnya ada yang baru pada label blog ini yaitu css dalam postingan css yang pertama ini saya akan membeberkan cara membuat efek efek rotate miring dengan menggunakan css3,efek miring tersebut bisa kita gunakan pada judul postingan blog,judul widget blog bahkan pada judul blognya sekalipun. Caranya cukup mudah dan kode yang perlu diperbaiki juga cuman kode cssnya saja,yaitu dengan menggunakan kode css3,tetapi ada kekurangannya juga yaitu hanya browser terbaru yang support css3.

Sebelum pada langkah2 berikutnya perhatikan terlebih dahulu efek miring yang timbul akibat css dibawah ini
1.Efek miring kekanan 

Black-Market7:

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

2.Efek miring kekiri

Black-Market7:

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

Jadi begini kalu sahabat blogger menginginkan memberi efek miring pada judul postingan, maka cari dulu kode dibawah ini

Black-Market7:

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

Black-Market7:

.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 itu kalian semua bisa klik save.

NB:Jika kode diatas tidak ketemu
Maka cari dulu kode  ]]></b:skin>

Lalu paste kode dibawah ini sebelum atau diatas kode ]]></b:skin>

Black-Market7:

.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)
}

Kemudian simpan templates anda.

============================================================== ==============================================================
terimakasih telah berkunjung ke black-market7.blogspot.com ============================================================== ==============================================================

.: Artikel Terkait :.