Membuat Effect Gambar Miring Ketika di Sorot

Kali ini saya akan menjelaskan bagaimana cara agar supaya gambar bisa bergerak miring ketika mouse mendekat. cara ini sebenarnya kurang lebih sama dengan postingan yang saya buat di cara membuat tulisan terbalik sebelumnya, Cuma bedanya disini formatnya adalah gambar dan menggunakan effect hover. Oke, kita bisa lihat gambar hasilnya dibawah ini.

Untuk bisa seperti gambar di atas sobat bisa menggunakan kode css dibawah ini.

#miring img {transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
#miring img:hover { transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
}

Angka yang berwarna merah adalah sudut kemiringan ketika disorot, bisa kita ganti sesuai keinginan. Semoga bermanfaat.

Membuat Tulisan Vertikal, Miring atau Terbalik di Blogspot

Membuat tulisan menjadi vertikal, membuat tulisan menjadi terbalik, membuat tulisan menjadi miring, yahh kurang lebih judulnya seperti itu.

Bagaimana ? mungkin cukup sampai disitu saja,  takut kalau nanti saya teruskan bukan lagi tulisannya yang terbalik tapi malah kepalanya xd..

Sebenarnya cara membuatnya tidak terlalu suilit, karena saya disini hanya menggunakan satu fungsi saja, yakni menggunakan kode css3 transform rotate, tinggal sudut kemiringannya diubah beberapa derajat dengan cara merotasi tulisan tadi. Nah jika ingin mencoba membuat seperti di atas, silahkan copy kode css3 dibawah ini.

#miring {transform: rotate(180deg);
webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);/*untuk firefox*/
-o-transform: rotate(180deg);
}

Untuk merubah tulisan secara vertical tinggal merubah angka yang berwarna merah menjadi -90 atau 90.

#vertikal {transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
}

Kode tadi bisa langsung dibuat di postingan tanpa harus masuk di dashboard template widgetnya, caranya bisa kita buat contoh seperti ini.

<span sytle=transform: rotate(0.5deg);
-webkit-transform: rotate(0.5deg);
-moz-transform: rotate(0.5deg);
-o-transform: rotate(0.5deg);>AWaS OTaK NaNTI IKuTaN MIriNG..!!!</span>

"AWaS OTaK NaNTI IKuTaN MIriNG..!!!"

Kalau yang ingin dirotasi atau dimiringkan berupa gambar, kita bisa lihat disini. Oke semoga bermanfaat.

Update:
Sobat bisa menganti tag span dengan tag yang lain seperti pre, div, a dll, jika memang tampilan tidak berubah.

Mengatasi Masalah Error Pada Css Coding Gara-Gara Adblock Plus

Beberapa hari yang lalu cukup stress dibuat dengan masalah yang satu ini, kenapa tiba-tiba saja salah satu menu yang saya buat menggunakan gambar tidak muncul, coba cari tahu baru ketemu masalahnya. Ternyata konfigurasi pada css yang saya buat secara otomatis menambah class pada tagnya, muncul pertanyaan, kok bisa ?, setelah cari tahu, ternyata gara-gara saya menginstall addblock plus, add-ons mozilla ini secara otomatis mendeteksi nama id atau class dari tag yang dibuat, karena setelah saya coba ubah nama tersebut baru bisa normal. Waktu itu kebetulan id yang saya buat namanya “ads”. Ini sedikit contoh : Di file cssnya “style.css”