Cara Membuat Teks bayangan dan Text 3D

Pada posting sebelumnya, kita sudah membahas tentang Cara membuat efek bayangan atau Box Shadow. Nah, pada postingan kali ini kita akan coba membahas Cara Membuat Teks bayangan dan Text 3D. Untuk Cara membuat teks bayangan ini proses dan cara kerjanya sama persis dengan membuat efek bayangan atau Box Shadow. Jadi kalau belum membaca postingannya silakan baca dulu posting sebelumnya.

Dalam design blog atau website, pemakaian teks dengan bayangan ini sendiri agak jarang dipakai, karena jika terlalu berlebihan maka bukannya website atau blog menjadi semakin bagus, tapi malah menjadi sulit untuk dibaca. Yang paling sering dipakai paling hanya efek bayangan kecil seperti yang dipakai diblog ini.

Untuk sedikit contohnya kalian bisa lihat perbedaannya di bawah ini.

#teks-bayangan{background: #666;  
border:3px ridge #FFF;  
padding: 15px;  
margin-top: 10px;  
font-size: 18px;  
color: #111;  
text-align:center;  
box-shadow: 0 0 10px red;
}

Hasil sebelum kode bayangan/shadow

Sekarang kita tambahkan sedikit kode dari teks-shadownya.

text-shadow: 2px 2px 0 red;

Hasil CSS setelah ditambah kode bayangannya yang kita dapatkan kira-kira seperti ini.

#teks-bayangan{
background: #666;
border:3px ridge #FFF;
padding: 15px;
margin-top: 10px;
font-size: 18px;
color: #111;
text-align:center;
box-shadow: 0 0 10px red; /*--code box bayangan--*/
text-shadow: 2px 2px 0 red; /*--code teks bayangan--*/
}

Hasil Setelah Penambahan kode bayangan/shadow

Untuk melihat atau membuat contoh yang lain silakan coba rubah angka-angka tersebut sesuka hati kalian.

2. Cara pembuatan efek bayangan ganda atau lebih.

Untuk cara pembuatan bayangan efek ganda atau lebih ini serta efek bayangan 3D, prinsipnya tetap juga sama dengan pembuatan efek bayangan ganda dicara pembuatan box shadow. Jadi saya hanya memberikan contohnya disini. Untuk pembuatan efek 3D ini kita hanya perlu sedikit kreatif karena untuk pembuatannya kita akan membutuhkan sangat banyak kode bayangannya dan pengaturan posisi serta blurnya.

Berikut ini adalah hasil-hasil kode CSS dan contohnya.
1. Letter Press.

#letter-press{
text-shadow: 0px 1px 1px #fff;
}

Letter Press

2. Text shadow Stereoscopic.

#stereoscopic{
text-shadow: 4px 0 0 blue,-4px 0 0 red;
}

Stereoscopic

3. Neon.

#neon{
text-shadow: 0 0 1px #2ec728, 0 0 3px #2ec728,
0 0 5px #2ec728, 0 0 7px #2ec728, 0 0 9px #2ec728;
}

Neon Teks

4. Efek teks terbakar.

#teks-terbakar{
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 
2px -10px 6px #fd3, -2px -15px 11px #f80, 
2px -18px 18px #f20;
}

Efek Teks Terbakar

5. Efek Teks 3D

#teks-3D{text-shadow: 
1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 
1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 
4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 
4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 
7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 
7px 8px #bbb, 8px 8px #ddd;
}

Teks Efek 3D dengan CSS

Pastikan perpaduan warna pada background dan teks shadow ini adalah warna yang serasi agar terlihat lebih menarik. Semoga bermanfaat...