Ya... hanya 2 (dua) css3 property dan semua berubah dengan luar biasa. Kita hanya akan gunakan css3 text-shadow property dan css3 transition property. Text shadow berfungsi memberi efek bayangan pada teks dan css3 transition akan kita gunakan pada setiap link blog agar menampilkan transisi warna ketika cursor berada di atasnya (disorot, kang! He... pakai senter, lagi... ha... ha...).
Silahkan buka link di bawah ini dan lihat efek yang terjadi pada blog setelah 2 property css 3 digunakan.
Cara Menggunakan Kode:
D E M O
Silahkan buka link di bawah ini dan lihat efek yang terjadi pada blog setelah 2 property css 3 digunakan.
Kode CSS yang digunakan:
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;
}
Cara Menggunakan Kode:
- Simpan kode css di atas kode ]]></b:skin>
- Lihat cara menyimpan kode di menu sebelah kiri halaman blog Special Tutorials. Dalam daftar di dalamnya terdapat link untuk tutorial tentang cara menyimpan kode CSS atau kode lain dalam template/blog.
- Baca juga "Cara Backup" Template yang juga ada di sana!
- Tricks ini akan memberi hasil maksimal ketika blog yang anda gunakan menggunakan backkground warna terang.
- Jika blog anda menggunakan background warna gelap sebaiknya gunakan syntax yang ke-2 saja.
a:link,a{
Kode css di atas akan memberi efek transisi perubahan warna teks link saat cursor disentuhkan.
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;
} - Selesai dan semoga bermanfaat bagi sampeyan semua!
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
Posting » Jemuah (KLIWON), February, 29, 2012» Happy Blogging - gubhugreyot «
Comments
Post a Comment