CodePen

HTML

            
              <div class="wrapper">
  <div class="sky">
    <div class="moon"></div>
    <div class="stars"></div>
  </div>
  <div class="landscape">
    <div class="tree tree-1">
      <span class="branch-left"></span>
      <span class="branch-right"></span>
    </div>
    <div class="tree tree-2">
      <span class="branch-left"></span>
      <span class="branch-right"></span>      
    </div>
    <div class="tree tree-3">
      <span class="branch-left"></span>
      <span class="branch-right"></span>      
    </div>
  </div>
</div>

<a href="http://dribbble.com/shots/1240818-Winter-view" class="dribbble">Inspired by Daniel Wiklund's Dribbble shot</a>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              /**
 * twitter @matty_h
 * inspired by http://dribbble.com/shots/1240818-Winter-view
 */
* {
  box-sizing: border-box;
}
body {
  background-color: #eee;
  padding: 4em 0;
}
body, html {
  height: 100%;
}
.wrapper{
  width: 188px;
  height: 188px;
  border-radius: 50%;
  border: 6px solid #fff;
  box-shadow: 0 0 2px 1px #dfdfdf;
  margin: 0 auto;
  overflow: hidden;
}
.sky {
  height: 100px;
  background: linear-gradient(to bottom, #00103a 0%, #3e5f77 100%);
  border-bottom: 1px solid #9cbcd9;
  position: relative;
}
.moon {
  width: 36px;
  height: 36px;
  background: radial-gradient(ellipse at center, #f0f0f1 0%, #becdd2 100%);
  border-radius: 50%;
  position: absolute;
  top: 30px; left: 36px;
}
.stars {
  width: 1px;
  height: 1px;
  background-color: #e9f1f6;
  position: absolute;
  top: 26px; right: 80px;
  &:before,
  &:after {
    content: "";
    width: 1px;
    height: 1px;
    position: absolute;      
  }
  &:before {
    background-color: #acbecb;
    left: 1px;
    box-shadow: -1px -1px 0 0 #acbecb,
                -1px 1px 0 0 #acbecb,
                -2px 0 0 0 #acbecb,
                1px 0 0 0 #4f738f,
                2px 0 0 0 #4f738f,
                3px 0 0 0 #4f738f,
                4px 0 0 0 #4f738f,
                -1px 2px 0 0 #4f738f,
                -1px 3px 0 0 #4f738f,
                -1px 4px 0 0 #4f738f,
                -1px 5px 0 0 #4f738f,
                -3px 0 0 0 #4f738f,
                -4px 0 0 0 #4f738f,
                -5px 0 0 0 #4f738f,
                -6px 0 0 0 #4f738f,
                -1px -2px 0 0 #4f738f,
                -1px -3px 0 0 #4f738f,
                -1px -4px 0 0 #4f738f,
                -1px -5px 0 0 #4f738f;
  }
  &:after {
    background-color: #537386;
    top: 54px; left: -86px;
    box-shadow: 15px 8px 0 0 #537386,
                25px -8px 0 0 #7aa6bd,
                28px -58px 0 0 #4f738f,
                12px -30px 0 0 #7aa6bd,
                58px 4px 0 0 #537386,
                140px -19px 0 0 #4f738f,
                107px -26px 0 0 #4f738f,
                78px -65px 0 0 #8bb7cd,
                99px -11px 0 0 #537386,
                64px -52px 0 0 #7aa6bd,
                54px -68px 0 0 #4f738f,
                76px -20px 0 0 #537386,
                105px -68px 0 0 #8bb7cd,
                97px -51px 0 0 #4f738f,
                123px -58px 0 0 #7aa6bd,
                125px -40px 0 0 #537386,
                110px 7px 0 0 #4f738f,
                88px 2px 0 0 #4f738f,
                158px 0 0 0 #537386,
                137px -2px 0 0 #7aa6bd;
  }
}
.landscape {
  height: 76px;
  background: radial-gradient(ellipse at top, #d1e8fc 0%,#89bbe4 100%);
  border-top: 1px solid #b6d5f1;
  position: relative;
}
.tree {
  border-left: 3px solid transparent;
  border-bottom: 48px solid #4c3100;
  border-right: 3px solid transparent;
  width: 0;
  height: 0;
  &:after {
    content: '';
    border-left: 2px solid transparent;
    border-top: 40px solid #6b8eac;
    border-right: 2px solid transparent;
    width: 0;
    height: 0;
    transform: rotate(-60deg);
    display: block;
    position: absolute;
    top: 39px; left: 14px;
  }
}
.tree-1 {
  position: absolute;
  top: -39px; right: 18px;
}
.tree-2 {
  position: absolute;
  top: -33px; right: 34px;
}
.tree-3 {
  position: absolute;
  top: -36px; right: 48px;
}
.branch-left {
  width: 5px;
  height: 2px;
  background-color: #4a3811;
  position: absolute;
  bottom: -36px; left: -7px;
  transform: rotate(18deg);
  &:before,
  &:after {
    content: '';
    width: 5px;
    height: 1px;
    background-color: #4a3811;
    position: absolute;
    transform: rotate(18deg);       
  }
  &:before {
    bottom: 8px; left: -2px;
  }
  &:after {
    bottom: 17px; left: -4px;
  }
}
.branch-right {
  width: 5px;
  height: 1px;
  background-color: #4a3811;
  position: absolute;
  bottom: -36px; left: 2px;
  transform: rotate(162deg);
  &:before,
  &:after {
    content: '';
    width: 5px;
    height: 1px;
    background-color: #4a3811;
    position: absolute;
    transform: rotate(162deg);     
  }
  &:before {
    bottom: -8px; left: -2px;
  }
  &:after {
    bottom: -17px; left: -4px;
  }
}
.dribbble {
  font: 0.75em/1.5em verdana,sans-serif;
  color: #3e5f77;
  position: absolute;
  bottom: 1.5em; right: 1.5em;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /**
 * twitter @matty_h
 * inspired by http://dribbble.com/shots/1240818-Winter-view
 */
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................