Kalian bingung mencari inspirasi untuk mempercantik footer atau kalian merasa ada efek yang kurang dari footer yang kalian buat ?, kalau begitu pagi ini saya membuat artikel mengenai cara membuat efek slide out pada footer menggunakan CSS dengan trik penggunaan z-index pada daerah-daerah tertentu agar dapat menciptakan efek slide tanpa bantuan javascript.

Namun sebelum pastikan struktur HTML yang kalian punya memiliki struktur yang sama seperti code dibawah ini :

<html>
<body>

..Content...
</html>

Jika kalian mempunyai  struktur template seperti itu maka kalian bisa menggunakan code css ini atau menambahkannya dengan code css yang ada.

body{
    position:relative;
    z-index:0;
}
#main {
    z-index:0;
    margin-bottom:295px;
}
#footer {
    position:relative;
    z-index:-2;
    height:295px;
}

Keterangan code :

Penggunaan z-index pada CSS merupakan salah satu cara untuk menempatkan template yang paling atas maupun yang paling bawah, sama halnya seperti cara kerja layer pada photoshop grafik yang pertama kali dilihat adalah pada layer pertama atau bisa dikatakan nilai z-indexnya adalah 0 atau lebih besar dari nilai z-index lainnya. namun jika layer tersebut ditaruh dibawah atau menggunakan nilai z-index -2 maka layer tersebut dapat dilihat dari sela-sela grafik yang masih kosong yang kurang lebih ilustrasinya seperti ini.

ilustrasi z-index

 

Teknik ini tidak dapat digunakan pada footer atau daerah konten yang tidak memiliki ukuran tinggi atau height, namun itu semua bisa diakali dengan menambah code ini pada daerah konten yang otomatis kita hanya cukup mengatur footernya saja.

Catatan : code ini harus diaplikasikan dengan :after agar dapat berjalan dengan baik.

#main:after {
    clear:both;
    content:".";
    display:block;
    height:0;
    visibility:hidden;
}

Bagaimana apakah kalian bisa melakukan hal itu, jika masih bingung balas artikel ini dengan pertanyaan yang jelas agar saya bisa membantu kalian.