tRikSonic
Tema
/ / / / / Doraemon Pure CSS - Belajar CSS
Informasi : saat ini anda mengakses blog ini untuk halaman yang di percepat penggunaannya untuk mobile/handphone (AMP) atau akses mobile dengan kecepatan internet yang rendah, mungkin beberapa fitur diblog ini belum tersedia, silahkan ganti Thema untuk mengaktifkan beberapa fitur lainnya. Terimakasih

Doraemon Pure CSS - Belajar CSS

Terakhir diperbarui : 11 Juni 2019 - 08.33
/ / / / / Doraemon Pure CSS - Belajar CSS

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
}
.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{
    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)
}

.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%
    }
}

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;
    ...
}

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.
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.
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...
Add New Comment
BerandaPostingan Lama