Cara Membuat Teks Shadow dan 3D Pada Blog

Tutorial | Pada posting sebelumnya, kita sudah membahas tentang Cara Membuat Box dan Text Shadow Pada Blog.  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 Cara Membuat Box dan Text Shadow Pada Blog.

Preview :

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.

view plainprint?

1. #teks-bayangan{background: #666;    
2. border:3px ridge #FFF;    
3. padding: 15px;    
4. margin-top: 10px;    
5. font-size: 18px;    
6. color: #111;    
7. text-align:center;    
8. box-shadow: 0 0 10px red;  
9. }  

Hasil sebelum kode bayangan/shadow

Sekarang kita tambahkan sedikit kode dari teks-shadownya.

view plainprint?

1. text-shadow: 2px 2px 0 red;  

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

view plainprint?

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

Hasil Setelah Penambahan kode bayangan/shadow

Untuk melihat atau membuat contoh yang lain silakan coba rubah angka-angka tersebut sesuka hati kalian.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.

view plainprint?

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

Letter Press

2. Text shadow Stereoscopic.

view plainprint?

1. #stereoscopic{  
2. text-shadow: 4px 0 0 blue,-4px 0 0 red;  
3. }  

Stereoscopic

3. Neon.

view plainprint?

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

Neon Teks

4. Efek teks terbakar.

view plainprint?

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

Efek Teks Terbakar

5. Efek Teks 3D

view plainprint?

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

Teks Efek 3D dengan CSS

Sebaiknya pastikan perpaduan warna pada background dan teks shadow ini adalah warna yang serasi agar terlihat lebih menarik. Sekian Cara Membuat Teks bayangan dan Text 3D. Semoga bermanfaat sobat :)