CSS3 transition memungkinkan dibuatnya berbagai animasi tanpa perlu menggunakan javascript ataupun bantuan gambar animasi berekstensi gif. Dengan kode css yang disertakan di bawah, sebuah tabs menu horizontal blogger beranimasi dapat dibuat untuk menggantikan blogger tabs/navigasi menu horizontal default blogger.
Ada beberapa kode baru (tag, id dan kode css) yang perlu ditambahkan agar tabs baru berfungsi secara optimal. Penambahan dilakukan di antara tag pembuka dan penutup head (di atas kode ]]></b:skin>) serta di antara tag pembuka dan penutup body melalui "Expand Template Widget".
Tab yang terlihat di atas adalah sebuah tab blogger beranimasi (animated blogger tabs) yang dibuat dengan menggunakan kode css3 transition. Animasi tercipta melalui permainan pada padding, opacity, top position dan background. Background image sama sekali tidak dipergunakan, karena untuk memperoleh efek gradasi warna kita hanya menggunakan css background gradient.
Blogger Tabs atau Blogger Horizontal navigation bar yang seperti terlihat di atas harus dibuat dengan menambahkan kode css baru dan sedikit merubah xhtml default blogger karena menggunakan tag baru sebagai tambahan agar tercipta efek animasi yang diinginkan. Anda harus menyelipkan tag span diantara tag pembuka li (<li>) dan tag pembuka "a" (<a href="...">).
Bloggertabs dengan efek bounce merupakan pengembangan dari animated tab with css3 transition dan Colorful tabs. Anda bis melihat kedua macam tab tersebut melalui link di bawah ini:
Bouncing effect dibuatmenggunakan css3 animation sehingga tabs ini bisa dibilang bebas javascript tapi penuh efek dan animasi serta colorfull
Yang membedakan tab ini dengan tab sebelumnya (Animated Blogger Tabs with css3 transition) adalah pada warna background setiap tab yang berbeda. Perbedaan background tab tidak dilakukan dengan menambahkan sebuah class baru, namun memanfaatkan css selector. Anda dapat melihat kodenya dan melakukan perubahan background pada kode css yang disertakan di bawah (jika menginginkan warna background tabs berbeda!).
Animated tab merupakan sebuah tabs ,menu horizontal yang dapat digunakan untuk mengganti tab menu horizontal default blogger. Disebut sebagai tab animasi karena ketika cursor diarahkan diatas menu maka menu akan bergeser dengan bentu pergeseran dalam durasi tertentu yang diatur dengan css transition. Anda dapat menggunakan tabs ini untuk menggantikan tabs default yang ada di blog anda. Ada beberapa yang harus dilakukan agar tabs bisa bekerja secara sempurna.
Hanya dengan kode css dan yang berbeda dari multilevel dropdown menu ini adalah penggunaan fungsi klik untuk mengaktifkan menu. Anak menu akan terlihat bukan melalui model hover, seperti yang sudah biasa kita buat dan lihat, namun dengan cara "klik" di menu "induknya". Metode klik ini sama sekali tanpa javascript. Tetap menggunakan kode css. CSS dan CSS3 menjadi kunci terbangunnya menu spesial ini.
Demo menu bisa anda lihat tepat di atas posting ini!
Sebuah vertical Accordion dengan kode css & css3 yang sangat luar biasa. Memanfaatkan click function untuk membuka setiap bagian accordion sehingga accordion ini menjadi sangat mempunyai nilai lebih karena animasi saat membuka dan menutup-nya tak ubahnya seperti sebuah accordioan yang dibuat dengan javascript, jQuery atau mootool.
