Trick CSS Membuat Tomat

Lagi iseng maen-maen sama CSS, Eh ketemu sama si kembar... Si Apel dan si Tomat... Haha... ngawur ni postingan.. Lagi galau ni... hehe.... Bingung nentuin judul postingan ini.. Yang jelas pastinya ni postingan membahas tentang Trick CSS cara membuat tomat. Kalau ada yang nyebut mirip Apel ya silahkan soalnya yang paling penting ini menjadi pembelajaran bagi saya mengenai tips-trick CSS...


Membuat Tomat Dengan CSS
Ni Tomat apa Apel?
Ini dia hasil eksplorasi saya dengan CSS meskipun kurang maksimal tetep aja bkin saya nggak galau... haha... Just kidding.....

<div id="center">
        <div class="fruit">
            <div class="leaf" />
            <div class="branch" /></div>
    </div>
    <div>
        <div class="fruit2">
            <div class="leaf2" />
            <div class="branch2" /></div>
    </div>

#center {
    position: relative;
    margin: 0 auto;
    width: auto;
}
.fruit {
    position: relative;
    width: 400px;
    border-top: 0;
    background: #9E0606;
    background: radial-gradient(ellipse 60% 72% at 45% 50%, #FD6042 40%, #DF3E3E 70%, #C21A1A 87%, #A15252);
    height: 400px;
    margin: 100px auto;
    border-radius: 200px 200px 300px 300px;
    border-width: 1px 6px 12px 2px;
    box-shadow: inset -10px -5px 32px #A15252, inset 2px 2px 8px #A15252;
    box-shadow: inset -10px -5px 32px #864032, inset 2px 2px 8px #A15252;
    -webkit-animation: bounce .3s ease infinite alternate;
}
.fruit2 {
    width: 200px;
    height: 200px;
    border: 2px solid #C8CA9B;
    border-top: 0;
    -webkit-border-radius: 200px 200px 300px 300px;
    border-radius: 200px 200px 300px 300px;
    position: relative;
    bottom:-120px;
    left:350px;
    -webkit-animation: bounce .3s ease infinite alternate;
}
.leaf {
    top:-80px;
    left:20px;
    position: relative;
    width: 70px;
    background: #351;
    background: radial-gradient(ellipse 60% 72% at 45% 50%, #57AF46 40%, #1EB92B 70%, #1EBB3D 87%, #68a152);
    height: 60px;
    margin: 0 auto;
    border-radius: 225px 0px 320px 150px;
    border: solid #106808;
    border-width: 1px 3px 6px 1px;
}
.branch {
    top: 50px;
    left: -39px;
    position: relative;
    width: 70px;
    background: radial-gradient(ellipse 60% 72% at 45% 50%, #0E3607 40%, #17641D 70%, #093612 87%, #1E2C18);
    height: 10px;
    margin: 0 auto;
    border-radius: 0 0 50% 50%;
    border-width: 1px 3px 6px 1px;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}
.leaf2 {
    top:-50px;
    left:20px;
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border-radius: 225px 0px 320px 150px;
    border: 2px solid #C8CA9B;
    border-width: 1px 3px 6px 1px;
}
.branch2 {
    top: 30px;
    left: -20px;
    position: relative;
    width: 30px;
    height: 5px;
    margin: 0 auto;
    border: 2px solid #C8CA9B;
    border-radius: 0 0 50% 50%;
    border-width: 1px 3px 1px 1px;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}
@-webkit-keyframes bounce {
    100% {
        top: -30px;
        box-shadow: 0 1px 0 rgba(136, 136, 136, 0.39), 0 2px 0 rgba(136, 136, 136, 0.39), 0 3px 0 rgba(136, 136, 136, 0.39), 0 4px 0 rgba(136, 136, 136, 0.39), 0 5px 0 rgba(136, 136, 136, 0.39), 0 6px 0 rgba(136, 136, 136, 0.39), 0 7px 0 rgba(136, 136, 136, 0.39), 0 8px 0 rgba(136, 136, 136, 0.39), 0 9px 0 rgba(136, 136, 136, 0.39), 0 30px 30px rgba(0, 0, 0, .3);
    }
}

Blok kemudian tekan tombol Ctrl dan huruf C pada keyboard secara bersamaan untuk copy artikel di atas. Bagi pengguna Google Chrome bisa menyimpan halaman ini dalam bentuk *pdf melalui tombol print/save di atas.! Bagi yang mau repost ulang harap untuk mencantumkan tautan/sumber!..

Jika Anda menyukai , Share melalui social media di atas (satu suka dari anda sangat berarti bagi kami. Tuliskan kritik dan saran anda pada form komentar di bawah! Ketikan email dan klik subcribe untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Info [K-Moe].

Artikel relevan lainnya
Beri Komentar