CSS3 Warna Link

Oleh -
Hover Link Pelangi

Sebenarnya ada banyak tutorial yang menyediakan script tautan pelangi seperti ini. Tapi untuk yang satu ini, Saya sudah sedikit mengompresnya sehingga berkasnya jadi sedikit lebih kecil ukurannya.


<script src="http://reader-download.googlecode.com/svn/trunk/pelangi.js" type="text/javascript"></script>


Letakkan saja kode itu di atas kode </head> atau letakkan dalam sebuah widget HTML/JavaScript. Efeknya bisa kalian lihat langsung di sini. Coba saja kamu dekatkan kursor mousemu ke tautan-tautan di blog ini.
Sumber: HompimpaAlaihumGambreng

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Melindungi Artikel Dari Copy-Paste

Oleh -
Gambar
Proyek ini bertujuan untuk melindungi postingan-postingan di blogmu agar tidak mudah disalin oleh para pengunjung. Sekarang coba masuk ke tab Rancangan kemudian pilih Edit HTML . Untuk menonaktifkan fungsi blok dan klik-kanan mouse sebenarnya sangatlah sederhana. Kamu hanya perlu mengganti tag <body> dengan kode ini: <body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'> Klik Simpan Template kemudian lihat halaman blogmu. Sekarang coba klik-kanan mouse mu, maka tidak akan ada menu apapun yang akan tampil. Coba juga untuk mengeblok tulisan-tulisan di halamanmu. Tidak bisa kan? Begitulah salah satu cara jitu untuk melindungi hasil karyamu di blog. Namun sayangnya, cara ini juga mempunyai sebuah efek samping, yaitu akan membuat kotak penelusuran posting bawaan dari template blogmu menjadi tidak berfungsi. Satu-satunya jalan keluar untuk mengatasi masalah ini mungkin hanya dengan menampilkan kembali navbar...
Baca selengkapnya

Membuat Efek Bayangan CSS Text Shadow

Oleh -
Gambar
Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada teks: span { text-shadow:10px 10px 7px #222; } Aturannya sama persis dengan CSS Box Shadow : 10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. CSS Text Shadow Inset itu tidak ada, namun keterbatasan tersebut bukan berarti bahwa kamu tidak bisa membuat efek-efek yang lebih dahsyat. Dengan sedikit kreativitas, sebenarnya kamu juga bisa membuat efek bayangan teks inset (baca tutorialnya di sini ). Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini: Top-Down Inline <style type='text/css'> #teks1 {text-shadow:10px 10px 7px #222;} </style> ...... <div id='teks1'> TEKS </div> <div style='text-shadow:10px 10px 7px #222;'> TEKS </div> ...
Baca selengkapnya

Membuat Efek Bayangan CSS Box Shadow

Oleh -
Gambar
Berikut ini adalah kode CSS dasar untuk membuat efek bayangan pada objek: CSS Bayangan Outset: div { -webkit-box-shadow:10px 10px 7px #222; /* Safari & Chrome */ -moz-box-shadow:10px 10px 7px #222; /* Firefox */ box-shadow:10px 10px 7px #222; /* W3C */ } CSS Bayangan Inset: div { -webkit-box-shadow:inset 10px 10px 7px #222; /* Safari & Firefox */ -moz-box-shadow:inset 10px 10px 7px #222; /* Firefox */ box-shadow:inset 10px 10px 7px #222; /* W3C */ } 10px yang pertama adalah ukuran offset sumbu-X, 10px yang ke dua adalah offset sumbu-Y, 7px adalah tingkat blur, #222 adalah warna bayangan. Kamu juga bisa menuliskan nilai offset negatif untuk membuat bayangan menuju ke arah sebaliknya. Cara penerapannya bisa diletakkan secara top down ataupun inline seperti ini: Top-Down Inline #kotak1 { -webkit-box-shadow:10px 10px 7px #222; -moz-box-shadow:10px 10px 7px #222; box-shadow:10px 10px 7px #222; } ...... <div id='kota...
Baca selengkapnya