Cara Membuat Efek TEXT SHADOW 3D Liftup

Siapa yang tidak mengenal Photoshop. Software design grafik ini dapat melakukan serangkaian efek yang dapat menghasilkan output  yang sempurna baik menggunakan gambar ataupun teks. Selain photoshop, Xara 3D merupakan juga salah satu sofware yang banyak diminati oleh para surfer web. Tapi kali ini, tanpa menggunakan kedua software tersebut, kita dapat menciptakannya menggunakan CSS. Cara yang dipakaipun kurang lebih sama dengan membuat efek 3D pada photoshop, yakni, menggunakan banyak layer untuk menghasilkan 3D.

Efek 3D pada CSS banyak menggunakan duplikat-duplikat kode dengan nilai dan warna yang berbeda untuk menampilkan kesan 3Dnya. Agar lebih sempurna, pilihan gradasi setiap warna harus tepat, jika ingin bagus. Tapi jika puas dengan satu atau dua warna saja juga bukan suatu keharusan.

Oke, kita mulai. Hasil akhir yang dibuat seperti ini.

Dengan kode CSS seperti ini.

h1 {

font-family:helvetica;

font-size:180px;

font-weight:bold;

color:#00EE00;

text-align:center;

text-shadow:

0 -2px 0 #00D000,

0 -3px 0 #00C800,

0 -4px 0 #00C000,

0 -5px 0 #00B800,

0 -6px 0 #00B000,

0 -7px 0 #00A000,

0 -8px 0 #008800,

0 -9px 0 #007800;}

Dua warna terakhir sengaja dipilih untuk menciptakan seolah-olah huruf berada didasar sebuah bidang datar. Agar terlihat lebih menempel ke dasar lantai, tambahkan satu string kode CSS dengan warna abu-abu atau hitam atau hijau tua (sesuai selera) sebagai polesan blur dasar. Tambahan kode CSSnya adalah:

0 -19px 20px #001000;

You should get something like this.

Apabila masih kurang puas, silahkan membuat yang baru dengan tehnik yang sama.

Artikel Terkait:

HardText Shadow, Blur Text Shadow, Drop Text Shadow, Out Line, Neon Glow, Inset/Outset Text, Fun With CSS Text Shadow.

Efek Text Shadow pada Blog Title, Blog Description, Post Date Header Blog, PostTitle Blog, Side Bar widget TitleBlog.