Skip to content

Instantly share code, notes, and snippets.

/Santa---Merry-Christmas-everyone!.markdown

Created December 25, 2013 12:19
Show Gist options
  • Save anonymous/8122759 to your computer and use it in GitHub Desktop.
Save anonymous/8122759 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Matt Harris.
Raw
index.html
<div class="santa">
<div class="santa-body"></div>
<div class="santa-hatbottom"></div>
<div class="santa-eye eye-left"></div>
<div class="santa-eye eye-right"></div>
<div class="santa-face"></div>
<div class="santa-beard"></div>
<div class="santa-features"></div>
<div class="santa-arm arm-left"></div>
<ul class="presents presents-left">
<li></li><li><li><li></li><li></li>
</ul>
<div class="santa-arm arm-right"></div>
<ul class="presents presents-right">
<li></li><li><li><li></li><li></li>
</ul>
<div class="dot"></div>
<div class="present-bows"></div>
<div class="santa-belt"></div>
<div class="santa-legs"></div>
<div class="shadow"></div>
</div>
<a href="http://dribbble.com/shots/835890-This-guy" class="dribbble">Inspired by Luke Bott's Dribbble shot</a>
Raw
Santa---Merry-Christmas-everyone!.markdown
Raw
script.js
/**
* twitter @thirtytwo_d
* inspired by http://dribbble.com/shots/835890-This-guy
*/
Raw
style.scss
@import "compass";
/**
* twitter @thirtytwo_d
* inspired by http://dribbble.com/shots/835890-This-guy
*/
$background-red: #7d211c;
$santa-red: #ff563f;
$santa-pink: #ff9088;
* {
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
padding: 5rem;
background-color: #7d211c;
}
.santa {
margin: 0 auto;
width: 9.2rem;
position: relative;
}
.santa-body {
width: 0;
height: 0;
border-bottom: 16rem solid $santa-red;
border-left: 8.8rem solid transparent;
overflow: hidden;
&:before, &:after {
content: '';
position: absolute;
}
&:before {
width: 9.2rem;
height: 5.8rem;
background-color: $santa-red;
bottom: -4.4rem; left: -.4rem;
border-top-left-radius: 2.8rem;
border-bottom-left-radius: 2.8rem;
}
&:after {
width: 1.6rem;
height: 1.6rem;
background-color: #fff;
border-radius: 50%;
top: -1rem; right: -.2rem;
}
}
.santa-hatbottom {
width: 4.6rem;
height: 1.4rem;
background-color: white;
border-top-left-radius: 1.4rem;
border-bottom-left-radius: 1.4rem;
position: absolute;
top: 6rem; right: .4rem;
z-index: 1;
&:before, &:after {
content: '';
position: absolute;
}
&:before {
width: .8rem;
height: 4rem;
background-color: white;
top: 1.4rem; right: 0;
}
&:after {
width: .4rem;
height: .4rem;
background-color: $santa-pink;
border-radius: 50%;
top: 1.2rem; right: 1.5rem;
}
}
.santa-eye {
width: 1.6rem;
height: 1.6rem;
position: absolute;
background-color: $santa-pink;
border-radius: 50%;
box-shadow: 0 .3rem #fff inset;
z-index: 2;
&:before, &:after {
content: '';
position: absolute;
}
&:before {
width: .8rem;
height: .4rem;
border-radius: 0 0 .8rem .8rem;
background-color: $santa-pink;
top: 1.8rem; left: .6rem
}
&:after {
width: .6rem;
height: .6rem;
background-color: $background-red;
border-radius: 50%;
top: .6rem; left: .5rem
}
}
.eye-left {
top: 7.7rem; left: 3.3rem;
}
.eye-right {
top: 7.7rem; left: 6rem;
&:before {
left: 0;
}
}
.santa-face {
width: 4rem;
height: 2.2rem;
background: $santa-pink;
transform: skew(-28deg);
position: absolute;
top: 7.4rem; left: 4.1rem;
&:before, &:after {
content: '';
position: absolute;
}
&:before {
width: .8rem;
height: .8rem;
background: $santa-pink;
top: 1.4rem; left: 3.9rem;
}
&:after {
width: 1.8rem;
height: 1.8rem;
background: #fff;
top: 2.2rem; left: 3.2rem;
transform: skew(28deg);
}
}
.santa-beard {
width: 4rem;
height: 3.6rem;
background: #fff;
transform: skew(-29deg);
position: absolute;
top: 9.6rem; left: 2.5rem;
&:before, &:after {
content: '';
position: absolute;
background-color: #fff;
}
&:before {
width: 4rem;
height: 1.6rem;
top: 3.6rem; left: 0;
}
&:after {
width: 3.2rem;
height: 1.8rem;
top: 1.8rem;
left: 3.6rem;
transform: skew(29deg);
border-radius: 0 0 2.4rem 0;
}
}
.santa-features {
width: 1.6rem;
height: 1rem;
border-radius: 0 0 1.6rem 1.6rem;
background-color: $santa-pink;
position: absolute;
top: 10.6rem; left: 4.6rem;
&:before, &:after {
content: '';
position: absolute;
}
&:before {
width: 1.2rem;
height: .7rem;
border-radius: 0 0 1.2rem 1.2rem;
background-color: $santa-pink;
top: -1rem; left: .2rem;
}
&:after {
width: 2rem;
height: 1.8rem;
background-color: #fff;
top: 2.4rem;
left: -.2rem;
border-radius: 0 0 2.2rem 0;
}
}
.santa-arm {
width: 5.2rem;
height: 3.6rem;
background-color: $santa-red;
position: absolute;
top: 11.4rem;
&:after {
content: '';
width: 2.2rem;
height: 2.2rem;
background-color: $santa-red;
position: absolute;
top: 0;
}
}
.arm-right {
right: -4.8rem;
border-right: 1.6rem solid #fff;
&:after {
content: '';
border-radius: 0 0 2.2rem 0;
right: -3.8rem
}
}
.arm-left {
border-left: 1.6rem solid #fff;
left: -2.7rem;
z-index: -1;
&:after {
content: '';
border-radius: 0 0 0 2.2rem;
left: -3.8rem
}
}
.presents li {
overflow: hidden;
position: relative;
&:before, &:after {
content: '';
position: absolute;
}
}
.presents-left {
position: absolute;
top: 3.8rem;
left: -5.7rem;
&:before, &:after {
content: '';
position: absolute;
width: .3rem;
height: .3rem;
border-radius: 50%;
border: .2rem solid $santa-red;
top: -.6rem;
}
&:before {
left: 1.3rem;
}
&:after {
left: 1.8rem;
z-index: -10;
}
}
.presents-left li:nth-child(1) {
width: 1.4rem;
height: 1.4rem;
background-color: $santa-pink;
margin-left: 1.2rem;
&:before {
height: 1.4rem;
width: .2rem;
background-color: $santa-red;
left: .55rem;
}
}
.presents-left li:nth-child(2) {
width: 2.4rem;
height: 2rem;
background-color: $santa-red;
margin-left: 1.8rem;
&:before {
width: 1.6rem;
height: 1.6rem;
background-color: $santa-pink;
border-radius: 50%;
top: .9rem; left: -.4rem
}
&:after {
width: 1.6rem;
height: 1.6rem;
background-color: $santa-pink;
border-radius: 50%;
bottom: .8rem; right: -.4rem;
}
}
.presents-left li:nth-child(3) {
width: 3.4rem;
height: 2.4rem;
background-color: #fff;
margin-left: .6rem;
&:before {
height: 2.4rem;
width: .2rem;
background-color: $santa-red;
left: 2.4rem;
}
&:after {
height: .2rem;
width: 3.4rem;
background-color: $santa-red;
top: 1.1rem;
}
}
.presents-left li:nth-child(4) {
width: 4.6rem;
height: 1.8rem;
background-color: $santa-pink;
&:before {
height: 1.8rem;
width: .2rem;
background-color: $background-red;
left: 2.3rem;
}
&:after {
height: .2rem;
width: 4.6rem;
background-color: $background-red;
left: 0; top: .5rem;
}
}
.presents-right {
position: absolute;
top: 4rem;
right: -8rem;
&:before, &:after {
content: '';
position: absolute;
border: .2rem solid #fff;
width: .3rem;
height: .3rem;
border-radius: 50%;
top: -.6rem;
}
&:before {
left: .3rem;
}
&:after {
left: .7rem;
z-index: -10;
}
}
.presents-right li:nth-child(1) {
width: 1.8rem;
height: 1.4rem;
background-color: $santa-red;
&:before {
height: 1.4rem;
width: .2rem;
background-color: #fff;
left: .8rem;
}
}
.presents-right li:nth-child(2) {
width: 3.2rem;
height: 1.6rem;
background-color: #fff;
margin-left: .8rem;
&:before {
height: 1.6rem;
width: .2rem;
background-color: $santa-pink;
left: 1.8rem;
}
&:after {
height: .2rem;
width: 3.2rem;
background-color: $santa-pink;
top: .5rem;
}
}
.presents-right li:nth-child(3) {
width: 4.2rem;
height: 1.6rem;
background-color: $santa-red;
margin-left: -.8rem;
&:before {
height: 1.6rem;
width: .2rem;
background-color: $background-red;
left: 1rem;
}
&:after {
height: .2rem;
width: 4.2rem;
background-color: $background-red;
top: .7rem;
}
}
.presents-right li:nth-child(4) {
width: 4.8rem;
height: 2.8rem;
background-color: $santa-pink;
&:before {
width: 1.6rem;
height: 1.6rem;
background-color: $santa-red;
border-radius: 50%;
bottom: -.6rem; left: -.6rem;
}
&:after {
width: 1.6rem;
height: 1.6rem;
background-color: $santa-red;
border-radius: 50%;
bottom: 1.8rem; right: -.8rem;
}
}
.dot {
width: 1.6rem;
height: 1.6rem;
background-color: $santa-red;
border-radius: 50%;
position: absolute;
top: 9.2rem; left: 14rem;
}
.present-bows {
&:before, &:after {
content: '';
position: absolute;
width: .3rem;
height: .3rem;
border-radius: 50%;
border: .2rem solid $santa-pink;
top: 4.8rem;
z-index: -10;
}
&:before {
left: 14.5rem;
}
&:after {
left: 15rem;
}
}
.santa-belt {
width: 9.2rem;
height: 1.2rem;
background-color: $background-red;
position: absolute;
bottom: -1.8rem; right: .4rem;
&:before, &:after {
content: '';
position: absolute;
}
&:before {
width: 2rem;
height: 1.4rem;
border: .5rem solid #fff;
bottom: -.6rem;
left: 1.2rem;
}
&:after {
width: .8rem;
height: .5rem;
background-color: #fff;
bottom: .45rem; left: 1.7rem;
}
}
.santa-legs {
width: 4.8rem;
height: 2.4rem;
background-color: $santa-red;
border-top: .6rem solid #fff;
position: absolute;
bottom: -6.8rem; right: .4rem;
&:before, &:after {
content: '';
width: 2rem;
height: 1.6rem;
background-color: $santa-red;
position: absolute;
top: .2rem;
}
&:before {
left: -2rem;
border-radius: 2.2rem 1.2rem 0 0;
}
&:after {
right: -2rem;
border-radius: 1.2rem 2.2rem 0 0;
}
}
.shadow {
width: 1.6rem;
height: 1rem;
position: absolute;
top: 15rem; left: 7.2rem;
box-shadow: -.2rem .2rem .2rem $background-red inset;
&:before {
content: '';
width: .2rem;
height: 2rem;
position: absolute;
top: 6rem; left: -.9rem;
box-shadow: .1rem 0 .1rem $background-red inset;
}
}
.dribbble {
font: 1.2rem/1.5rem verdana,sans-serif;
color: #fff;
position: absolute;
bottom: 1.5em; right: 1.5em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment