Cara Membuat Teks Shadow dan 3D Pada Blog

|| || || Leave a komentar
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 :
Cara Membuat Teks Shadow dan Text 3D Pada Blog


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. padding15px;    
  4. margin-top10px;    
  5. font-size18px;    
  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-shadow2px 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. padding15px;  
  5. margin-top10px;  
  6. font-size18px;  
  7. color#111;  
  8. text-align:center;  
  9. box-shadow: 0 0 10px red/*--code box bayangan--*/  
  10. text-shadow2px 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.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-shadow0px 1px 1px #fff;  



Letter Press



2. Text shadow Stereoscopic.

view plainprint?
  1. #stereoscopic{  
  2. text-shadow4px 0 0 blue,-4px 0 0 red;  
  3. }  


Stereoscopic


3. Neon.

view plainprint?
  1. #neon{  
  2. text-shadow0 0 1px #2ec7280 0 3px #2ec728,  
  3. 0 0 5px #2ec7280 0 7px #2ec7280 0 9px #2ec728;  
  4. }  


Neon Teks

4. Efek teks terbakar.

view plainprint?
  1. #teks-terbakar{  
  2. text-shadow0 0 4px #ccc0 -5px 4px #ff3,   
  3. 2px -10px 6px #fd3-2px -15px 11px #f80,   
  4. 2px -18px 18px #f20;  


Efek Teks Terbakar

5. Efek Teks 3D

view plainprint?
  1. #teks-3D{text-shadow:   
  2. 1px 0px #ccc0px 1px #ccc2px 1px #ddd,   
  3. 1px 2px #bbb3px 2px #ddd2px 3px #bbb,   
  4. 4px 3px #ddd3px 4px #bbb5px 4px #ddd,   
  5. 4px 5px #bbb6px 5px #ddd5px 6px #bbb,   
  6. 7px 6px #ddd6px 7px #bbb8px 7px #ddd,   
  7. 7px 8px #bbb8px 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 :)
/[ 0 komentar Untuk Artikel Cara Membuat Teks Shadow dan 3D Pada Blog]\

Post a Comment