Skip to content

Instantly share code, notes, and snippets.

@atomicpages
Last active December 10, 2015 03:28
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save atomicpages/4374768 to your computer and use it in GitHub Desktop.
A CodePen by atomicpages.
<div class="snowman">
<div class="head">
<div class="eyes">
<div class="eye left"></div>
<div class="eye right"></div>
</div>
<div class="nose">
<div class="inner"></div>
</div>
<div class="mouth">
<div class="inner"></div>
</div>
</div>
<div class="arm left">
<div class="hand">
<div class="finger one"></div>
<div class="finger two"></div>
<div class="finger three"></div>
</div>
</div>
<div class="arm right">
<div class="hand">
<div class="finger one"></div>
<div class="finger two"></div>
<div class="finger three"></div>
</div>
</div>
<div class="middle">
<div class="inner">
<div class="button top">
<div class="highlight"></div>
</div>
<div class="button center">
<div class="highlight"></div>
</div>
<div class="button floor">
<div class="highlight"></div>
</div>
</div>
</div>
<div class="bottom">
<div class="inner">
<div class="button top">
<div class="highlight"></div>
</div>
<div class="button floor">
<div class="highlight"></div>
</div>
</div>
</div>
</div>
document.body.className = "lightBg";
$('.collectonme').hide();
$(document).snowfall('clear');
$(document).snowfall({shadow : true, round : true, minSize: 5, maxSize:8}); // add shadows
@import "compass/css3";
body { background: #666; }
// CHANGE ME!!
$base: 300px;
// VARIABLES
$snowColor: #f0f0f0;
// $snowColor: gray;
$buttonColor: #0e74bc;
$eyeColor: black;
$noseColor: red;
@mixin bg_color() {
background-color: #f0f0f0;
@include filter-gradient(#f0f0f0, #d8d8d8, horizontal);
$experimental-support-for-svg: true;
@include background-image(radial-gradient(center, ellipse cover, #f0f0f0 0%,#d8d8d8 100%));
}
@mixin rotate($deg) {
// transform: rotate(2deg);
transform: rotate($deg);
-ms-transform: rotate($deg);
-moz-transform: rotate($deg);
-webkit-transform: rotate($deg);
-o-transform: rotate($deg);
}
.snowman {
// border: 1px solid black;
margin: 10px auto;
width: $base;
z-index: 20;
.head {
position: relative;
height: round($base / 3);
width: round($base / 3);
margin: 0 auto;
.eyes {
position: relative;
z-index: 15;
.eye {
position: relative;
background: $eyeColor;
height: floor($base / 20);
width: floor($base / 20);
@include border-radius(round($base / 10));
z-index: 15;
}
.left {
float: left;
margin: round($base / 15) 0 0 round($base / 15);
}
.right {
float: right;
margin: round($base / 15) round($base / 15) 0 0
}
}
.nose {
position: relative;
margin: 0 auto;
width: $base / 15;
height: $base / 15;
background-color: #d33b30;
@include filter-gradient(#d33b30, #c40003, horizontal);
$experimental-support-for-svg: true;
@include background-image(radial-gradient(center, ellipse cover, #d33b30 0%,#c40003 100%));
padding: round($base / 100) round($base / 50);
position: relative;
top: round($base / 7);
@include border-radius($base / 5);
@include box-shadow(lighten($snowColor, 10%) 2px 2px 5px);
z-index: 10;
.inner {
position: relative;
background: white;
height: round($base / 30);
width: round($base / 30);
@include border-radius($base / 5);
float: right;
opacity: 0.6;
z-index: 15;
}
}
.mouth {
position: relative;
margin: 0 auto;
padding-top: round($base / 60);
height: round($base / 4);
width: round($base / 4);
border: round($base / 75) dashed black;
@include border-radius($base / 5);
bottom: round($base / 15);
.inner {
@include bg_color();
height: round(($base / 3) * 0.85);
width: round(($base / 3) * 0.85);
@include border-radius(round($base / 1.5));
position: relative;
bottom: round($base / 21.42);
right: round($base / 60);
}
}
}
.middle {
position: relative;
height: round($base / 1.5);
width: round($base / 1.5);
margin: 0 auto;
}
.bottom {
position: relative;
height: $base;
width: $base;
margin: 0 auto;
}
.middle,
.bottom {
.inner { padding-top: round($base / 15); }
.button {
position: relative;
height: round($base / 15);
width: round($base / 15);
background: $buttonColor;
border: medium solid darken($buttonColor, 20%);
@include border-radius(round($base / 10));
margin: round($base / 20) auto;
@include box-shadow(lighten($snowColor, 10%) 1px 1px 0px);
.highlight {
height: round(($base / 15) * 0.95);
width: round(($base / 15) * 0.95);
background: darken($buttonColor, 10%);
@include border-radius(round($base / 10));
position: relative;
top: 2px;
float: right;
}
}
.top { margin-top: 0; }
}
.head,
.middle,
.bottom {
position: relative;
@include bg_color();
@include border-radius(round($base / 1.5));
z-index: 10;
}
.arm {
position: relative;
height: round($base / 1.5);
width: round($base / 50);
background: black;
z-index: 0;
.hand {
.finger {
height: round($base / 10);
width: round($base / 50);
background: black;
}
.finger.one {
@include rotate(45deg);
position: relative;
bottom: round($base / 12);
left: round($base / 30);
}
.finger.two {
@include rotate(0deg);
position: relative;
bottom: round($base / 5);
left: 0;
}
.finger.three {
@include rotate(-45deg);
position: relative;
bottom: round($base / 3.75);
right: round($base / 30);
}
}
}
.arm.left {
margin-top: 20px;
float: left;
@include rotate(225deg);
}
.arm.right {
margin-top: 20px;
float: right;
@include rotate(-225deg);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment