Membuat Teks Terbalik Menggunakan Kode CSS3

Silahkan baca dengan hati-hati agar tidak keliru:

• Dilarang membaca sambil njengking atau menungging!
• Dilarang mengumpat sebelum dan sesudah membaca.
• Selama membaca dilarang keras mengambil nafas panjang atau bahkan mengambil tempe dan pisang goreng.
• Peraturan ini berlaku untuk semua umur, baik umur tua nafsu muda ataupun umur uzur nafsu tak terukur.

Membuat teks terbalik tak harus dengan cara memanfaatkan jasa situs tertentu yang melayani pembuatan teks dalam bentuk terbalik. CSS3 bisa menjadi solusi mudah dan sebanyak apapun teks yang ingin dibuat dalam bentuk terbalik dapat diciptakan secara instant. Hanya perlu beberapa kode CSS dan semua bisa terjadi dengan cepat bagai permainan sulap si Deddy Corbuzier atau Romy Rafael.

Teks dalam bentuk terbalik dapat dibuat dalam bentuk permanen (selalu dalam keadaan terbalik sekalipun tersentuh cursor) dan teks terbalik yang akan berubah menjadi normal kembali ketika tersentuh cursor. Dua kondisi yang berbeda ini hanya dipengaruhi oleh penambahan efek hover. Hover effect memungkinkan kita untuk membuat teks dalam berbagai sudut kemiringan. Sudut 0 dan 360 membuat teks ke posisi normal, sedang nilai yang lain akan memberi sudut kemiringan tertentu sesuai angka yang digunakan. Angka/nilai transform dihitung dalam satuan derajat dengan nilai 0 s/360.

Kode CSS-1: Teks Terbalik

.teksterbalik_A{
       font-weight:bold;
       transform:rotate(180deg);
      -o-transform:rotate(180deg);    
      -moz-transform:rotate(180deg);
      -webkit-transform:rotate(180deg);
      -khtml-transform:rotate(180deg);     
}

xHTML Teks Terbalik

<div class="teksterbalik_A">
Tuliskan Teks yang akan ditampilkan terbalik di sini!
</div>

Kode CSS-2 Teks Terbalik dengan Hover Effect

.teksterbalik{
       text-align:justify;
       padding:10px 0px;
}    
.teksterbalik span{
       display:block;
       font-weight:bold;
       transform:rotate(180deg);
      -o-transform:rotate(180deg);    
      -moz-transform:rotate(180deg);
      -webkit-transform:rotate(180deg);
      -khtml-transform:rotate(180deg);
       tansition:transform ease-in 1s;   
      -o-tansition:transform ease-in 1s;
      -moz-transition:-moz-transform ease-in 1s;
      -webkit-transition:-webkit-transform ease-in 1s; 
      -khtml-transition:-khtml-transform ease-in 1s;     
} 
.teksterbalik:hover span{
       transform:rotate(0deg);
      -o-transform:rotate(0deg);    
      -moz-transform:rotate(0deg);
      -webkit-transform:rotate(0deg);
      -khtml-transform:rotate(180deg);   
      -khtml-transform:rotate(0deg);
} 

xHTML Teks Terbalik dengan Hover Effect

<div class="teksterbalik">
<span>Tuliskan Teks yang akan ditampilkan dalam posisi terbalik di sini!</span>
</div>

Gunakan xHTML saat posting dilakukan atau bisa juga digunakan melalui Add a Gadget (Tambah Gadget).

Cara Menyimpan Kode CSS Teks Terbalik

Silahkan sebelumnya untuk menentukan kode CSS yang hendak digunakan. Pakai hover effect atau tanpa hover. Jika diinginkan bisa juga keduanya digunakan secara bersamaan. Simpan keduanya secara berurutan dan gunakan xHTML-nya sesuai mode teks terbalik yang ingin ditampilkan.

• Login ke Blogger.
• Setelah Dasboard (Dasbor) terbuka, klik Design (Rancangan).
• Lankutkan dengan klik Edit HTML.
• Back-up Templates dengan cara klik Download Full Templates (Download Template Lengkap) kemudian silahkan simpan file template di folder PC.
• Cari kode ]]></b:skin> dengan menggunakan Ctrl+F.
• Copy dan pastekan kode CSS di atas kode tersebut.
• KLIK SAVE Templates (Simpan Template).
• Setelah penyimpanan kode CSS selesai, gunakan xHTML di halaman posting atau melalui Tambah Gadget di Page Elements (Elemen Laman).
• Lihat hasilnya dengan membuka blog!

Teks Terbalik tanpa Kode CSS

Membuat teks terbalik dapat juga dilakukan tanpa menggunakan kode CSS yang harus disimpan di atas kode ]]></b:skin> melalui halaman Edit HTML. Dengan hanya memanfaatkan xHTML sebuah teks terbalik dapat ditampilkan di blog. Tentu saja jika model ini yang digunakan maka penulisan kode di halaman posting atau widget menjadi tidak praktis sekaligus hover effect tak dapat difungsikan. Sebagai contoh bisa sampeyan lihat teks terbalik di ujung atas. Untuk membuatnya gunakan kode berikut:

<div style="transform:rotate(180deg);-o-transform:rotate(180deg);-moz-transform:rotate(180deg);-webkit-transform:rotate(180deg);-khtml-transform:rotate(180deg);padding:15px 0px;">
Tuliskan teks yang akan ditampilkan terbalik di sini!
</div>

Keterangan/Catatan:

• Jika menggunakan kode CSS-1 maka gunakan xHTML yang sesuai (class="teksterbalik_A").
• Untuk CSS-2 (dengan hover effect) xHTML menggunakan class="teksterbalik" dan span.
• Kode CSS yang lain dapat ditambahkan pada syntax .teksterbalik , hingga bentuknya mejadi seperti ini:
  

  .teksterbalik{
         margin:15px 4px;
         border:4px solid #666;
         padding:4px;
         border-radius:8px;
        -moz-border-radius:8px;
        -webkit-border-radius:8px;
         color:#3399FF;
         font-size:14px;
         font-family:Tahoma;
         font-weight:bold;
         background:#000;
         text-align:justify; /*justify, left, right atau center */
  }

  
  Penambahan kode seperti di atas untuk membentuk sebuah bingkai/box pada teks terbalik dan membuat teks dengan ukuran dan warna tertentu serta background baru.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «