Macan Kampus

Setelah sebelumnya sampeyan mengikuti tutorial tentang bagaimana menciptakan efek transparansi atau opacity effect dengan memanfaatkan CSS opacity property serta membuat box sederhana dari paduan opacity property dan CSS3 transition yang didalamnya juga telah ditambahkan background effect, kali ini kita akan coba kupas lebih dalam tentang bagaimana cara memadukan opacity effect tersebut dengan beberapa CSS property yang lain hingga tercipta efek yang lebih fantastis dan menarik untuk dijadikan tempat bernaung widget atau desain yang lain. CSS3 masih akan menjadi "kekuatan utama" yang menjadi penentu keindahan efek yang kita ciptakan.

Agar supaya lebih mudah dipahami dan sekaligus dapat dimanfaatkan di blog, kita akan buat sebuah scroll box yang dilengkapi dengan berbagai efek seperti, height, background-color dan background-image, transparansi, color serta munculnya scroller hanya saat cursor digerakkan di atas box. Dengan beberapa efek seperti di atas, sebuah widget atau apapun yang nantinya kita letakkan dalam box maka sebelum cursor berada di atas box maka yang terlihat hanya sebuah box dengan ketinggian minimal (bisa diatur). Jika sampeyan ingin melihat sebagian kecil dari efek yang akan kita ciptakan, silahkan kunjungi link di bawah ini (DEMO) dan cobalah sentuhkan cursor pada kolom yang berisi data komentar. Kolom ini hanya berketinggian beberapa mm saja tetapi saat cursor disentuhkan maka seluruh bagian akan meninggi dan terlihat keseluruhan isi dalamnya.