Create Rainbow Color Effect with css3 Animation

Perkembangan yang terjadi pada kode css3 membuat berbagai inovasi baru dapat dibuat hanya dengan kode css. Javascript memang masih tetap dibutuhkan, namun demikian porsinya semakin hari akan semakin jauh berkurang. Berbagai animasi yang berbasis pada gerak, warna ataupun ukuran, baik yang melibatkan gambar ataupun tidak, kini bisa dibuat hanya menggunakan kode css3 animation yang dipadukan dengan css3 transition, css3 transform serta berbagai properti css lainnya.Setelah beberapa browser besar seperti Mozilla Firefox, Safari (Apple) dan Google Chrome, dalam bulan Mei-Juni ini Opera juga sudah mulai memberikan dukungan penuh thd css3 animation. Keraguan untuk membuat tutorial & desain yang menggunakan kode css3 animation lenyap sudah. Kini kita hanya tinggal menunggu IE yang tak lama lagi juga pasti segera mengikuti jejak Opera. Membuat Efek Warna Pelangi pada Hover Teks Link menggunakan kode css3 animation sangat sederhana tetapi tetap mampu menghasilkan kemampuan maksimal. Dengan fungsi hover pelangi ini, maka hover pada setiap teks link akan mempunyai warna berubah-ubah ketika cursor di arahkan di atasnya. Anda dapat mengatur warna pelangi dengan cara merubah warna yang digunakan dalam kode css. Dibawah ini adalah beberapa contoh hasil penggunaan efek warna pelangi pada teks link. Arahkan cursor anda pada teks link di bawah:

Tutorial Penting yang harus anda ikuti!

Khusus bagi blogger dg nafsu besar

Hanya untuk Cewek

Silahkan juga arahkan cursor anda ke berbagai link yang ada di blog untuk melihat sejauh mana pengaruh kode css ini terhadap teks link yang digunakan.
Back to Tutorial

Demo Ticker : Widget Popular Posts Blogger Plugin

Demo Popular Posts Ticker/marquee - Blogger Plugin

Jika anda memperhatikan Widget Popular Posts Blogger plugin yang terletak di sidebar kanan, anda akan melihat sebuah widget popular posts blogger plugin yang tak seperti biasanya. Box yang dilengkapi dengan efek content bergerak ke atas tersebut hanya dibuat dengan kode html marquee. Html marquee ini memungkinkan kita untuk tak harus menampilkan seluruh daftar posting popular posts menjadi deret yang sangat panjang dari atas ke bawah. Cukup dengan box berketinggian berkisar 200px atau lebih maka seluruh data popular posts dapat ditampilkan secara sempurna dan terlihat mengalir dari bawah ke atas dimulai dari posting pertama hingga maksimal yang diijinkan (10 popular posts). Aliran data posting ini juga akan terus berputar tanpa pernah berhenti terkecuali apabila cursor anda arahkan di atas data popular posts yang sedang bergerak. Saat berhenti inilah maka pengunjung dapat membuka posting yang datanya termuat sebagai posting populer.

Bagaimana widget popular posts blogger plugin ini dapat buat menjadi sebuah plugin cantik dengan efek berputar seperti yang terlihat di sidebar tersebut, silahkan anda ikuti tutorialnya di shannenpio.blogspot.com.

Cara Membuat Ticker Popular posts Blogger Plugin

Box dengan Efek Animasi Gelap-Terang (Fade Effect) dengan CSS3

Hanya dengan menggunakan css3 anda dapat membuat sebuah box dengan efek animasi terang gelap atau gelap terang (fade effect). Efek animasi gelap terang pada box memanfaatkan css3 transition dan efek opacity (opacity effect). Anda dapat mengisi box dengan image, teks, widget atau apapun.

Sebuah karya yang sangat imajinatif meskipun melihatnya jadi terasa aneh. Anda bisa membayangkan apa yang akan terjadi jika seua anjing di dunia punya fisik seperti yang terlihat pada gambar tersebut. Buih... pasti dunia akan bertambah gila! Yah, terlebih di Indonesia. O... ya... bagaimana jika para koruptor kita rubah wajah dan bentuknya jadi seperti anjing ini?!

Back to Tutorial

No Right Click - Disable Right Click Image

Anti Copy Image dalam demo di bawah ini adalah bentuk anti copy image atau disable right click image yang sangat simple. Sebuah script super pendek menjadi sebuah senjata ampuh yang membuat image tak dapat lagi di klik kanan. Silahkan..., anda dapat mencobanya dengan klik kanan mouse kemudian lihatlah seberapa ampuh mini script ini bekerja!

Back to Tutorial

Anti Copy Image using CSS3

Posisi Image di sebelah kiri

Silahkan coba untuk klik kanan pada image disamping. Dapat dipastikan apa yang terlihat setelah klik kanan tak akan sesuai dengan apa yang diharapkan. Penggunaan CSS3 sebagai anti copy pada gambar/image tak berbeda dengan javascript. Sangat sederhana kodenya serta cukup mujarab khasiatnya!

Posisi Image di tengah

Jika demo di atas image berada di sebelah kiri (float:left}, maka demo yang kedua image kita buat pada posisi di tengah (center off position).

Silahkan coba anda klik dan lihat apa yang terjadi? Hei ... dimana kode link image-nya?

Back to Tutorial