Membuat Objek Bola Tenis Dengan CSS3

 Author : hadinug, 11 April, 2014, Komentar

Jika pada tutorial sebelumnya telah dijelaskan tentang pembuatan 9 bentuk objek bola dengan css, nah kali ini kita akan membahas lebih spesifik tentang membuat objek mirip bola tenis dengan css3.


Caranya bagimana?, nah disini kita akan menggunakan gambar bola tenis, yang kita buat nantinya seolah-olah memiliki efek 3d dengan css tentunya.



bola tenis

Berikut kode CSS dan HTML selengkapnya


<style>   
    .ball {
        display: inline-block;
        width: 100%;
        height: 100%;
        margin: 0;
        border-radius: 50%;
        position: relative;
        background: url(http://hadinug.net/try/ball/images/tennisball.png) no-repeat;
        background-size: 100%;

    }
    .ball:before {
        content: "";
        position: absolute;
        top: 1%;
        left: 5%;
        width: 90%;
        height: 90%;
        border-radius: 50%;
        background: -webkit-gradient(radial, 50% 0px, 0, 50% 0px, 58, color-stop(0%, #ffffff), color-stop(58%, rgba(255, 255, 255, 0)));
        background: -webkit-radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
        background: -moz-radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
        background: -o-radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
        background: radial-gradient(50% 0px, circle cover, #ffffff, rgba(255, 255, 255, 0) 58%);
        -webkit-filter: blur(5px);
        z-index: 2;
    }
    .ball:after {
        content: "";
        position: absolute;
        border-radius: 100%;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: -webkit-gradient(radial, 50% 30%, 0, 50% 30%, 100, color-stop(0%, rgba(245, 237, 48, 0)), color-stop(50%, rgba(200, 190, 20, 0.2)), color-stop(100%, #575300));
        background: -webkit-radial-gradient(50% 30%, circle cover, rgba(245, 237, 48, 0), rgba(200, 190, 20, 0.2) 50%, #575300 100%);
        background: -moz-radial-gradient(50% 30%, circle cover, rgba(245, 237, 48, 0), rgba(200, 190, 20, 0.2) 50%, #575300 100%);
        background: -o-radial-gradient(50% 30%, circle cover, rgba(245, 237, 48, 0), rgba(200, 190, 20, 0.2) 50%, #575300 100%);
        background: radial-gradient(50% 30%, circle cover, rgba(245, 237, 48, 0), rgba(200, 190, 20, 0.2) 50%, #575300 100%);
    }

    .stage {
        width: 300px;
        height: 300px;
        display: inline-block;
        margin: 20px;
        -webkit-perspective: 1200px;
        -moz-perspective: 1200px;
        -ms-perspective: 1200px;
        -o-perspective: 1200px;
        perspective: 1200px;
        -webkit-perspective-origin: 50% 50%;
        -moz-perspective-origin: 50% 50%;
        -ms-perspective-origin: 50% 50%;
        -o-perspective-origin: 50% 50%;
        perspective-origin: 50% 50%;
    }

    body {
        width: 300px;
        margin: 20px auto;
        background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(100, 100, 100, 0.2)), color-stop(40%, rgba(255, 255, 255, 0.5)), color-stop(100%, #ffffff));
        background: -webkit-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background: -moz-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background: -o-linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background: linear-gradient(top, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
        background-repeat: no-repeat;
    }

    @-moz-keyframes bubble-anim {
        0% {
        -moz-transform: scale(1);
        transform: scale(1); }

    20% {
        -moz-transform: scaleY(0.95) scaleX(1.05);
        transform: scaleY(0.95) scaleX(1.05); }

    48% {
        -moz-transform: scaleY(1.1) scaleX(0.9);
        transform: scaleY(1.1) scaleX(0.9); }

    68% {
        -moz-transform: scaleY(0.98) scaleX(1.02);
        transform: scaleY(0.98) scaleX(1.02); }

    80% {
        -moz-transform: scaleY(1.02) scaleX(0.98);
        transform: scaleY(1.02) scaleX(0.98); }

    97%, 100% {
        -moz-transform: scale(1);
        transform: scale(1); } }

    @-webkit-keyframes bubble-anim {
        0% {
        -webkit-transform: scale(1);
        transform: scale(1); }

    20% {
        -webkit-transform: scaleY(0.95) scaleX(1.05);
        transform: scaleY(0.95) scaleX(1.05); }

    48% {
        -webkit-transform: scaleY(1.1) scaleX(0.9);
        transform: scaleY(1.1) scaleX(0.9); }

    68% {
        -webkit-transform: scaleY(0.98) scaleX(1.02);
        transform: scaleY(0.98) scaleX(1.02); }

    80% {
        -webkit-transform: scaleY(1.02) scaleX(0.98);
        transform: scaleY(1.02) scaleX(0.98); }

    97%, 100% {
        -webkit-transform: scale(1);
        transform: scale(1); } }

    @-o-keyframes bubble-anim {
        0% {
        -o-transform: scale(1);
        transform: scale(1); }

    20% {
        -o-transform: scaleY(0.95) scaleX(1.05);
        transform: scaleY(0.95) scaleX(1.05); }

    48% {
        -o-transform: scaleY(1.1) scaleX(0.9);
        transform: scaleY(1.1) scaleX(0.9); }

    68% {
        -o-transform: scaleY(0.98) scaleX(1.02);
        transform: scaleY(0.98) scaleX(1.02); }

    80% {
        -o-transform: scaleY(1.02) scaleX(0.98);
        transform: scaleY(1.02) scaleX(0.98); }

    97%, 100% {
        -o-transform: scale(1);
        transform: scale(1); } }

    @-ms-keyframes bubble-anim {
        0% {
        -ms-transform: scale(1);
        transform: scale(1); }

    20% {
        -ms-transform: scaleY(0.95) scaleX(1.05);
        transform: scaleY(0.95) scaleX(1.05); }

    48% {
        -ms-transform: scaleY(1.1) scaleX(0.9);
        transform: scaleY(1.1) scaleX(0.9); }

    68% {
        -ms-transform: scaleY(0.98) scaleX(1.02);
        transform: scaleY(0.98) scaleX(1.02); }

    80% {
        -ms-transform: scaleY(1.02) scaleX(0.98);
        transform: scaleY(1.02) scaleX(0.98); }

    97%, 100% {
        -ms-transform: scale(1);
        transform: scale(1); } }

    @keyframes bubble-anim {
        0% {
        transform: scale(1); }

    20% {
        transform: scaleY(0.95) scaleX(1.05); }

    48% {
        transform: scaleY(1.1) scaleX(0.9); }

    68% {
        transform: scaleY(0.98) scaleX(1.02); }

    80% {
        transform: scaleY(1.02) scaleX(0.98); }

    97%, 100% {
        transform: scale(1); } }
    </style>
    <section class="stage">
    <figure class="ball">
        <span class="shadow"></span> 
    </figure>
</section>


Lihat demonya disini. Nah menarik bukan?, lihat juga bagaimana membuat globe atau bola dunia dengan css.



 
Bagikan halaman ke sosial media
 
Tags :   css    css3       

Tentang Penulis

writer hadinug
Web Developer di PT. Yafii Solusi Internasional

Link: http://ysi.co.id

   Komentar Anda