tRikSonic
Tema
  • Original
  • Translate

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 Blood
Kreaspy Blood5/29/2020ReplyBalas 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 vina
vina vina7/06/2020ReplyBalas Komentar ini
https://triksonic.blogspot.com/
Dito
Dito8/03/2020ReplyBalas 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.
Adi Jaya
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" );
}
Dito
Dito8/10/2020
Komentar ini telah dihapus oleh pengarang.
Adi Jaya
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
}
Dito
Dito8/11/2020
Komentar ini telah dihapus oleh pengarang.
Adi Jaya
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");
});
Dito
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 Jaya
Adi Jaya8/12/2020
gak apa apa mas...
Hak mas koq... menghapus nya..
:-D
Megaroid.com
Megaroid.com12/16/2020
Komentar ini telah dihapus oleh pengarang.
Megaroid.com
Megaroid.com1/27/2021
Komentar ini telah dihapus oleh pengarang.
Adi Jaya
Adi Jaya1/29/2021
Maaf gak di jual mas :-D
Megaroid.com
Megaroid.com1/29/2021
Komentar ini telah dihapus oleh pengarang.
Unknown
Unknown5/21/2021ReplyBalas Komentar ini
This is amazing work. Next level css...
Comment Form

Posting Komentar

  1. Untuk menyisipkan sebuah link atau tautan gunakan <i rel="link=//example.com">teks disini</i>
    • Tanpa menggunakan https: dan http:
  2. Untuk menyisipkan sebuah kode yang pendek gunakan <i rel="code">kode disini</i>
  3. Untuk menyisipkan sebuah kode yang panjang gunakan <i rel="pre">kode disini</i>
  4. Untuk menyisipkan sebuah teks Tebal gunakan <strong>teks tebal disini</strong>
  5. Untuk menyisipkan sebuah teks Miring gunakan <em>teks miring disini</em>
  6. Untuk menyisipkan sebuah gambar gunakan <i rel="image">url gambar disini</i>

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

Konversi Kode
Kode yang ingin dikonversi

Loading.....
X
Run
Klik tombol Run, untuk menampilkan hasil editing, atau menyegarkan editor.