Flat Pure CSS Santa Icon

flat-pure-css-santa-icon.markdown

Flat Pure CSS Santa Icon

Flat Santa icon made by pure CSS

A Pen by Ali Khalilifar on CodePen.

License.

index.html

<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>

script.js

/* 
inspired by http://dribbble.com/shots/1340985-Xmas-Icons
it's scalable, for preview you can add this property to .santa
*-transfrom:scale(2)
*/

style.css

* {
  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;
}