Санта c подарками на CSS в стиле Flat

Мэтт Харрис показывает нам фантастический подход к реализации  стиля Flat, где острые углы, яркие края, множество геометрических форм и четкие границы приводят к выдающемуся результату. Санта c подарками смотрится просто, элегантно, изящно и технологично.

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>

CSS

@import "compass/css3";

/**
 * twitter @matty_h
 * 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;
}