Teks Shadow & CSS-3 Transition beri Efek Fantastis

Membuat blog menjadi lebih indah tak selalu harus menggunakan javascript atau kode css yang banyak. Kali ini kita akan mencoba sebuah trik memanfaatkan efek teks shadow dan efek css3 transition. Dua buah CSS 3 property dalam 2 buah syntax akan memberi perubahan secara drastis di keseluruhan blog. Tentu saja perubahan ini bertujuan membuat blog semakin cantik.

Jika anda cermati dengan seksama, dalam blog ini anda akan melihat ada sesuatu yang berbeda pada teks dan semua link. Semuanya berubah dan terasa blog menjadi lebih hidup, lebih dinamis.

Mungkin saja sampeyan bingung untuk memahami perubahan yang sebenarnya terjadi. Cobalah anda cermati teks dan link yang terdapat dalam box di bawah ini dan bandingkan dengan keseluruhan yang ada di blog. Pasti anda akan tahu apa yang sebenarnya telah berubah.

Bentuk teks dan link sebelum penambahan css3 text-shadow property dan css3 transition property:

Bandingkan dengan yang di luar box

Seperti inilah teks sebelum dilakukan penambahan css3 text shadow property dan css3 transition property. Anda akan melihat betapa teks yang diluar box terlihat seperti menonjol (spt 3D) sedang yang ini terlihat datar-datar saja. Penggunaan warna shadow sangat berpengaruh, oleh karena itu pilihlah warna shadow dengan ukuran shadow yang tepat. Bandingkan juga link di bawh ini dengan link-link lain di blog, terutama saat cursor di arahkan di atasnya (disorot).

Link tanpa efek css3 transition dan text-shadow

Kode CSS:

body{text-shadow:2px 2px 2px #999;}
a:link,a{
      text-decoration:none;
      transition:color 0.7s linier;
      -o-transition:color 0.7s linier;
      -moz-transition:color 0.7s linier;
      -webkit-transition:color 0.7s linier;
      -ms-transition:color 0.7s linier;
}

Simpan kode css di atas tepat di atas kode ]]></b:skin>