Untuk membuat efek nongol seperti contoh di atas, pertama kali saya membuat dua elemen (si hijau dan si merah) dengan z-index yang berbeda nilainya. Si hijau memiliki z-index lebih besar daripada si merah. Fungsi z-index ini sebagai posisi layer, jika lebih besar, maka posisi elemen akan berada di paling atas dari elemen lainnya. z-index ini akan berfungsi jika kita menambahkan kode position:relative; atau position:absolute;, pada sebuah elemen. Dan yang perlu diingat adalah posistion:relative; adalah kandang dari position:absolute; supaya tidak lari kemana-mana, supaya kita bisa mengontrol si merah.

Prinsip kerja pada contoh di atas adalah, saat kita hover si hijau, maka si merah yang berada di dalam si hijau akan berpindah posisi. Misal, contoh paling kiri, si merah posisinya absolute dengan left:50px maka saat si hijau di hover, si merah akan berganti koordinat dengan nilai left:80px. Untuk membuat efek transisinya, kita tinggal menambahkan kode transition:0.3s ease;, dimana 0.3s adalah durasi dan ease adalah timing function. Silakan lihat Source Code»

Pada contoh tooltip di sini, sifat si merah dan si hijau sama dengan contoh pertama (slide). Dengan si merah punya position:absolute, sedangkan si hijau punya position:relative dan si hijau punya z-index lebih besar daripada si merah.

Proses pembuatan tooltip ini sebenarnya mudah, kita tinggal mengatur koordinat si merah agar keluar dari si hijau, lalu menghilangkannya. Misal untuk contoh 2 dari kiri (tooltip atas), untuk mengatur koordinat si merah kita tambahkan kode top:-80px; dan untuk menghilangkan si merah, kita tinggal menambahkan kode visibility:hidden; dan opacity: 0;. Mengapa tidak menggunakan opacity saja untuk menghilangkan si merah? Jawabannya, jika kita hanya menggunakan opacity saja, sebenarnya si merah masih di tempat (bukan hilang sepenuhnya) karena fungsi opacity adalah mentransparankan wujud dan bukan menghilangkan wujud.

Cara kerjanya adalah, saat si hijau di hover, maka si merah yang berada di atas si hijau akan turun ke bawah, dari koordinat top:-80px; menjadi top:-60px dan untuk memunculkan si merah bersamaan dengan berubahnya koordinat tersebut, maka tambahkan kode visibility:visible; dan opacity:1;. Dan untuk efek transisinya kita tinggal menambahkan kode transition:all 0.3s ease; saja. Lihat Source Code »

Contoh penggunaannya untuk website Senyum Semangat Ramadhan SM*SH.

Pada contoh sliding door dan hover di sini, sifat si merah dan si hijau sama dengan contoh pertama (slide). Bedanya adalah si hijau punya z-index LEBIH KECIL daripada si merah. Sehingga nantinya saat di hover, muncul si merah di atas si hijau.

Untuk membuat efek sliding door ini, tambahkan kode pada si hijau overflow:hidden;. Untuk menyembunyikan si merah, posisikan si merah lebih besar/kecil lebar dari si hijau. Misal, pada contoh nomor 1 (paling kiri), si hijau mempunyai lebar 100px, maka posisikan si merah ke left:-100px; dan saat si hijau di hover, pada si merah tambahkan kode left:0;. Efek slide pada contoh nomor 1, menggunakan kode transition:0.3 ease;.

Untuk contoh efek fade saat dihover (paling bawah), prinsipnya sama dengan sliding door, tapi untuk menghilangkan si merah menggunakan opacity:0; dan saat dihover opacity:1;. Supaya text di bawah objek hover kelihatan sedikit, maka background si merah harus ditransparankan, menggunakan kode background:rgba(255,0,0, 0.5); dimana 0.5 adalah tingkat transparasinya. Jika menggunakan background:rgba(255,0,0, 0.5);, maka yang transparan hanya backgroundnya saja, dan teks masih terlihat jelas. Contoh penggunaan di website VP Digital »

Lihat Source Code »

Trik sederhana bagaimana cara menambahkan sedikit transisi di dropdown list akhirnya ketemu, walopun dengan cara sendiri, yang penting bertransisi.

Pada contoh ini ada dua ul, yang satu adalah ul induk (warna hijau), yang kedua adalah ul anak (warna hitam). Untuk menambahkan efek transisi, maka tambahkan kode transition: 0.2s ease; pada tag a yang berada di dalam ul anak (warna hitam). Dan yang kita transisikan adalah padding dari tag a, yang sebelum di hover mempunyai padding: 0; dan setelah dihover diubah menjadi padding: 5px;.

Untuk lebih jelasnya, silakan lihat Source Code »

Pada contoh kali ini saya akan membahas perbedaan arah putaran (rotasi). Untuk contoh nomor 1 (paling kiri), jenis putarannya adalah bolak balik setengah lingkaran, untuk menjalankan animasi tersebut, saya menggunakan kode animation: rota-right 3s infinite linear;. Dimana rota-right adalah nama animasi, 3s adalah durasi animasi, infinite adalah jumlah perulangan animasi yang diinginkan, jika kita menggunakan infinite, maka animasi akan diulang terus-menerus sampai tak terhingga. Dan yang terakhir adalah linear, kode linear ini adalah timing function (?) yang digunakan pada animasi. Jika kita menambahkan kode ini pada sebuah elemen, maka animasinya akan kontinyu, dalam artian, tidak ada jeda (tersendat-sendat) antara nilai prosentasi di keyframes. Contoh yang tidak menggunakan linear bisa di liat pada animasi rotasi terakhir pada contoh di atas, animasi itu menggunakan ease.

Lihat Source Code »

Untuk membuat animasi yang kontinyu seperti contoh ini, yang di animasikan adalah posisi background, menggunakan kode background-position. Perpindahan posisi background harus sebesar lebar pixel dari gambar background yang digunakan, jika tidak maka animasi akan tersendat. Misalnya untuk gambar gunung pada di atas, gambar background-nya mempunyai lebar 400px, maka posisi background yang digunakan harus sama dengan lebarnya, yaitu background-position: -400px 0; dimana nilai (-) minus pada contoh di atas supaya posisi background bergerak ke kiri.

Secuil kode animasi yang digunakan:

.obj-kont-1 {
   background-image: url(mount.png);
   animation: kont-2 13s infinite linear;
}

@keyframes kont-2 {
   from {background-position: 0 0;}						
   to {background-position: -400px 0;}
}

Silakan utak-atik versi lengkap Source Code »

Untuk contoh ini saya mencoba membuat circle menu seperti milik Path. Contoh ini masih belum sempurna, karena masih menggunakan hover untuk mengeluarkan menunya, dan ada perbedaan durasi saat dibuka di Firefox, Chrome, dan Safari. Warna cyan adalah area hover. Untuk lebih jelasnya, silakan utak-atik Source Code »

Contoh yang sempurna (CSS3 only): Path Menu »

Plugin (jQuery): Circle Menu »