Super dev hero CSS draw!
A Pen by Vitor Maverick on CodePen.
Super dev hero CSS draw!
A Pen by Vitor Maverick on CodePen.
<html> | |
<div class="draw"> | |
<div class="face"> | |
<div class="hair top"></div> | |
<div class="hair left"></div> | |
<div class="hair right"></div> | |
<div class="eyes"></div> | |
<div class="eyebrow"></div> | |
<div class="eyebrow right"></div> | |
<div class="nose"></div> | |
<div class="mouth"></div> | |
<div class="beard"></div> | |
</div> | |
</div> | |
<div class="t-shirt"></div> | |
</html> |
@hair: #333; | |
@skin: #714137; | |
@skindark: #5e372e; | |
@white: #fff; | |
@gray: #eee; | |
@red: #f34363; | |
@yellow: #fff392; | |
@blue: #001a2a; | |
html { | |
text-align: center; | |
background: @gray; | |
} | |
.draw { | |
z-index: 1000; | |
margin: 8em auto; | |
display: inline-block; | |
overflow: hidden; | |
max-height: 9em; | |
border-radius: 2em 1em 3em 3em; | |
padding: 1.5em 1em 0em 1em; | |
background: @white; | |
transform: scale(2.7); | |
} | |
.face { | |
background: @skin; | |
width: 4em; | |
height: 5.8em; | |
border-radius: 1em 1em 2em 2em; | |
position: relative; | |
z-index: 9; | |
} | |
.hair { | |
background: @hair; | |
border-radius: 3em; | |
position: absolute; | |
left: 0.3em; | |
&.top { | |
width: 2.2em; | |
height: 2em; | |
z-index: 10; | |
top: -0.4em; | |
&:before, | |
&:after { | |
content: ""; | |
background: @hair; | |
border-radius: 3em; | |
position: absolute; | |
width: 3.4em; | |
height: 3em; | |
} | |
&:before { | |
font-size: 0.4em; | |
left: -1.8em; | |
top: 1.6em; | |
} | |
&:after { | |
font-size: 1em; | |
right: -2.2em; | |
top: -0.4em; | |
border-radius: 2.8em 1.2em 3em 3em; | |
} | |
} | |
&.left, | |
&.right { | |
background: @hair; | |
z-index: -9; | |
top: 1em; | |
left: -0.4em; | |
width: 0.8em; | |
height: 2.2em; | |
overflow: hidden; | |
border-radius: 0em 3em 3em 0.5em; | |
} | |
&.right { | |
left: auto; | |
right: -0.4em; | |
transform: scaleX(-1); | |
} | |
} | |
.eyes { | |
z-index: 97; | |
&:before, | |
&:after { | |
font-size: 0.6em; | |
position: absolute; | |
top: 4.6em; | |
left: 1.2em; | |
width: 1.2em; | |
height: 0.5em; | |
border-radius: 1em; | |
background: @hair; | |
content: ""; | |
border-color: @skindark; | |
} | |
&:after { | |
left: auto; | |
right: 1.2em; | |
} | |
} | |
.eyebrow { | |
z-index: 98; | |
&:before, | |
&:after { | |
content: ""; | |
border-color: @hair; | |
background: @hair; | |
position: absolute; | |
top: 2.5em; | |
left: 0.5em; | |
width: 1em; | |
height: 0.1em; | |
margin: auto; | |
border-radius: 1em 0em 0.2em 0.2em; | |
} | |
&:after { | |
left: auto; | |
right: 0.5em; | |
} | |
&.right { | |
&:before, | |
&:after { | |
top: 2.55em; | |
right: auto; | |
left: 1.6em; | |
width: 0.1em; | |
height: 0.1em; | |
background: @hair; | |
border-color: @hair; | |
border-radius: 1em; | |
} | |
&:after { | |
width: 0.07em; | |
height: 0.07em; | |
top: 2.6em; | |
left: 1.8em; | |
} | |
} | |
} | |
.nose { | |
z-index: 98; | |
&:before, | |
&:after { | |
content: ""; | |
border-color: @skindark; | |
background: @skindark; | |
position: absolute; | |
top: 3em; | |
right: 2.1em; | |
width: 0.2em; | |
height: 1em; | |
margin: auto; | |
border-radius: 1em 0em 0.2em 0.2em; | |
} | |
&:after { | |
width: 0.4em; | |
height: 0.1em; | |
border-radius: 0em 0.1em 0.05em 0.1em; | |
top: 3.9em; | |
right: 1.8em; | |
} | |
} | |
.mouth { | |
background: @hair; | |
border-top: 0.3em solid @hair; | |
position: relative; | |
top: 4.1em; | |
width: 2em; | |
height: 0.5em; | |
margin: 0 auto; | |
border-radius: 0.2em 0.2em 0.7em 0.7em; | |
overflow: hidden; | |
transform: rotate(-2deg); | |
&:before { | |
z-index: 97; | |
position: absolute; | |
width: 1.6em; | |
height: 2em; | |
top: 0.05em; | |
left: 0.5em; | |
right: auto; | |
background: @red; | |
border-radius: 1em; | |
content: ""; | |
} | |
&:after { | |
z-index: 98; | |
position: absolute; | |
width: 2em; | |
height: 0.5em; | |
top: -0.4em; | |
left: 0em; | |
right: auto; | |
background: @white; | |
border-radius: 0em 0em 0.3em 0.3em; | |
content: ""; | |
} | |
} | |
.beard { | |
z-index: 99; | |
position: absolute; | |
bottom: 0.5em; | |
left: 2em; | |
height: 0.2em; | |
width: 0.2em; | |
background: @hair; | |
} | |
.t-shirt { | |
position: relative; | |
z-index: -99; | |
height: 6em; | |
width: 15em; | |
margin: -3em auto auto auto; | |
background: @white; | |
border-top-left-radius: 3em; | |
border-top-right-radius: 3em; | |
overflow: hidden; | |
&:after { | |
position: absolute; | |
width: 0.5em; | |
height: 4.5em; | |
top: auto; | |
left: 7em; | |
background: @red; | |
border-radius: 1em; | |
content: ""; | |
} | |
&:before { | |
position: absolute; | |
width: 0.5em; | |
height: 4.8em; | |
top: 0.3em; | |
left: 8em; | |
background: @red; | |
border-radius: 1em; | |
content: ""; | |
} | |
} |