Cumulus swf - flash

Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Tampilkan postingan dengan label Effect. Tampilkan semua postingan
Tampilkan postingan dengan label Effect. Tampilkan semua postingan

Hover Link Warna Pelangi - Rainbow Color Effect with css3 Animation

Dalam bulan-bulan terakhir ini Opera telah mulai support terhadap css3. Sebuah kemajuan yang sangat menggembirakan yang mampu menggugah semangat baru untuk kembali berkarya. Yah...., selama ini gubhugreyot sama sekali memang belum mempostingkan desain atau tutorial yang berkaitan dengan css3 animation, dimana penundaan posting tentang css3 ini karena belum semua browser besar mendukung secara penuh. Kini setelah Opera juga sudah support penuh (hanya tinggal IE yg belum mendukung css3), maka tak ada lagi kendala & hambatan untuk membuat tutorial ataupun desain yang melibatkan penggunaan css3 animation. Untuk mengawali posting tentang css3 animation, kita akan membuat sebuah efek warna pelangi pada hover teks link yang hanya menggunaakan kode css. tentu saja dalam hal ini adalah css3 animation. Bagi sobat-sobat blogger yang selama ini menggunakan javascript dan ingin merubahnya menjadi dalam kode css, silahkan ikuti tutorial berikut.

Playing with Animated Flying Twitter Bird » with css3 effects & animated .gif

Dengan widget Animated Flying Twitter Bird yang telah mengalami modifikasi melalui penambahan kode css3 ini anda dapat sedikit bermain-main menangkap si burung twitter terbang. Si burung twitter terbang akan tetap seperti biasanya dengan terbang mengelilingi halaman blog, hanya anda dapat mencoba menangkapnya kemudian mempertahankan agar tetap bersama cursor hingga si burung manis berhenti. Atau cobalah tangkap tepat saat berhenti. Ketika burung twitter masih terbang dan tangkapan anda tepat maka burung twitter akan berhenti dan berusaha lepas disertai effek zoom serta munculnya burung twitter berbeda berbentuk animasi gif.

Javascriptnya silahkan anda copy melalui link di bawah ini dan segera simpan melalui add a gadget atau bisa juga diletakkan di bawah ]]></b:skin> atau di atas <head> atau di atas </body>

Widget Burung Twitter Terbang dg Effect css3

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:




Posting » Setu PON, April, 14, 2012

» Happy Blogging - gubhugreyot «


Sumber:

- Autor : Florian Buenzli, 2010
- For blogger by : Harrys, http://www.way2blogging.org, 2011
- With css3 effects by : gubhugreyot, http://gubhugreyot.blogdetik.com, April 2012



Perindah Blog dengan Background Highlight

Background highlight berfungsi untuk memberikan ciri penampilan khusus (penampilan berbeda) pada satu atau beberapa buah teks, sehingga teks tersebut tampil secara menyolok dan dengan sangat mudah dan cepat dilihat oleh pembaca. Agar penampilan background highlight tidak tampil terlalu berlebihan yang berakibat justru merusak tampilan blog dan membuat mata pembaca menjadi terlalu lelah, sebaiknya gunakan

Heading Style with Effect

Heading style with effect tidak hanya dapat digunakan untuk membuat sebuah judul/title sebuah paragraf saja, namun dapat digunakan dan dikembangkan untuk berbagai hal lain dalam blog, seperti misalnya untuk membuat sebuah link, baik saat posting ataupun saat menggunakan gadget. Heading yang sangat berbeda dengan bentuk/tampilan heading pada umumnya ini bertujuan agar membuat blog terlihat berbeda dan lebih indah. Effek yang tercipta dihasilkan melalui css3 transition dan opacity effect. CSS3 lain yang digunakan adalah border-radius yang digunakan untuk membentuk sudut lengkung. Silahkan anda klik link demo di bawah ini untuk mengetahui secara lebih jelas seperti apa sebenarnya yang dimaksud dengan heading style with effect serta kegunaannya.

D E M O

Langkah untuk membuat Heading Style with Effect :

Money Rain Effects

Hujan uang ? Siapa nggak suka?! Ada pepatah mengatakan "Lebih baik hujan uang di negeri sendiri daripada hujan batu di negeri orang (kepala bejol-benjol, lho!). Ini pepatah baru yang tentu saja semua orang suka. Kamu pingin pembaca blog kamu tambah kerasan karena di blog terjadi hujan uang?! Lho ini benar-benar nyata, bung! Klo nggak percaya buka saja sendiri (KLIK DEMO!).

D E M O

Head Title Animation

Head title animation bisa diisi dengan kata-kata sambutan atau teks lain yang berkaitan dengan blog. Animasi teks yang akan terlihat di address bar ini sekalipun sederhana namun mampu memberikan penampilan berbeda yang membuat blog semakin menarik. Letakkan dan simpan script berikut di bagian head di antara tag <head> dan tag </head>

Cara menggunakan Original Size Image on Mouseover :

Hover Link Pelangi: Cara Buat dan Pasang Rainbow Link Effects

Karena desain hover link CSS mempunyai banyak keterbatasan, maka untuk mendapatkan hover link yang lebih menarik dan atraktif banyak diciptakan hover link dalam bentuk script dengan menggunakan javascript. Kelemahan mendasar penggunaan hover link menggunakan javascript adalah dalam hal kompabilitinya, dimana tidak semua javascript yang digunakan kompatibel dengan browser yang ada. Salah satu Hover link yang begitu terkenal dilingkungan blogger adalah "Hover Link Pelangi" atau "Rainbow Hover Link" yang diciptakan oleh TAKANASHI Mizuki.

Highlight Paragraph

Yang dimaksud "Highlight Paragraf" adalah membuat sebuah paragraf dalam sebuah posting mempunyai latar belakang (background) dan warna teks yang berbeda-beda;
saat teks mulai terlihat, saat tersentuh cursor dan setelah cursor berpindah. Ketika cursor anda di atas box ini, maka inilah yang dimaksudkan dengan highlight paragraf!
Cara membuat highlight paragraf:

 
GR | Edited by | gubhug reyot