Find What You Need

20 Jan 2010

Menambah Efek Shadow Pada Text Dengan CSS Kode

Gonta ganti jenis font pada text itu adalah hal yang sudah biasa dan mudah dilakukan di blog, kita tinggal masuk ke pengaturan font dan warna, lalu ubah sesuai kehendak kita. Nah, sekarang bagaimana supaya text misalnya text untuk judul posting ada efek shadow atau bayangan. ehm, tentu itu tidak semudah membalikkan telapak kaki, tapi semudah membalikan telapak tangan..he..he..hee..


Contoh efek shadow bisa anda lihat pada judul posting yang sedang anda baca ini. Coba perhatikan baik-baik, beda kan dengan tulisan text biasa. Efek Shadow tersebut di buat dengan kode CSS3. Efek Sahdow ini bisa tampil jika kita menggunakan browser safari 1.1, Firefox 3.5 , Opera 9, dan Chrome. Bagi yang masih menggunakan browser Internet Explorer, efek shadow ini belum support jadi kelihatan seperti text biasa saja.

Untuk membuat efek shadow , kita cuma menambahkan kode berikut :

text-shadow:2px 2px 2px #000

Keterangan : 2px --> Horizontal offset, 2px --> Vertikal offset, 2px --> Blur, #000 --> Warna Bayangan.
Kita bisa merubah nilai-nilai  tersebut sesuai dengan efek shadow yang ingin ditampilkan. Silahkan anda utak atik nilai diatas untuk mendapatkan efek yang kita kehendaki.

Untuk penempatannya, bisa kita simpan di Judul Posting , Judul Sidebar, dan dimana saja terserah kita.
Sebagai contoh kita akan membuat efek shadow untuk judul posting.
Sigin di Draft Blogger
Dalam Dasbor masuk Tata letak --> Edit HTML

Cari kode seperti ini, kode ini diambil dari template minima. Kita bisa menyesuaikannya dengan template yang kita pakai, pada dasarnya adalah sama.


.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}


Masukan kode  ini  text-shadow:2px 2px 2px #000; diantara kode diatas, jadi seperti ini

.post h3 {
  margin:.25em 0 0;
  padding:0 0 4px;

  text-shadow:2px 2px 2px #000;
  font-size:140%;
  font-weight:normal;
  line-height:1.4em;
  color:$titlecolor;
}


Simpan perubahan. dan sekarang coba lihat hasilnya.






**** Semoga Bermanfaat ****

Untuk mendapatkan informasi dan postingan terbaru dari blog ini, silahkan ketikkan email anda di form berlangganan. Gratiiiis...

Berlangganan Lewat RSS

3 komentar:

Bang Koko Pada 3 September 2010 23.02 mengatakan...

salam knl kawanku.......

nice info.....

skalian follow di no urut 21..

jika berkenan silahkan follow balik saya

Andrekepy Pada 14 September 2011 08.38 mengatakan...

thanks brow.......... :D

Bunga Kurnia Pada 29 Desember 2013 22.38 mengatakan...

Kok gak bisa2 ya..

Posting Komentar

Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.

Ketikkan Karakter Jika Ingin Memasang Emoticon.
:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))

Artikel Yang Lainnya

 

My Best Friend

Mengenai Saya

Foto saya
Sebagai tempat belajar dan menyimpan arsip jika saya membutuhkannya suatu waktu, dan semoga menjadi ilmu yg Bermanfaat bagi Orang yang membacanya .

Visitor

free counters

Belajar Bersama Copyright © 2009 Template Wanaking Di Desain Ulang Oleh Albaniyu | Blogger Template