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.

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

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.

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