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