Cara Membuat Efek Text Shadow Dengan CSS3 Untuk Blogger

Cara Membuat Efek Text Shadow Pada Blog
Efek teks shadow/bayangan ini, selain bisa digunakan pada kode CSS template blog (untuk teks shadow header, widget, judul postingan, footer, dsb) juga bisa digunakan pada teks postingan blog dan cara penerapan sama saja. Untuk pilihan warna bisa disesuaikan sesuai kebutuhan baik itu pada warna dasarnya, maupun pada warna bayangannya.

Well, langsung saja saya berikan penjelasan tentang bagaimana menerapkannya pada kode CSS / teks postingan beserta contoh dan kodenya.

1. Cara menerapkan pada kode CSS / isi artikel postingan.

  • Login ke blogger
  • Template Edit HTML
  • Cari kode CSS yang akan diberikan efek shadow pada textnya, contohnya pada sidebar blog kemudian tambahkan kode shadow setelah style atau warna fontnya. Berikut contoh cara memasukkan kodenya ke dalam kode CSS template :
Sebelum
#lostsector_bar_left{font-family:PT Sans Narrow,Arial,Helvetica,sans-serif; float:left; text-align:right; font-weight:normal; font-size:14px; color:#000;letter-spacing:0; width:25%; white-space:nowrap}
Sesudah
#lostsector_bar_left{font-family:PT Sans Narrow,Arial,Helvetica,sans-serif; float:left; text-align:right; font-weight:normal; font-size:14px; color:#000; text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1),0px 18px 23px rgba(0,0,0,0.1); letter-spacing:0; width:25%; white-space:nowrap}
  • Pratinjau atau simpan template dan lihat hasilnya.

2. Kode Efek Text Shadow


Cara Membuat Efek Text Shadow Pada Blog
text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
Cara Membuat Efek Text Shadow Pada Blog
 text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
Cara Membuat Efek Text Shadow Pada Blog
text-shadow: 6px 6px 0px rgba(0,0,0,0.2);
Cara Membuat Efek Text Shadow Pada Blog
 text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);
Cara Membuat Efek Text Shadow Pada Blog
 text-shadow: 0px 3px 0px #b2a98f,0px 14px 10px rgba(0,0,0,0.15),0px 24px 2px rgba(0,0,0,0.1),0px 34px 30px rgba(0,0,0,0.1);
text-shadow: 0px 4px 3px rgba(0,0,0,0.4),0px 8px 13px rgba(0,0,0,0.1),0px 18px 23px rgba(0,0,0,0.1);
Cara Membuat Efek Text Shadow Pada Blog
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);
Cara Membuat Efek Text Shadow Pada Blog
-webkit-background-clip: text;-moz-background-clip: text;background-clip: text;color: transparent;text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
Cara Membuat Efek Text Shadow Pada Blog
-webkit-background-clip: text;-moz-background-clip: text;background-clip: text;color: transparent;text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
Cara Membuat Efek Text Shadow Pada Blog
text-shadow: -10px 10px 0px #00e6e6,-20px 20px 0px #01cccc,-30px 30px 0px #00bdbd;
Cara Membuat Efek Text Shadow Pada Blog
text-shadow: 0px 15px 5px rgba(0,0,0,0.1),10px 20px 5px rgba(0,0,0,0.05),-10px 20px 5px rgba(0,0,0,0.05);
Cara Membuat Efek Text Shadow Pada Blog
color: rgba(0,0,0,0.6);text-shadow: 2px 8px 6px rgba(0,0,0,0.2),0px -5px 35px rgba(255,255,255,0.3);
image and code source : http://designshack.net/
Dari kode text shadow di atas, semuanya bisa anda modifikasi dengan cara mengganti value dari tiap-tiap kode.

Lost Sector
Lost Sector

5 comments:
Write comment
  1. mantap sangat nih informasi sangat bermanfaat sob,,,izin ambil kode kode nya sob
    kunjungan balik di blog aku yah http://dhanicyx.blogspot.com

    ReplyDelete
  2. Terima kasih Infonya Bro, izin ikut menerapkan ya. hehe

    Informasi Lowongan Kerja Terbaru BUMN, Persero, Swasta, & Berbagai Perusahaan Besar di Indonesia : http://expocpnsbumn.blogspot.com/

    ReplyDelete
  3. infonya bagus gan...

    izin coba dulu gan...

    Dari http://norafila.blogspot.com/

    mampir ke blog saya gan..

    ReplyDelete
  4. .Save dulu gan. thanks :)

    ReplyDelete