This is to wish everyone Merry Christmas and Happy Holidays. This is done using Pure CSS
A Pen by Narendra N Shetty on CodePen.
<div class="main clearfix"> | |
<div class="santa"> | |
<div class="cap"></div> | |
<div class="face"> | |
<div class="eyes"> | |
<div class="left"> | |
<span></span> | |
</div> | |
<div class="right"> | |
<span></span> | |
</div> | |
</div> | |
<div class="mouth"> | |
<div class="nose"></div> | |
</div> | |
</div> | |
<div class="body"> | |
<div class="left-hand"></div> | |
<div class="right-hand"></div> | |
<div class="belt"> | |
<div class="buckle"></div> | |
</div> | |
<div class="legs"> | |
</div> | |
</div> | |
</div> | |
<div class="gift-holder"> | |
<div class="gift"> | |
<div class="ribbon"></div> | |
</div> | |
<div class="gift purple"> | |
<div class="ribbon"></div> | |
</div> | |
<div class="gift orange"> | |
<div class="ribbon"></div> | |
</div> | |
</div> | |
</div> | |
<p class="text">Merry Christmas</p> |
This is to wish everyone Merry Christmas and Happy Holidays. This is done using Pure CSS
A Pen by Narendra N Shetty on CodePen.
.clearfix:after { | |
visibility: hidden; | |
display: block; | |
font-size: 0; | |
content: " "; | |
clear: both; | |
height: 0; | |
} | |
.clearfix { display: inline-block; } | |
/* start commented backslash hack \*/ | |
* html .clearfix { height: 1%; } | |
.clearfix { display: block; } | |
/* close commented backslash hack */ | |
html, body { | |
height: 100%; | |
width: 100%; | |
} | |
body { | |
background: #FFF1C8; | |
&:after { | |
display: block; | |
background: #E74700; | |
height: 20%; | |
} | |
} | |
.main { | |
text-align: center; | |
width: 850px; | |
margin: 0 auto; | |
} | |
.santa { | |
float: right; | |
margin-right: 180px; | |
} | |
.face { | |
overflow: hidden; | |
background: #F1E6D9; | |
width: 200px; | |
height: 200px; | |
border-radius: 200px; | |
position: relative; | |
text-align: center; | |
z-index: 1; | |
.mouth { | |
position: absolute; | |
width: 200px; | |
height: 100px; | |
background: #fff; | |
left: 0; | |
bottom: 0; | |
border-radius: 0 0 200px 200px; | |
.nose { | |
background: #F59699; | |
width: 16px; | |
height: 16px; | |
border-radius: 16px; | |
margin: auto; | |
left: 0; | |
right: 0; | |
top: -8px; | |
position: absolute; | |
} | |
&:before, &:after { | |
content: ''; | |
display: inline-block; | |
width: 70px; | |
height: 36px; | |
background: #F1E6D9; | |
} | |
&:before { | |
border-radius: 70px 0; | |
} | |
&:after { | |
border-radius: 0 70px; | |
} | |
} | |
} | |
.eyes { | |
width: 140px; | |
height: 70px; | |
background: #F5D2B9; | |
border-radius: 140px 140px 0 0; | |
margin: 30px auto 0; | |
overflow: hidden; | |
font-size: 0; | |
.left, .right { | |
display: inline-block; | |
width: 50%; | |
height: 100%; | |
position: relative; | |
&:before { | |
content: ''; | |
width: 60px; | |
height: 60px; | |
background: #F59699; | |
position: absolute; | |
bottom: -30px; | |
border-radius: 60px; | |
} | |
&:after { | |
content: ''; | |
position: absolute; | |
width: 30px; | |
height: 15px; | |
background: #fff; | |
top: 20px; | |
} | |
span { | |
background: #0072CB; | |
width: 15px; | |
height: 15px; | |
display: block; | |
border-radius: 15px; | |
margin-top: 43px; | |
} | |
} | |
.left { | |
background: #F2C2A0; | |
&:before { | |
left: -30px; | |
} | |
&:after { | |
left: 27px; | |
border-radius: 36px 0; | |
} | |
span { | |
margin-left: 39px; | |
} | |
} | |
.right { | |
&:before { | |
right: -30px; | |
} | |
&:after { | |
right: 27px; | |
border-radius: 0 36px; | |
} | |
span { | |
margin-left: 16px; | |
} | |
} | |
} | |
.body { | |
width: 200px; | |
height: 250px; | |
background: #E74700; | |
border-radius: 200px; | |
z-index: -1; | |
position: relative; | |
top: -100px; | |
&:after { | |
content: ''; | |
background: #F1E6D9; | |
width: 46px; | |
height: 46px; | |
position: absolute; | |
left: 0; | |
right: 0; | |
margin: auto; | |
top: 74px; | |
} | |
} | |
.left-hand { | |
width: 80px; | |
height: 50px; | |
border-bottom: 40px solid #E74700; | |
border-left: 40px solid #E74700; | |
border-bottom-left-radius: 200px; | |
position: absolute; | |
left: -90px; | |
top: -10px; | |
} | |
.right-hand { | |
background: #E74700; | |
width: 200px; | |
border-radius: 200px 200px 0 0; | |
left: 40px; | |
height: 120px; | |
position: relative; | |
top: 30px; | |
} | |
.left-hand, .right-hand { | |
&:before { | |
content: ''; | |
background: #fff; | |
height: 20px; | |
display: block; | |
position: absolute; | |
width: 47px; | |
} | |
&:after { | |
content: ''; | |
position: absolute; | |
width: 40px; | |
height: 20px; | |
background: #F5D2B9; | |
} | |
} | |
.left-hand { | |
&:before { | |
left: -44px; | |
transform: rotate(-11deg); | |
top: -8px; | |
} | |
&:after { | |
left: -44px; | |
top: -28px; | |
transform: rotate(-11deg); | |
border-radius: 40px 40px 0 0; | |
} | |
} | |
.right-hand { | |
z-index: -1; | |
&:before { | |
right: 0px; | |
bottom: -10px; | |
width: 40px; | |
} | |
&:after { | |
right: 0px; | |
bottom: -30px; | |
border-radius: 0 0 40px 40px; | |
} | |
} | |
.cap { | |
width: 130px; | |
height: 50px; | |
background: #E74700; | |
border-radius: 100px 0; | |
position: relative; | |
top: 50px; | |
left: 70px; | |
&:before, &:after { | |
content: ''; | |
position: absolute; | |
width: 30px; | |
height: 15px; | |
background: #fff; | |
} | |
&:before { | |
border-radius: 30px 0; | |
right: -30px; | |
top: -15px; | |
} | |
&:after { | |
border-radius: 0 30px; | |
right: -30px; | |
top: 0px; | |
} | |
} | |
.belt { | |
height: 35px; | |
background: #3A1200; | |
&:before, &:after { | |
content: ''; | |
height: 35px; | |
width: 17px; | |
background: #E74700; | |
position: absolute; | |
} | |
&:before { | |
left: 35px; | |
} | |
&:after { | |
right: 35px; | |
} | |
.buckle { | |
box-sizing: border-box; | |
border: 10px solid #FFDF17; | |
width: 46px; | |
margin: 0 auto; | |
height: 35px; | |
display: inline-block; | |
position: relative; | |
&:after { | |
content: ''; | |
height: 5px; | |
width: 15px; | |
display: block; | |
background: #FFDF17; | |
position: absolute; | |
right: -2px; | |
margin: auto; | |
top: 0; | |
bottom: 0; | |
border-radius: 5px; | |
} | |
} | |
} | |
.legs { | |
width: 46px; | |
height: 46px; | |
background: #FFF1C8; | |
/* background: blue; */ | |
position: absolute; | |
bottom: -20px; | |
left: 0; | |
right: 0; | |
margin: auto; | |
&:before, &:after { | |
content: ''; | |
background: #3A1200; | |
width: 23px; | |
height: 23px; | |
position: absolute; | |
} | |
&:before { | |
border-top-left-radius: 20px; | |
left: -23px; | |
bottom: 0; | |
} | |
&:after { | |
border-top-right-radius: 20px; | |
right: -23px; | |
bottom: 0; | |
} | |
} | |
.gift { | |
width: 130px; | |
height: 100px; | |
background: #0072CB; | |
position: relative; | |
left: 40px; | |
display: inline-block; | |
&:before { | |
content: ''; | |
height: 30px; | |
display: block; | |
background: #0069B9; | |
} | |
.ribbon { | |
height: 100%; | |
width: 20px; | |
background: #E74700; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
margin: auto; | |
&:before, &:after { | |
content: ''; | |
width: 40px; | |
height: 20px; | |
background: #E74700; | |
position: absolute; | |
border-radius: 40px 0; | |
top: -20px; | |
} | |
&:before { | |
left: -30px; | |
border-radius: 0 40px; | |
} | |
} | |
&.orange { | |
background: #FFAC05; | |
height: 200px; | |
&:before { | |
background: #FF8D17; | |
} | |
} | |
&.purple { | |
background: #9B70FF; | |
height: 250px; | |
&:before { | |
background: #844EFF; | |
} | |
} | |
} | |
.gift-holder { | |
float: left; | |
position: absolute; | |
top: 180px; | |
.gift { | |
&:first-child { | |
left: 90px; | |
z-index: 1; | |
} | |
&:last-child { | |
left: -10px; | |
} | |
} | |
} | |
.text { | |
text-align: center; | |
font-family: 'Mountains of Christmas', cursive; | |
font-size: 50px; | |
position: relative; | |
top: -80px; | |
font-weight: bold; | |
} |
<link href="https://fonts.googleapis.com/css?family=Mountains+of+Christmas:400,700" rel="stylesheet" /> |