Sabtu, 01 Juni 2013

Membuat elemen pembuka

Css3 memang sudah gila2an dimainin para web developer sudah banyak sekali kreasi tentang css3 gak pengen ketinggalan kali ini aku membuat elemen pembuka dengan memanfaatkan pseudo element ::after , ::before dan satu elemen <span> plus memanfaatkan efek transition juga agar pergerakan elemen terlihat lembut jadi saat di hover/sentuh elemennya seakan terbuka.

ILUSTRASI

Dalam kode ini elemen <span> gunanya untuk membuat garis dengan efek box-shadow yang terlihat memanjang kebawah seperti mengunci.

/* Opening Element By
ZTO ======================
http://zhinto.blogspot.com
*/
body::before, body::after {
    position: absolute;
    content: "";
    background: #222;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    z-index: 9999
}
body::before {
    top: 0;
    left: 50%;
    right: 0;
    bottom: 0;
    }

body::after {
    top: 0;
    left: 0;
    right: 50%;
    bottom: 0;
    }

body:hover::before {
    left: 100%
    }
body span.grz {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    border: 1px solid #ccc;
    margin: 0 0 0 -1px;
    z-index: 99999;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -moz-transition: all 3s ease-in;
    -o-transition: all 3s ease-in;
    -webkit-transition: all 3s ease-in;
    transition: all 3s ease-in;
    -moz-box-shadow: 0 0 20px 3px #06F;
    -webkit-box-shadow: 0 0 20px 3px #06F;
    box-shadow: 0 0 20px 3px #06F
    }
body:hover::after {
    right: 100%
    }

body:hover::before, body:hover::after {
    visibility: hidden
    }

body:hover span.grz {
    visibility: hidden;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    -webkit-transition: all .2s ease-out;
    transition: all .2s ease-out;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    bottom: 100%;
    }

Simpan kode css diatas ]]></b:skin>

<span class='grz'></span>

Simpan kode HTMLnya dibawah <body>