Membuat Tulisan Terbalik Menggunakan CSS3
Kali ini saya ingin mengajak anda sedikit bermain lagi dengan CSS3, dan kali ini kita akan mencoba membuat tulisan terbalik dengan kelebihan CSS3... Jika selama ini anda hanya membuat Efek Tulisan Terbalik menggunakan Tools dari http://textozor.com/flipped-text/ dan http://www.flipmytext.com/, kali ini saya akan memberikan cara yang sedikit berbeda yaitu dengan menambahkan Kode CSS3 yang memungkinkan anda memutar Tulisan yang ingin dibalik dengan memanggil class-nya... tertarik? silahkan ikuti panduan dibawah ini:
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:
]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:
.terbalik_dasar{
font-weight:bold;
transform:rotate(180deg);
-o-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-khtml-transform:rotate(180deg);
}
Dan untuk menggunakannya anda bisa meletakkan Kode ini dipostingan anda:
<div class="terbalik_dasar">
Tuliskan yang akan ditampilkan terbalik...
</div>
Setelah Itu Publish dan Lihat Hasilnya, Jika anda mengikutinya dengan benar hasilnya akan seperti tulisan dibawah ini:
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:
]]></b:skin>
5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:
.terbalik_dasar{
font-weight:bold;
transform:rotate(180deg);
-o-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-khtml-transform:rotate(180deg);
}
Dan untuk menggunakannya anda bisa meletakkan Kode ini dipostingan anda:
<div class="terbalik_dasar">
Tuliskan yang akan ditampilkan terbalik...
</div>
Setelah Itu Publish dan Lihat Hasilnya, Jika anda mengikutinya dengan benar hasilnya akan seperti tulisan dibawah ini:
Tuliskan yang akan ditampilkan terbalik...
Selamat Mencoba...
Posting Komentar
Posting Komentar