Home css kreasi Hijau Putih Tombol Shutdown

Senin, 01 April 2013

Hijau Putih Tombol Shutdown


Sudah banyak tercipta berbagai objek menggunakan css3/css. sebenarnya postingan ini terbit gara-gara aku pengen membuat sebuah logo dengan memakai Photoshop dari situ saya terinspirasi ingin mencoba membuat logo itu dengan css tapi lama kelamaan setelah ngutak-atik kode malah jadi mirip tombol Shutdown. inii dia Demonya

Inilah yang namanya manipulasi elemen menggunakan css, menggunakan position:relative pada elemen induk dan elemen didalam elemen induk diberi position:absolute setelah itu ditambahin juga css Pseudo elemen yang membuat objek lebih kelihatan indah, dan buat yang ingin menggunakannya dibawah ini kodenya.

/*
Owner : http://zhinto.blogspot.com/
 */
#mati {
    width: 80px;
    height: 80px;
    border: 10px solid;
    border-color: #0f0 #111 #0f0 #111;
    margin: 10px auto 10px;
    position: relative;
    background: #fff;
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    }

#mati > div {
    width: 50px;
    height: 50px;
    background: #0f0;
    position: absolute;
    left: 15px;
    top: 15px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5)
    }

#mati > div::before {
    position: absolute;
    content: "";
    height: 25px;
    width: 25px;
    /*Menyamakan Warna dengan warna background #loding*/
    background: #fff;
    left: 12.5px;
    top: 12.5px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px
    }

#mati > div::after {
    position: absolute;
    content: "";
    width: 5px;
    /*Menyamakan Warna dengan warna background #loding*/
    background: #fff;
    left: 45%;
    top: 0;
    bottom: 12px
    }

Dan ini kode HTML nya.

<div id='mati'>
<div></div>
</div>

Jika anda sudah mengerti css animation / @keyframes anda bisa utak atik kode tersebut sehingga bisa berputar-putar seperti efek loading.

Referensi css3 Animation
1. Css animation
2. @keyframes

Kira-kira seperti ini kode pembuat animasinya

/* kode pembuat animasi */
@keyframes mati {
 from {
    -moz-transform: rotate(-900deg);
    -ms-transform: rotate(-900deg);
    -o-transform: rotate(-900deg);
    -webkit-transform: rotate(-900deg);
    transform: rotate(-900deg)
 }
 to {
    -moz-transform: rotate(900deg);
    -ms-transform: rotate(900deg);
    -o-transform: rotate(900deg);
    -webkit-transform: rotate(900deg);
    transform: rotate(900deg)
 }

}

@-moz-keyframes mati {
 from {
    -moz-transform: rotate(-900deg);
    -ms-transform: rotate(-900deg);
    -o-transform: rotate(-900deg);
    -webkit-transform: rotate(-900deg);
    transform: rotate(-900deg)
 }
 to {
    -moz-transform: rotate(900deg);
    -ms-transform: rotate(900deg);
    -o-transform: rotate(900deg);
    -webkit-transform: rotate(900deg);
    transform: rotate(900deg)
 }
}

@-webkit-keyframes mati {
 from {
    -moz-transform: rotate(-900deg);
    -ms-transform: rotate(-900deg);
    -o-transform: rotate(-900deg);
    -webkit-transform: rotate(-900deg);
    transform: rotate(-900deg)
 }
 to {
    -moz-transform: rotate(900deg);
    -ms-transform: rotate(900deg);
    -o-transform: rotate(900deg);
    -webkit-transform: rotate(900deg);
    transform: rotate(900deg)
 }
}

@-ms-keyframes mati {
 from {
    -moz-transform: rotate(-900deg);
    -ms-transform: rotate(-900deg);
    -o-transform: rotate(-900deg);
    -webkit-transform: rotate(-900deg);
    transform: rotate(-900deg)
 }
 to {
    -moz-transform: rotate(900deg);
    -ms-transform: rotate(900deg);
    -o-transform: rotate(900deg);
    -webkit-transform: rotate(900deg);
    transform: rotate(900deg)
 }
}

@-o-keyframes mati {
 from {
    -moz-transform: rotate(-900deg);
    -ms-transform: rotate(-900deg);
    -o-transform: rotate(-900deg);
    -webkit-transform: rotate(-900deg);
    transform: rotate(-900deg)
 }
 to {
    -moz-transform: rotate(900deg);
    -ms-transform: rotate(900deg);
    -o-transform: rotate(900deg);
    -webkit-transform: rotate(900deg);
    transform: rotate(900deg)
 }
}

Lalu dibawah ini kode pemanggil animasinya

/* kode pemanggil animasi */
    animation: mati 3s infinite linear;
    -webkit-animation: mati 3s infinite linear;
    -moz-animation: mati 3s infinite linear;
    -o-animation: mati 3s infinite linear;
    -ms-animation: mati 3s infinite linear

Sisipkan kode @keyframes nya dibawah kode css yang sudah ada, lalu kode pemanggil animasinya simpan pada css elemen yang akan diberi animasi, jadi kode lengkapnya seperti dibawah ini.

<style type='text/css'>
/*
Owner : http://zhinto.blogspot.com/
 */
#mati {
    width: 80px;
    height: 80px;
    border: 10px solid;
    border-color: #0f0 #111 #0f0 #111;
    margin: 10px auto 10px;
    position: relative;
    background: #fff;
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    /* kode pemanggil animasi */
    animation: mati 3s infinite linear;
    -webkit-animation: mati 3s infinite linear;
    -moz-animation: mati 3s infinite linear;
    -o-animation: mati 3s infinite linear;
    -ms-animation: mati 3s infinite linear
    }

#mati > div {
    width: 50px;
    height: 50px;
    background: #0f0;
    position: absolute;
    left: 15px;
    top: 15px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5)
    }

#mati > div::before {
    position: absolute;
    content: "";
    height: 25px;
    width: 25px;
    /*Menyamakan Warna dengan warna background #loding*/
    background: #fff;
    left: 12.5px;
    top: 12.5px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px
    }

#mati > div::after {
    position: absolute;
    content: "";
    width: 5px;
    /*Menyamakan Warna dengan warna background #loding*/
    background: #fff;
    left: 45%;
    top: 0;
    bottom: 12px
    }

/* kode pembuat animasi */
@keyframes mati {
 from {
    -moz-transform: rotate(-900deg);
    -ms-transform: rotate(-900deg);
    -o-transform: rotate(-900deg);
    -webkit-transform: rotate(-900deg);
    transform: rotate(-900deg)
 }
 to {
    -moz-transform: rotate(900deg);
    -ms-transform: rotate(900deg);
    -o-transform: rotate(900deg);
    -webkit-transform: rotate(900deg);
    transform: rotate(900deg)
 }

}

@-moz-keyframes mati {
 from {
    -moz-transform: rotate(-900deg);
    -ms-transform: rotate(-900deg);
    -o-transform: rotate(-900deg);
    -webkit-transform: rotate(-900deg);
    transform: rotate(-900deg)
 }
 to {
    -moz-transform: rotate(900deg);
    -ms-transform: rotate(900deg);
    -o-transform: rotate(900deg);
    -webkit-transform: rotate(900deg);
    transform: rotate(900deg)
 }
}

@-webkit-keyframes mati {
 from {
    -moz-transform: rotate(-900deg);
    -ms-transform: rotate(-900deg);
    -o-transform: rotate(-900deg);
    -webkit-transform: rotate(-900deg);
    transform: rotate(-900deg)
 }
 to {
    -moz-transform: rotate(900deg);
    -ms-transform: rotate(900deg);
    -o-transform: rotate(900deg);
    -webkit-transform: rotate(900deg);
    transform: rotate(900deg)
 }
}

@-ms-keyframes mati {
 from {
    -moz-transform: rotate(-900deg);
    -ms-transform: rotate(-900deg);
    -o-transform: rotate(-900deg);
    -webkit-transform: rotate(-900deg);
    transform: rotate(-900deg)
 }
 to {
    -moz-transform: rotate(900deg);
    -ms-transform: rotate(900deg);
    -o-transform: rotate(900deg);
    -webkit-transform: rotate(900deg);
    transform: rotate(900deg)
 }
}

@-o-keyframes mati {
 from {
    -moz-transform: rotate(-900deg);
    -ms-transform: rotate(-900deg);
    -o-transform: rotate(-900deg);
    -webkit-transform: rotate(-900deg);
    transform: rotate(-900deg)
 }
 to {
    -moz-transform: rotate(900deg);
    -ms-transform: rotate(900deg);
    -o-transform: rotate(900deg);
    -webkit-transform: rotate(900deg);
    transform: rotate(900deg)
 }
}
</style>

Ntar begini nih jadinya


Hijau Putih Tombol Shutdown Hijau Putih Tombol Shutdown Sinto 5.0 stars based on 35 reviews Sudah banyak tercipta berbagai objek menggunakan css3/css . sebenarnya postingan ini terbit gara-gara aku pengen membuat sebuah logo dengan ...

Related Posts

Next Post
Previous Post