Flat Santa icon made by pure CSS
A Pen by Ali Khalilifar on CodePen.
Flat Santa icon made by pure CSS
A Pen by Ali Khalilifar on CodePen.
<div class="santa"> | |
<div class="circles"></div> | |
<div class="snow"></div> | |
<div class="hat"> | |
<div class="hat-end"></div> | |
</div> | |
<div class="face"> | |
<div class="eyes"></div> | |
<div class="mouth"></div> | |
</div> | |
<div class="dirty-overflow"> | |
<div class="body"></div> | |
</div> | |
</div> |
/* | |
inspired by http://dribbble.com/shots/1340985-Xmas-Icons | |
it's scalable, for preview you can add this property to .santa | |
*-transfrom:scale(2) | |
*/ |
* { | |
box-sizing: border-box; | |
margin:0; | |
padding:0; | |
} | |
body,html { | |
background:#2c4051; | |
height:100%; | |
} | |
.santa { | |
background:#3ac6f4; | |
width:120px; | |
height:120px; | |
border-radius:50%; | |
position:relative; | |
top:50%; | |
left:0;right:0;margin:0 auto; | |
bottom:0; | |
margin-top:-60px; | |
} | |
.santa .snow { | |
width: 2px; | |
height: 2px; | |
background: white; | |
border-radius: 50%; | |
position: absolute; | |
left: 18px; | |
top: 44px; | |
} | |
.santa .snow:after { | |
width: 6px; | |
height: 6px; | |
content: ""; | |
display: inline-block; | |
background: white; | |
border-radius: 50%; | |
position: absolute; | |
top: -14px; | |
left: 0px; | |
} | |
.santa .snow:before { | |
width: 4px; | |
height: 4px; | |
content: ""; | |
display: inline-block; | |
background: white; | |
border-radius: 50%; | |
position: absolute; | |
bottom: -12px; | |
left: -11px; | |
} | |
.santa .hat { | |
width: 64px; | |
height: 31px; | |
border-radius: 200px 200px 0 0; | |
background: #ef4753; | |
margin: 0 auto; | |
top: -11px; | |
position: relative; | |
left: 5px; | |
z-index:20; | |
} | |
.santa .hat:after { | |
width: 60px; | |
height: 15px; | |
border-radius: 20px; | |
content: ""; | |
display: block; | |
background: white; | |
position: relative; | |
top: 22px; | |
left: -3px; | |
} | |
.santa .face { | |
width: 54px; | |
height: 57px; | |
background: white; | |
border-radius: 0px 0px 50px 50px; | |
margin: 0 auto; | |
position: relative; | |
z-index: 20; | |
top: -6px; | |
} | |
.santa .face .eyes { | |
background:#f1ddd5; | |
width:45px; | |
height:15px; | |
margin:0 auto; | |
position:relative; | |
left:-1px; | |
text-align: center; | |
top:4px; | |
padding-top: 0px; | |
} | |
.santa .face .eyes:after, righteye { | |
width: 8px; | |
height: 6px; | |
background: transparent; | |
box-shadow: 0px -2px #793623; | |
content: ""; | |
display:inline-block; | |
margin:0 auto; | |
border-radius: 50%; | |
} | |
.santa .face .eyes:before, lefteye { | |
width: 8px; | |
height: 6px; | |
background: transparent; | |
box-shadow: 0px -2px #793623; | |
content: ""; | |
display:inline-block; | |
margin:0 auto; | |
border-radius: 50%; | |
margin-right:5px; | |
} | |
.santa .mouth { | |
background:#a31f2b; | |
border-radius:50%; | |
width:6px; | |
height:6px; | |
position:absolute; | |
bottom:20px; | |
right:17px; | |
} | |
.santa .body { | |
width: 93px; | |
height: 84px; | |
background: #ef4753; | |
border-radius: 90px 90px 0px 0px; | |
position: absolute; | |
bottom: 0; | |
right: 0; | |
left: 0; | |
margin: 0 auto; | |
text-align:center; | |
z-index:10; | |
} | |
.santa .body:after { | |
width: 5px; | |
height: 5px; | |
background: white; | |
border-radius: 50%; | |
display: inline-block; | |
position: absolute; | |
top: 68px; | |
z-index: 50; | |
content: ""; | |
left: 0; | |
right: 0; | |
margin: 0 auto; | |
} | |
.santa .body:before { | |
width: 5px; | |
height: 5px; | |
background: white; | |
border-radius: 50%; | |
display: inline-block; | |
position: absolute; | |
top: 55px; | |
z-index: 50; | |
content: ""; | |
left: 0; | |
right: 0; | |
margin: 0 auto; | |
} | |
.santa .hat .hat-end { | |
width: 13px; | |
height: 32px; | |
content: ""; | |
background: #ef4753; | |
display: inline-block; | |
position: absolute; | |
right: 0px; | |
top: 15px; | |
border-radius: 0px 11px 0px 0px; | |
} | |
.santa .hat .hat-end:after { | |
width: 15px; | |
height: 15px; | |
border-radius: 50%; | |
background: white; | |
content: ""; | |
display: inline-block; | |
top: 30px; | |
position: absolute; | |
left: 0px; | |
z-index: 11; | |
} | |
.circles { | |
background: #a31f2b; | |
height: 60px; | |
width: 60px; | |
border-radius: 50%; | |
z-index: 9; | |
position: absolute; | |
right: -6px; | |
top: 12px; | |
} | |
.circles:after { | |
background:white; | |
width:40px; | |
height:40px; | |
right:0; | |
top:50px; | |
content:""; | |
border-radius:50%; | |
} | |
.dirty-overflow { | |
overflow: hidden; | |
width: 120px; | |
height: 76px; | |
border-radius: 0px 0px 105px 105px; | |
position: absolute; | |
left: 0; | |
bottom: 0; | |
} |