<div class="wrap">
<div class="capsule">
<div class="capsule__bottom">
<div class="panel"></div>
<div class="light"></div>
<div class="light2"></div>
</div>
<div class="capsule__top">
<div class="panel"></div>
</div>
<div class="capsule__shadow"></div>
<div class="left-circle"></div>
<div class="right-circle"></div>
</div>
<div class="yoda-wrap">
<div class="hair"></div>
<div class="yoda">
<div class="brow"></div>
<div class="eye-left"></div>
<div class="eye-right"></div>
</div>
<div class="ear-left">
<div class="line"></div>
</div>
<div class="ear-right">
<div class="line"></div>
</div>
<div class="pled1"></div>
<div class="pled2"></div>
</div>
<div class="shadow"></div>
<div class="blick1"></div>
<div class="blick2"></div>
<div class="blick3"></div>
<div class="blick4"></div>
</div>:root {
--bg: #E2FFED;
--yoda: #39E69E;
--yoda-light: #35DD5F;
--yoda-shadow: #25CE87;
--caps-light: #D5E2DE;
--light: #E9EDEC;
--caps-dark: #7F8382;
--caps-shadow: #6A6A6A;
--caps-gray: #A6AFAC;
--pled: #A4A9A8;
--blick: #3DE7A4;
--shadow: #45576B;
--border: #1B385E;
--eye: #1E385D;
}
body {
margin: 0;
background: var(--bg);
}
.wrap {
width: 600px;
height: 500px;
margin: 50px auto;
position: relative;
.shadow {
width: 16rem;
height: 2rem;
border-radius: 100%;
background: var(--shadow);
position: absolute;
top: 25rem;
left: 11rem;
z-index: 1;
}
.blick1 {
width: 20px;
height: 30px;
position: absolute;
top: 9rem;
left: 7rem;
filter: drop-shadow(22rem -15px 0 var(--blick)) drop-shadow(21rem 13rem 0 var(--blick));
&::before {
content: '';
width: 4px;
height: 29px;
border-radius: 5px;
background: var(--blick);
position: absolute;
top: 0px;
left: 8px;
}
&::after {
content: '';
width: 20px;
height: 4px;
border-radius: 5px;
background: var(--blick);
position: absolute;
top: 12px;
left: 0px;
}
}
.blick2 {
width: 15px;
height: 20px;
position: absolute;
top: 8rem;
left: 8rem;
filter: drop-shadow(22rem -15px 0 var(--blick)) drop-shadow(1rem 15rem 0 var(--blick));
&::before {
content: '';
width: 2px;
height: 15px;
border-radius: 5px;
background: var(--blick);
position: absolute;
top: 5px;
left: 6px;
}
&::after {
content: '';
width: 10px;
height: 2px;
border-radius: 5px;
background: var(--blick);
position: absolute;
top: 12px;
left: 2px;
}
}
.blick3 {
width: 10px;
height: 10px;
background: transparent;
border: 2px solid var(--blick);
border-radius: 50%;
position: absolute;
top: 7rem;
left: 28.5rem;
filter: drop-shadow(-22.5rem 6rem 0 var(--blick)) drop-shadow(2rem 12.5rem 0 var(--blick));
}
.blick4 {
width: 7px;
height: 7px;
background: var(--blick);
border-radius: 50%;
box-shadow: -5rem -2rem 0 -1px var(--blick), -27rem 4rem 0 -1px var(--blick), -2rem 14rem 0 0 var(--blick), -24rem 11rem 0 0 var(--blick), -21rem 17rem 0 -1px var(--blick);
position: absolute;
top: 7rem;
left: 31.5rem;
}
}
.capsule {
&__bottom {
width: 20rem;
height: 20.5rem;
background: linear-gradient(to bottom, var(--caps-dark) 0%,var(--caps-dark) 50%,var(--caps-gray) 51%,var(--caps-gray) 100%);
border-radius: 100%;
border: 5px solid var(--border);
box-shadow: 0 -10px 0 0px var(--caps-light), 0 -12px 0 2px var(--border);
position: absolute;
top: 5rem;
left: 8.7rem;
z-index: 2;
.panel {
width: 19.5rem;
height: 3rem;
background: var(--caps-light);
border: 5px solid var(--border);
border-radius: 0 0 40% 40%;
box-shadow: inset 0 5px 0 0 var(--caps-dark), inset 0 9px 0 0 var(--border), -2px 9px 0 -3px var(--caps-gray);
position: absolute;
top: 9.4rem;
left: 0;
z-index: 1;
&::before {
content: '';
width: 5rem;
height: 1.3rem;
background: var(--caps-light);
border: 4px solid var(--border);
border-radius: 4px;
position: absolute;
top: 11px;
left: 6.8rem;
}
&::after {
content: '';
width: 12px;
height: 12px;
background: var(--blick);
border: 3px solid var(--border);
box-shadow: 25px 0 0 -3px var(--blick), 25px 0 0 0 var(--border), 50px 0 0 -3px var(--blick), 50px 0 0 0 var(--border);
border-radius: 4px;
position: absolute;
top: 16px;
left: 7.5rem;
}
}
.light {
background: var(--light);
height: 5rem;
width: 11rem;
position: absolute;
top: 207px;
left: 160px;
border-radius: 100% 100% 0 0;
transform: rotate(131deg);
&::before {
content: '';
height: 5rem;
width: 4rem;
border-radius: 0 0 100% 100%;
background: var(--light);
position: absolute;
top: 55px;
left: 112px;
}
&::after {
content: '';
height: 5rem;
width: 3rem;
background: var(--light);
transform: rotate(135deg);
position: absolute;
top: 42px;
left: 90px;
}
}
.light2 {
background: var(--light);
height: 4.5rem;
width: 4.5rem;
position: absolute;
top: 218px;
left: 112px;
border-radius: 100%;
&::before {
content: '';
background: var(--light);
height: 3rem;
transform: rotate(27deg);
width: 7rem;
position: absolute;
top: 42px;
left: -1px;
border-radius: 100%;
}
&::after {
content: '';
background: transparent;
height: 5rem;
width: 11rem;
border-radius: 0 0 50% 50%;
box-shadow: 0px 12px 0 -8px white;
transform: rotate(-31deg);
position: absolute;
top: 3px;
left: 13px;
}
}
}
&__top {
width: 16rem;
height: 5.5rem;
background: var(--shadow);
border: 5px solid var(--border);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
box-shadow: 0 -9px 0 0 var(--caps-dark), 0 -9px 0 4px var(--border);
position: absolute;
top: 8.9rem;
left: 10.7rem;
z-index: 3;
&::before {
content: '';
width: 2.5rem;
height: 8px;
background: var(--caps-light);
border: 3px solid var(--border);
border-top: 0;
border-radius: 4px;
transform: rotate(-30deg);
position: absolute;
top: -2.95rem;
left: 1.7rem;
}
&::after {
content: '';
width: 2.5rem;
height: 8px;
background: var(--caps-light);
border: 3px solid var(--border);
border-top: 0;
border-radius: 4px;
transform: rotate(28deg);
position: absolute;
top: -3.1rem;
left: 11.2rem;
}
}
&__shadow {
&::before {
content: '';
width: 2.6rem;
height: 3.7rem;
background: var(--caps-shadow);
transform: rotate(-30deg);
position: absolute;
top: 6.5rem;
left: 13.9rem;
z-index: 2;
}
&::after {
content: '';
width: 2.6rem;
height: 3.7rem;
background: var(--caps-shadow);
transform: rotate(28deg);
position: absolute;
top: 6.5rem;
left: 21.3rem;
z-index: 2;
}
}
.left-circle {
width: 18px;
height: 25px;
background: var(--blick);
border: 8px solid var(--border);
box-shadow: 0 0 0 12px var(--caps-light), 0 0 0 20px var(--border), 12px 0 0 17px var(--caps-dark), 21px 0 0 20px var(--border);
border-radius: 50%;
transform: rotateY(70deg);
position: absolute;
top: 13.5rem;
left: 7.6rem;
z-index: 4;
&::before {
content: '';
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 0;
border-bottom: 12px solid var(--caps-dark);
filter: drop-shadow(-5px -1px 0 var(--border));
transform: rotate(13deg);
position: absolute;
top: -34px;
left: 11px;
}
}
.right-circle {
width: 18px;
height: 25px;
background: var(--blick);
border: 8px solid var(--border);
box-shadow: 0 0 0 12px var(--caps-light), 0 0 0 20px var(--border), -12px 0 0 17px var(--caps-dark), -21px 0 0 20px var(--border);
border-radius: 50%;
transform: rotateY(70deg);
position: absolute;
top: 13.5rem;
left: 28.3rem;
z-index: 4;
&::before {
content: '';
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 0;
border-bottom: 15px solid var(--caps-dark);
filter: drop-shadow(-5px -1px 0 var(--border));
transform: rotate(59deg);
position: absolute;
top: -37px;
left: -26px;
}
}
}
.yoda-wrap {
width: 16rem;
height: 6rem;
position: absolute;
top: 9rem;
left: 11rem;
z-index: 4;
.hair {
width: 25px;
height: 20px;
position: absolute;
top: 0.5rem;
left: 8rem;
&::before,
&::after {
content: '';
width: 4px;
height: 15px;
background: var(--border);
transform: rotate(-15deg);
border-radius: 5px;
position: absolute;
top: 5px;
left: 4px;
}
&::after {
transform: rotate(15deg);
left: 9px;
top: 4px;
}
}
.yoda {
width: 6.5rem;
height: 3rem;
border-radius: 20px 20px 0 0;
background: var(--yoda);
box-shadow: inset -4px 4px 0 0 var(--yoda-light);
filter: drop-shadow(0px -4px 0 var(--border)) drop-shadow(4px 1px 0 var(--border)) drop-shadow(-4px 1px 0 var(--border));
position: absolute;
top: 29px;
left: 75px;
&::before {
content: '';
width: 4rem;
height: 2rem;
border-radius: 50%;
background: var(--yoda);
box-shadow: inset 0 7px 0 -4px var(--yoda-light);
position: absolute;
top: -6px;
left: 19px;
}
&::after {
content: '';
width: 2rem;
height: 2rem;
border-radius: 50%;
background: var(--yoda);
box-shadow: 80px 0 0 0 var(--yoda), inset 6px -6px 0 0 var(--yoda-light);
position: absolute;
top: 18px;
left: -4px;
}
.brow {
filter: drop-shadow(0 -4px 0 var(--yoda-shadow));
&::before,
&::after {
content: '';
width: 25px;
height: 10px;
background: var(--yoda);
transform: rotate(15deg);
border-radius: 50%;
position: absolute;
top: 8px;
left: 30px;
}
&::after {
transform: rotate(-15deg);
left: 50px;
}
}
.eye-left,
.eye-right {
width: 27px;
height: 20px;
background: var(--eye);
border-radius: 100% 100% 60% 60%;
box-shadow: 0px -3px 0 4px var(--yoda-shadow);
position: absolute;
top: 19px;
left: 11px;
z-index: 1;
&::before {
content: '';
width: 4.5px;
height: 4.5px;
border-radius: 50%;
background: white;
box-shadow: -5px 3px 0 -1.5px white;
position: absolute;
top: 5px;
left: 6px;
}
}
.eye-right {
left: 65px;
&::after {
content: '';
width: 15px;
height: 4px;
border-radius: 10px;
background: var(--border);
position: absolute;
top: 16px;
left: -21px;
}
}
.eye-left::after {
content: '';
width: 5px;
height: 14px;
border-radius: 10px;
background: var(--yoda-light);
position: absolute;
top: -3px;
left: 37px;
}
}
.ear-left {
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 100px solid var(--border);
border-bottom: 25px solid transparent;
transform: rotate(-9deg);
position: absolute;
top: 50px;
left: -15px;
z-index: -1;
&::before {
content: '';
width: 0;
height: 0;
border-top: 0 solid transparent;
border-right: 80px solid var(--yoda);
border-bottom: 15px solid transparent;
transform: rotate(-3deg);
position: absolute;
top: 1px;
left: 21px;
}
&::after {
content: '';
width: 90px;
height: 12px;
background: var(--border);
border-radius: 35%;
transform: rotate(20deg);
position: absolute;
top: 8px;
left: 0;
}
.line {
width: 60px;
height: 20px;
background: var(--border);
border-radius: 50%;
transform: rotate(-2deg);
position: absolute;
top: 7px;
left: 50px;
&::before {
content: '';
width: 10px;
height: 8px;
background: var(--yoda-shadow);
border-top-left-radius: 5px;
transform: rotate(-2deg);
position: absolute;
top: -8px;
left: 29px;
}
}
}
.ear-right {
width: 0;
height: 0;
border-top: 6px solid transparent;
border-right: 100px solid var(--border);
border-bottom: 25px solid transparent;
transform: rotate(10deg) rotateY(180deg);
position: absolute;
top: 50px;
left: 165px;
z-index: -1;
&::before {
content: '';
width: 0;
height: 0;
border-top: 0 solid transparent;
border-right: 80px solid var(--yoda);
border-bottom: 15px solid transparent;
transform: rotate(-3deg);
position: absolute;
top: 1px;
left: 21px;
}
&::after {
content: '';
width: 90px;
height: 12px;
background: var(--border);
border-radius: 35%;
transform: rotate(20deg);
position: absolute;
top: 8px;
left: 0;
}
.line {
width: 60px;
height: 20px;
background: var(--border);
border-radius: 50%;
transform: rotate(-2deg);
position: absolute;
top: 7px;
left: 50px;
&::before {
content: '';
width: 10px;
height: 8px;
background: var(--yoda-shadow);
border-top-left-radius: 5px;
transform: rotate(-2deg);
position: absolute;
top: -8px;
left: 29px;
}
}
}
.pled1 {
width: 8rem;
height: 15px;
background: var(--caps-dark);
transform: skewX(-60deg);
border-radius: 35% 40% 0 0;
box-shadow: inset 0 4px 0 0 var( --pled), inset 15px 0 0 0 var(--caps-shadow), -7px -2px 0 2px var(--border), 2px -1px 0 2px var(--caps-shadow);
position: absolute;
top: 76px;
left: 25px;
z-index: 4;
}
.pled2 {
width: 6rem;
height: 22px;
background: var(--caps-dark);
border-radius: 100% 20% 0 0 / 100% 100% 0 0;
box-shadow: inset -4px 3px 0 0 var(--pled), inset -12px 5px 0 0 var(--caps-shadow), 4px -2px 0 2px var(--border);
position: absolute;
top: 69px;
left: 130px;
z-index: 3;
}
}// picture by Lauren Stanley https://dribbble.com/shots/8562786-Love-me-you-must
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.