Inspired by a flier I saw on Facebook for a bar's 8th birthday party
A Pen by Adam Henley on CodePen.
Inspired by a flier I saw on Facebook for a bar's 8th birthday party
A Pen by Adam Henley on CodePen.
#wrap | |
#hat | |
#monocle | |
#moustache | |
#left | |
#right |
@bg:black; @fg:white; | |
body{background-color:@bg;} | |
:after,:before{content:" ";position:absolute; display:block; background-color:@fg} | |
.circle(@d){ width:@d; height:@d; .border-radius(50%);} | |
.border-top-radius(@v){ .border-top-left-radius(@v); .border-top-right-radius(@v);} | |
.border-bottom-radius(@v){.border-bottom-left-radius(@v); .border-bottom-right-radius(@v);} | |
div{ background-color:@fg;} | |
@hat_width:170px; | |
@hat_height:100px; | |
#wrap{width: 300px;height:150px; | |
position:relative; | |
top:10px; right: 0; left:0;margin:auto; background-color:@bg;} | |
div#hat{ | |
.border-top-radius(30% 70%); | |
.border-bottom-radius(5%); | |
width:@hat_width; | |
height:@hat_height; | |
} | |
div#hat:after,div#hat:before{ width:50px; height:18px; .border-radius(50%); top:(@hat_height - 21px);} | |
@brim_twist:20deg; | |
div#hat:before{ left:-38px; .rotate(@brim_twist);} | |
div#hat:after{ left:(@hat_width - 13px); .rotate(-@brim_twist);} | |
#monocle{ | |
border:2px solid @fg; | |
background-color: @bg; | |
.circle(40px); | |
margin-top:25px; | |
margin-left:10px; | |
} | |
#monocle:before{ | |
width:8px; height:80px; | |
border-top: 4px solid @fg; | |
border-left: 2px solid @fg; | |
background-color:transparent; | |
left:0px; top:100% - 4px; | |
} | |
#moustache { | |
position:absolute;display:block; | |
margin-top:22%; | |
background:transparent; | |
width:@hat_width; | |
overflow:show; | |
} | |
#moustache #left, #moustache #right{ | |
position:absolute; | |
width:95px; height:40px; | |
top:0px; | |
} | |
#moustache #right{ | |
border-radius:50% 50% 80% 70%; | |
right:0; | |
.rotate( 10deg); | |
} | |
#moustache #left{ | |
border-radius:70% 50% 50% 80%; | |
left:0; | |
.rotate( -9deg); | |
} | |
#moustache > #right:after, #moustache > #left:after{ | |
display:inline-block; | |
background-color:@bg; | |
height:20px; width:54%; | |
top: -8px; | |
} | |
#moustache > #left:after{ border-radius:1% 50% 60% 50%; .rotate(-25deg); left:8%;} | |
#moustache > #right:after{ border-radius:50% 60% 50% 1%; right:5%; .rotate(25deg);} |