Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flat Pure CSS Santa Icon
<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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.