Bermain Dengan Text Shadow

Selasa, 12 Januari 2010

Perkembangan dunia blog, kian pesat. Situasi inipun semakin menuntut pengguna blog dengan berbagai macam platform (blogger, blogspot, wordpress, dll), untuk lebih kreatif dalam berkarya. Salah satu trend yang sedang berkembang di dunia blog pada tahun 2009 yang lalu adalah, munculnya inisiatif para bloggers untuk mengembangkan tampilan web 2.0, yang digunakan dalam basic template magazine.

Salah kelemahan blog memang terletak dari sisi tampilan yang kurang hidup, dibandingkan dengan platform joomla misalnya. Tapi jangan khwatir, kreatifitas para bloggers juga semakin maju untuk menjawab tantangan ini.

Salah satu trik blog yang sekarang digandrungi adalah text shadow, atau gambar bayangan di setiap huruf dalam blog kita. Text shadow ini tentu saja membuat tulisan lebih hidup dan menarik dibandingkan huruf yang biasa kita gunakan.

Format dasar atau anatomi Style CSS text shadow adalah sebagai berikut :  text-shadow : 2px 2px 2px #222;, dimana penjelesannya sebagai berikut :
  • 2px pada urutan pertama berarti memberi bayangan berukuran 2px ke kanan. Apabila -2px berarti memberi bayangan berukuran 2px ke kiri.
  • 2px pada urutan kedua berarti memberi bayangan berukuran 2px ke atas. Apabila -2px berarti memberi bayangan berukuran 2px ke bawah.
  • 2px pada urutan ketiga berarti membuat blur pada bayangan tersebut sebesar 2px.
  • #222 adalah warna dari bayangan tersebut.
Setelah memahami format dasar text shadow di atas, tinggal bagaimana menerapkannya dalam pengkode-an struktur HTML template kita. Sebagai contoh, jika anda ingin memberikan efek text shadow di bagian tulisan header template anda, maka silahkan login terlebih dahulu, dan cari kode : #header h1 {, dan letakkan format dasar text shadow di atas. Selesai dan silahkan lihat hasilnya.

Anda juga bisa membuat format text shadow sesuai dengan keinginan, dengan menggunakan fasilitas text shadow maker online. Salah satu situs penyedia text shadow maker ini adalah : Westciv.com. Tools ini juga menyediakan fasilitas lain seperti, Linear Gradients, Radial Gradients, Box Shadow, Text Stroke dan Transforms. Silahkan klik situs tersebut dan segera meluncur ke TKP.

3 komentar:

Ivan Kavalera mengatakan...

Terimakasih infonya. Salam hangat dari blogger pemula.

Herdiansyah Hamzah mengatakan...

@Ivan : Thank u bro, ini juga sedang belajar soal blog!he...3x. Tetap berkarya dan jaga semangat dengan baik. Salam buat kawan2 di bulukumba.

jika mengatakan...

Thx, mas infonya saya lagi belajar maklum masih baru belajar ngeblog.

mas saya numpang link ya di :
http://cvselatsunda.blogspot.com

Posting Komentar

Terima kasih telah menyempatkan waktu untuk berkunjung di BLOG saya yang katro ini. Biasakanlah berkomentar setelah Anda membaca artikel. But No Spam, No Porn....OK Bro!!!