Doraemon Pure CSS - Belajar CSS

Terakhir diperbarui : 11 Juni 2019 - 08.33

Belajar desain sebuah kartun menggunakan html dan css. Pada tutorial ini saya menggunakan kartun doraemon sebagai modelnya.

`HTML`

<div class="doraemon">
    <div class="head">
        <div class="face"></div>
        <div class="eye-left"></div>
        <div class="eye-right"></div>
        <div class="nose"></div>
        <div class="nose-line"></div>
        <div class="mustache">
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </div>
    <div class="mouth"></div>
    <div class="necklace">
        <div class="bell">
            <div></div>
        </div>
    </div>
    <div class="hand-1"></div>
    <div class="hand-2"></div>
    <div class="body"></div>
    <div class="body-out"></div>
    <div class="foot"></div>
</div>

`CSS`

body {
    background: #ccc;
    margin: 0;
    height: 100%;
}
.doraemon {
    background: #b2ebff;
    font-size: 0.3px;
    width: 500em;
    height: 500em;
    border: 1em solid #96a6ad;
    position: relative;
    margin: 24em auto;
    -webkit-box-shadow: -2em -2em 12em 4em #8e9598;
            box-shadow: -2em -2em 12em 4em #8e9598;
    border-radius: 5em;
}
.head{
    position:absolute;
    width:290em;
    height:275em;
    background:#3dcdff;
    left:95em;
    top:40em;
    border-radius:100%;
    border:2em solid #000;
    overflow:hidden;
    z-index:1;
    -webkit-animation:anim-2 2s alternate infinite;
            animation:anim-2 2s alternate infinite
}
.face{
    position:absolute;
    width:240em;
    height:231em;
    background:#fff;
    left:21em;
    top:40em;
    border-radius:52% 48% 49% 51%/37% 42% 58% 63%;
    border:2em solid #000
}
.eye-left{
    position:absolute;
    width:50em;
    height:73em;
    background:#fff;
    left:80em;
    top:25em;
    border-radius:100%;
    border:2em solid #000;
    -webkit-animation:anim-1 2s alternate infinite;
            animation:anim-1 2s alternate infinite
}
.eye-left::before{
    content:"";
    position:absolute;
    width:13em;
    height:23em;
    background:#000;
    left:32em;
    top:30em;
    border-radius:100%;
    z-index:1
}
.eye-left::after{
    content:"";
    position:absolute;
    width:5em;
    height:7em;
    background:#fff;
    left:37em;
    top:40em;
    border-radius:100%;
    z-index:1
}
.eye-right{
    position:absolute;
    width:50em;
    height:73em;
    background:#fff;
    left:160em;
    top:25em;
    border-radius:100%;
    border:2em solid #000;
    -webkit-animation:anim-1 2s alternate infinite;
            animation:anim-1 2s alternate infinite
}
.eye-right::before{
    content:"";
    position:absolute;
    width:13em;
    height:23em;
    background:#000;
    left:10em;
    top:30em;
    border-radius:100%;
    z-index:1
}
.eye-right::after{
    content:"";
    position:absolute;
    width:5em;
    height:7em;
    background:#fff;
    left:13em;
    top:40em;
    border-radius:100%;
    z-index:1
}
.nose{
    position:absolute;
    width:31em;
    height:31em;
    background:#ed1c24;
    left:130em;
    top:89em;
    border-radius:100%;
    border:2em solid #000;
    overflow:hidden;
    z-index:1
}
.nose::before{
    content:"";
    position:absolute;
    width:13em;
    height:13em;
    background:#fff;
    left:4em;
    top:6em;
    border-radius:100%;
    z-index:1
}
.nose-line{
    position:absolute;
    width:25em;
    height:35em;
    border-left:2em solid #000;
    left:142em;
    top:114em;
    border-radius:100%
}
.mustache{
    position:absolute;
    top:104em;
    left:0;
    right:0
}
.mustache .left{
    position:absolute;
    width:75em;
    left:12em;
    top:15em;
    border-top:2em solid #000
}
.mustache .left::before{
    content:"";
    position:absolute;
    width:75em;
    left:0;
    top:-30em;
    border-top:2em solid #000;
    -webkit-transform:rotate(15deg);
        -ms-transform:rotate(15deg);
            transform:rotate(15deg)
}
.mustache .left::after{
    content:"";
    position:absolute;
    width:75em;
    left:0;
    top:25em;
    border-top:2em solid #000;
    -webkit-transform:rotate(-15deg);
        -ms-transform:rotate(-15deg);
            transform:rotate(-15deg)
}
.mustache .right{
    position:absolute;
    width:75em;
    right:12em;
    top:15em;
    border-top:2em solid #000
}
.mustache .right::before{
    content:"";
    position:absolute;
    width:75em;
    left:0;
    top:-30em;
    border-top:2em solid #000;
    -webkit-transform:rotate(-15deg);
        -ms-transform:rotate(-15deg);
            transform:rotate(-15deg)
}
.mustache .right::after{
    content:"";
    position:absolute;
    width:75em;
    left:0;
    top:25em;
    border-top:2em solid #000;
    -webkit-transform:rotate(15deg);
        -ms-transform:rotate(15deg);
            transform:rotate(15deg)
}
.nose::after{
    content:"";
    position:absolute;
    width:26em;
    height:21em;
    background:#bd0c1a;
    left:3em;
    top:12em;
    border-radius:100%
}
.mouth{
    position:absolute;
    width:172em;
    height:94em;
    background:#890a1f;
    left:155em;
    top:181em;
    border:2em solid #000;
    border-radius:53% 47% 50% 50%/31% 28% 72% 69%;
    z-index:2;
    overflow:hidden;
    -webkit-animation:anim-3 3s alternate infinite;
            animation:anim-3 3s alternate infinite
}
.mouth::before{
    content:"";
    position:absolute;
    width:70em;
    height:99em;
    background:#d71721;
    left:26em;
    top:50em;
    border-radius:100% 74% 0 0
}
.mouth::after{
    content:"";
    position:absolute;
    width:70em;
    height:99em;
    background:#d71721;
    left:78em;
    top:50em;
    border-radius:100% 100% 0 0
}
.necklace{
    position:absolute;
    width:92em;
    height:11em;
    background:#be151f;
    left:147.018em;
    top:288.643em;
    border-radius:10em 0 0 31em;
    border-width:2em;
    border-style:solid;
    border-color:#000 transparent #000 #000;
    -webkit-border-image:initial;
         -o-border-image:initial;
            border-image:initial;
    -webkit-transform:rotate(.0137628rad);
        -ms-transform:rotate(.0137628rad);
            transform:rotate(.0137628rad);
    z-index:3
}
.bell{
    position:absolute;
    width:47em;
    height:47em;
    background:#fab03a;
    left:64em;
    top:-3em;
    border:2em solid #000;
    border-radius:100%;
    z-index:1;
    overflow:hidden
}
.bell::before{
    content:"";
    position:absolute;
    width:84em;
    height:65em;
    left:-16em;
    top:10em;
    border-top:8em double #000;
    border-radius:100%;
    -webkit-transform:rotate(-6deg);
        -ms-transform:rotate(-6deg);
            transform:rotate(-6deg)
}
.bell::after{
    content:"";
    position:absolute;
    width:8em;
    height:12em;
    background:#fff;
    left:4em;
    top:25em;
    border-radius:100%;
    -webkit-transform:rotate(-.346544rad);
        -ms-transform:rotate(-.346544rad);
            transform:rotate(-.346544rad)
}
.necklace::after{
    content:"";
    position:absolute;
    width:92em;
    height:11em;
    background:#be151f;
    left:89em;
    top:-2em;
    border-radius:0 10em 31em 0;
    border-width:2em;
    border-style:solid;
    border-color:#000 #000 #000 transparent;
    -webkit-border-image:initial;
         -o-border-image:initial;
            border-image:initial
}
.bell div{
    position:absolute;
    width:12em;
    height:12em;
    background:#be8334;
    left:17em;
    top:20em;
    border-radius:100%;
    border:2em solid #000
}
.bell div::before{
    content:"";
    width:21em;
    height:18em;
    position:absolute;
    border-radius:100%;
    border-right:2em solid #000;
    top:11em;
    left:-14em
}
.hand-1{
    position:absolute;
    width:141.023em;
    height:46.0227em;
    background:#3dcdff;
    left:295em;
    top:266em;
    border-radius:100%;
    -webkit-transform:rotate(-25deg);
        -ms-transform:rotate(-25deg);
            transform:rotate(-25deg);
    border:2em solid #000
}
.hand-1::before{
    content:"";
    position:absolute;
    width:60.0227em;
    height:58.0227em;
    background:#f5f5f5;
    left:95em;
    top:-8.023em;
    border-radius:100%;
    border:2em solid #000
}
.hand-2{
    position:absolute;
    width:141.023em;
    height:51.0227em;
    background:#3dcdff;
    left:69.8482em;
    top:309.138em;
    border-radius:100%;
    -webkit-transform:rotate(-.756809rad);
        -ms-transform:rotate(-.756809rad);
            transform:rotate(-.756809rad);
    border:2em solid #000
}
.hand-2::before{
    content:"";
    position:absolute;
    width:60.0227em;
    height:58.0227em;
    background:#f5f5f5;
    left:-28em;
    top:-8.023em;
    border-radius:100%;
    border:2em solid #000
}
.body{
    position:absolute;
    width:157em;
    height:129em;
    background:#fff;
    left:168em;
    top:290em;
    border:2em solid #000;
    border-radius:39% 49% 62% 56%/47% 47% 79% 75%;
    z-index:2
}
.body::before{
    content:"";
    position:absolute;
    width:120em;
    height:61em;
    background:#fff;
    left:17em;
    top:51em;
    border:2em solid #000;
    border-radius:10% 10% 63% 58%/10% 10% 100% 100%;
    -webkit-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg);
            transform:rotate(-3deg)
}
.body-out{
    position:absolute;
    width:179em;
    height:152em;
    background:#3dcdff;
    left:154em;
    top:291em;
    border:2em solid #000;
    border-radius:15% 15% 43% 43%/25% 25% 11% 11%;
    z-index:1
}
.body-out::before {
    content: "";
    position: absolute;
    width: 17em;
    height: 19em;
    left: 80em;
    top: 134em;
    border-radius: 100%;
    border-top: 2em solid #000;
    border-left: 2em solid #000;
    border-right: 2em solid #000;
    border-bottom: 3em solid transparent;
    background: #b2ebff;
}
.foot::before{
    content:"";
    position:absolute;
    width:107.023em;
    height:50.0227em;
    background:#fff;
    left:132em;
    top:423em;
    border-radius:100%;
    border:2em solid #000
}
.foot::after{
    content:"";
    position:absolute;
    width:111em;
    height:50em;
    background:#fff;
    left:252em;
    top:425em;
    border-radius:100%;
    -webkit-transform:rotate(4deg);
        -ms-transform:rotate(4deg);
            transform:rotate(4deg);
    border:2em solid #000
}
@-webkit-keyframes anim-1{
    0%,25%{
        opacity:1
    }
    35%{
        opacity:0
    }
    50%{
        opacity:1
    }
    100%{
        opacity:1
    }
}
@keyframes anim-1{
    0%,25%{
        opacity:1
    }
    35%{
        opacity:0
    }
    50%{
        opacity:1
    }
    100%{
        opacity:1
    }
}
@-webkit-keyframes anim-2{
    0%{
        -webkit-transform:rotate(-1deg);
                transform:rotate(-1deg)
    }
    50%{
        -webkit-transform:rotate(2deg);
                transform:rotate(2deg)
    }
    100%{
        -webkit-transform:rotate(-1deg);
                transform:rotate(-1deg)
    }
}
@keyframes anim-2{
    0%{
        -webkit-transform:rotate(-1deg);
                transform:rotate(-1deg)
    }
    50%{
        -webkit-transform:rotate(2deg);
                transform:rotate(2deg)
    }
    100%{
        -webkit-transform:rotate(-1deg);
                transform:rotate(-1deg)
    }
}
@-webkit-keyframes anim-3{
    0%{
        border-radius:100%
    }
    50%{
        border-radius:100%
    }
    100%{
        border-radius:53% 47% 50% 50%/31% 28% 72% 69%
    }
}
@keyframes anim-3{
    0%{
        border-radius:100%
    }
    50%{
        border-radius:100%
    }
    100%{
        border-radius:53% 47% 50% 50%/31% 28% 72% 69%
    }
}

Hasil

Untuk melakukan perubahan ukuran, silahkan ganti nilai font-size pada class .doraemon, liat contoh yg saya beri tanda.

.doraemon {
    background: #b2ebff;
    font-size: 0.3px;
    ...
}

Berikut contoh perubahan ukuran dengan bantuan javaScript:

Demo :

0.3px

CODEPEN DEMO

Selamat berkreasi.

15 komentar

Kreaspy Blood5/29/2020Balas Komentar ini

Mau nanya mas misal ini kan menghasilkan post :

Kalau untuk kode yang tampil di post label misal label 'Majalah' itu kodenya bagaimana ya mas ? (Seperti kode diatas)

Mohon jawabannya.

vina vina7/06/2020Balas Komentar ini

https://triksonic.blogspot.com/

Dito8/03/2020Balas Komentar ini

Halo, saya membaca artikel ini https://triksonic.blogspot.com/2016/11/cara-mengamankan-credit-link-dengan.html namun tidak bisa memberikan komentar.

Saya ingin tanya, gimana jika yang ingin diamankan adalah textnya, bukan cuma linknya? Karena jika link aja pas textnya dihapus maka tidak ada lagi credit link yg terlihat.

7 Reply

Adi Jaya8/05/2020

coba pakai
element.textContent; atau element.innerText; atau element.innerHTML; mas.

atau jika pakai jquery
$( element ).html(); atau $( element ).text();

contoh sederhana;

var target = document.getElementById( "demo" );
//ternary condition ? true : false
var text = target.textContent ? target.textContent : target.innerText;

if( text == "hello" ){
alert( "yes" );
} else {
alert( "no" );
}

Dito8/10/2020

Komentar ini telah dihapus oleh pengarang.

Adi Jaya8/11/2020

Tinggal di cari/hitung element ID nya ada atau gak...
contoh

var element = document.getElementById('credit');
var text = element.textContent ? element.textContent : element.innerText;

if( element && text == "hello" ){
//true
} else {
//false
}

atau

if (document.getElementById('credit')) {
var element = document.getElementById('credit');
var text = element.textContent ? element.textContent : element.innerText;
if (text == "hello") {
//text benar
} else {
//text salah
}
} else {
//element ID Tidak ada
}

Dito8/11/2020

Komentar ini telah dihapus oleh pengarang.

Adi Jaya8/11/2020

karena jquery adalah kumpulan fungsi dari javascript murni. berarti jawabannya sudah pasti bisa..
yang perlu dilakukan adalah membuat fungsi fungsi yang diinginkan agar bisa digunakan berulang-ulang.

misal

function documentReady(func) {
if (document.readyState != "loading") {
func();
} else if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", func);
} else {
document.attachEvent("onreadystatechange", function() {
if (document.readyState == "complete") {
func();
}
});
}
}

//demo
function redirect() {
alert("redirect");
}

function check(selector) {
var ele = document.querySelectorAll(selector);
if (ele.length === 0) {
redirect();
}
}

documentReady(function() {
check(".attribution");
});

Dito8/11/2020

Waduh, makin berat nih kodenya. Ok mas, saya pantengin dulu kode-kode yang mas kasih. Oia, mohon maaf komentar saya hapus dua kali, soalnya gak sengaja link blog saya kebawa. Gak enak mas..

Adi Jaya8/12/2020

gak apa apa mas...
Hak mas koq... menghapus nya..
:-D

Megaroid.com12/16/2020

Komentar ini telah dihapus oleh pengarang.

Megaroid.com1/27/2021

Komentar ini telah dihapus oleh pengarang.

2 Reply

Adi Jaya1/29/2021

Maaf gak di jual mas :-D

Megaroid.com1/29/2021

Komentar ini telah dihapus oleh pengarang.

Unknown5/21/2021Balas Komentar ini

This is amazing work. Next level css...

Posting Komentar

Untuk menyisipkan sebuah link atau tautan gunakan teks disini
- Tanpa menggunakan https: dan http:
Untuk menyisipkan sebuah kode yang pendek gunakan kode disini
Untuk menyisipkan sebuah kode yang panjang gunakan kode disini
Untuk menyisipkan sebuah teks Tebal gunakan teks tebal disini
Untuk menyisipkan sebuah teks Miring gunakan teks miring disini
Untuk menyisipkan sebuah gambar gunakan url gambar disini

Ketentuan Komentar

Pengguna yang dapat berkomentar adalah pengguna yang memiliki akun google
Guna mengurangi komentar yang bersifat spam, maka akan diberlakukan langkah verifikasi kata.
Pengguna bertanggung jawab atas komentar yang dikirim
Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim
Dengan mengirimkan sebuah komentar, maka pengguna dianggap menyetujui semua ketentuan diatas

Poin ketentuan diatas tidak bersifat tetap, dan dapat berubah kapan saja

Judul	`Doraemon Pure CSS - Belajar CSS`
Label	`CSS,CSS3,Tutorial,Tutorial CSS`
Diposting pada	`10 Juni 2019 - 09:15`
Diperbaharui pada	`11 Juni 2019 - 08:33`
Komentar	15 komentar

Doraemon Pure CSS - Belajar CSS

`HTML`

`CSS`

Hasil

15 komentar

Posting Komentar

Ketentuan Komentar

Post Info

Populer Post

Arsip Blog

Label