Membuat Text 3D (Teks 3 Dimensi) Menggunakan CSS3 ~ New Trick

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 sobat bayangkan? Menarik? Tentu saja dan untuk membuat Text 3D (Teks 3 Dimensi) Menggunakan CSS3 sangatlah mudah, berikut caranya;

Buka akun Blogger sobat
Buka menu Template >> Edit Html

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);}