Struktur Tubuh Manusia (X-Ray) Dengan CSS3 dan HTML


pagi semua...
kali ini saya mau share Cara Mudah membuat Struktur Tubuh Manusia
caranya mudah...
cukup siapin alatnya :
- Browser Masing - Masing
- Test Preview HTML CSS, masuk ke sini

HOW TO :
pada template HTML, masukan script berikut :

<head>
<title>Struktur tubuh manusia</title>
    <h1>STRUKTUR TUBUH MANUSIA BY EGAR RIZKI SANTUSO</h1>
    CARA : ARAHKAN MOUSE KE STRUKTUR TUBUH INI, KLIK STRUKTUR TUBUH UNTUK MELIHAT KERANGKA.
<body>
    <div class="item">
    <div class="hover">
        <div class="laser"></div>
    </div>
    <div class="click">
        <div class="claser"></div>
    </div>
    <img class="background" src="http://cssdeck.com/uploads/media/items/1/1AE9zJX.png" />
</div>
    </body>
</head>
 lalu, pindah ke tab CSS, masukin script berikut :

.item {
    position: relative;
    width: 475px;
    height: 400px;
    margin: 50px auto;
}

.background {
    position: absolute;
    z-index: 1;
    left: 120px;
    display: block;
}
.hover {
    height: 0%;
    background: url(http://cssdeck.com/uploads/media/items/4/4af1rdU.png) no-repeat;
    position: absolute;
    background-position: 45% 0;
    z-index: 2;
    -webkit-transition: height 1s ease;
    -moz-transition: height 1s ease;
    -o-transition: height 1s ease;
    -ms-transition: height 1s ease;
    transition: height 1s ease;
    width: 100%;
}
.click {
    height: 0%;
    background: url(http://cssdeck.com/uploads/media/items/1/1ICzabQ.png) no-repeat;
    position: absolute;
    background-position: 45% 0;
    z-index: 2;

    -webkit-transition: height 1s ease;
    -moz-transition: height 1s ease;
    -o-transition: height 1s ease;
    -ms-transition: height 1s ease;
    transition: height 1s ease;
    width: 100%;
}
.item:hover .hover {
    height: 100%;
}

.item:active .click {
    height: 100%;
}

.laser {
    height: 3px;
    width: 100%;
    background: #86ff5e;
    display: block;
    position: absolute;
    bottom: -2px;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 20px 10px #86ff5e;
    -moz-box-shadow: 0 0 20px 10px #86ff5e;
    box-shadow: 0 0 20px 10px #86ff5e;

    -webkit-transition: opacity .25s ease;
    -moz-transition: opacity .25s ease;
    -o-transition: opacity .25s ease;
    -ms-transition: opacity .25s ease;
    transition: opacity .25s ease;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;

    -webkit-transition-delay: .75s;
    -moz-transition-delay: .75s;
    -o-transition-delay:.75s;
    -ms-transition-delay: .75s;
    transition-delay: .75s;
}

.claser {
    height: 3px;
    width: 100%;
    background: #01c9ee;
    display: block;
    position: absolute;
    bottom: -2px;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;

    -webkit-box-shadow: 0 0 20px 10px #01c9ee;
    -moz-box-shadow:  0 0 20px 10px #01c9ee;
    box-shadow:  0 0 20px 10px #01c9ee;

    -webkit-transition: opacity .25s ease;
    -moz-transition: opacity .25s ease;
    -o-transition: opacity .25s ease;
    -ms-transition: opacity .25s ease;
    transition: opacity .25s ease;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;

    -webkit-transition-delay: .75s;
    -moz-transition-delay: .75s;
    -o-transition-delay: .75s;
    -ms-transition-delay: .75s;
    transition-delay: .75s;
}

.item:hover .laser {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;

    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
}

.item:active.laser {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;

    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
}

.item:hover .claser {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;

    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
}

.item:active.claser {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;

    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
}


Keterangan :

Hijau : bisa kalian ganti ukuran & warna sesuai selera agan2...

Merah : ganti linknya dengan Link gambar kalian...

untuk lainnya, silahkan berkreasi sendiri ^^


maaf tanpa screenshot, ga sempet bikin gan ^^ hehehehe...

Sumber : cssdeck.com
Posted by admin

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)