Membuat Text 3D (Teks 3 Dimensi) Menggunakan CSS3

Membuat Text 3D (Teks 3 Dimensi) Menggunakan CSS3 - Pada awal-awal melakukan blogging, saya berusaha untuk tidak menggunakan gambar sebagai latar belakang blog atau menggunakannya di beberapa bagian element template. Seperti pada artikel kali ini, saya akan membuat text 3D atau teks 3 Dimensi yang akan dipasang ke dalam blog dengan menggunakan kode CSS3

Kenapa saya mengurangi penggunaan image sebagai latar belakang blog? Karena image tidak SEO Friendly dan membuat loading blog lama. Lalu bagaimana dengan Text 3D? Teks 3 Dimensi yang akan dipasang kedalam blog? Meski memiliki tampilan yang sama dengan sebuah image, teks 3 dimensi menggunakan CSS3 tentu lebih baik

Berikut contoh text 3D (teks 3 Dimensi) menggunakan CSS3
contoh dengan gambar


contoh demo dengan teks
Panduan Template Blog

Dari contoh dan demo diatas, apa yang anda bayangkan? Menarik? Tentu saja dan untuk membuat Text 3D (Teks 3 Dimensi) Menggunakan CSS3 sangatlah mudah, berikut caranya;

1. Buka akun Blogger anda
2. Buka menu Template >> Edit Html
3. Pasang kode CSS berikut sebelum ]]></b:skin>
   

   
   text3D {font-size: 75px;font-family:verdana;color:#fff;
   -webkit-transition: all .7s ease-out; 
   -moz-transition: all .7s ease-out; 
   -o-transition: all .7s ease-out; 
   transition: all .7s ease-out;
   text-shadow: 0 1px 0 #ccc,
   0 2px 0 #c9c9c9,
   0 3px 0 #bbb,
   0 4px 0 #b9b9b9,
   0 5px 0 #aaa,
   0 6px 1px rgba(0,0,0,.1),
   0 0 5px rgba(0,0,0,.1),
   0 1px 3px rgba(0,0,0,.3),
   0 3px 5px rgba(0,0,0,.2),
   0 5px 10px rgba(0,0,0,.25),
   0 10px 10px rgba(0,0,0,.2),
   0 20px 20px rgba(0,0,0,.15);}
   

4. Buatlah teks dengan html  <text3D>Panduan Template Blog</text3D>
5. Teks html bisa dipasang dimanapun, suka-suka anda

Selamat berkreasi karena cukup mudah untuk membuat text 3D (teks 3 Dimensi) menggunakan CSS3

Membuat Text 3D (Teks 3 Dimensi) Menggunakan CSS3 2013-06-07T07:41:00+08:00 Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni