Membuat Teks Terbalik dengan CSS3


Kayak kurang kerjaan aja! Ngapain coba ngebolak-balik tulisan gak jelas kayak gini?
Justru karena kurang kerjaanlah aku jadi punya ide tuk membuat tulisan terbalik.
Mungkin dulu aku pernah posting tentang membuat tulisan terbalik menggunakan teks generator, namun yang dilakukan generator tersebut hanyalah mengganti karakter supaya teks terlihat terbalik (contoh: menulis m dengan w)
Tapi trik itu kayaknya terlihat kurang rapi, sebab ada beberapa huruf yang terlihat dipaksakan
Bandingkan aja 2 teks terbalik di bawah ini:
Dengan menggunakan generator:
˙ʞılɐqɹǝʇ uɐsılnʇ ʇɐnqɯǝɯ ʞnʇ ǝpı ɐʎund ıpɐɾ nʞɐ ɥɐluɐɐɾɹǝʞ ƃuɐɹnʞ ɐuǝɹɐʞ nɹʇsnɾ
¿ıuıƃ ʞɐʎɐʞ sɐlǝɾ ʞɐƃ uɐsılnʇ ʞılɐq-ʞɐloqǝƃu ɐqoɔ uıɐdɐƃu ¡ɐɾɐ uɐɐɾɹǝʞ ƃuɐɹnʞ ʞɐʎɐʞ
Dengan Menggunakan CSS3:
Kayak kurang kerjaan aja! Ngapain coba ngebolak-balik tulisan gak jelas kayak gini?
Justru karena kurang kerjaanlah aku jadi punya ide tuk membuat tulisan terbalik.


Menurut kamu bagus yang mana?
Trik yang kedua sebenarnya memakai kode CSS3 kurang lebih kodenya

transform:rotate(180deg)
-moz-transform:rotate(180deg);
-webkit-transform:(180deg);
-o-transform:(180deg);
-icab-transform:(180deg);
-khtml-transform:(180deg);

Untuk membuatnya dengan HTML style kodenya kurang lebih:

<div style="transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-o-transform:rotate(180deg); -icab-transform:(180deg); -khtml-transform:(180deg);">TEKS YANG MAU DIBUAT TERBALIK</div>

Atau kalau mau yang lebih praktis gunakan cara berikut:

#kuwalik {
transform:rotate(180deg)
-moz-transform:rotate(180deg);
-webkit-transform:(180deg);
-o-transform:(180deg);
-icab-transform:(180deg);
-khtml-transform:(180deg);
}

Paste kodenya diatas kode ]]></b:skin>
Nah setiap ingin membuat tulisan terbalik kamu tinggal menambah kode class pada elemen div
Maksudnya kayak dibawah ini:

<div class="kuwalik">TEKS YANG INGIN DIBALIK</div>

Inilah salah satu kehebatan CSS3, semoga membantu kalian dalam membingungkan pembaca!
Jangan lupa komentar!

1 komentar:

Herneva mengatakan...

Wah bagus ini info izin nyoba y... :h:

:nangis :rate :lebay :hoax :nyimak :hotnews :gotkp :wow :pertamax :lapar :santai :malu :ngintip :newyear
:a: :b: :c: :d: :e: :f: :g: :h: :i: :j: :k: :l: :m: :n:

Posting Komentar

 
Copyright © Motaro BLog

Selamat Datang

Selamat datang di Kotretan motaro - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan berselancar di sini dan membaca lebih lanjut tentang artikel kami. Ada banyak hal tentang kami, Anda mungkin akan menemukan sesuatu yang menarik. Selengkapnya tentang kami

Sepintas Tentang Kotretan motaro blog

Nama saya mochamad taufik romdony, saya hanya seorang biasa

Info
chimney