Снежинка для сайта на CSS3

Вы можете облегчить создание изображений только на CSS3, используя передовые инструменты разработки интерфейса; эта хорошо продуманная снежинка на CSS3 — отличный тому пример. Для реализации этого потрясающего дизайна снежинки разработчик использовал язык шаблонов Jade , который компилируется в HTML, и препроцессор Sass CSS.

HTML(Pug)

h1 
  | CSS3 
  br
  | Snowflake

.snow
  .f
  .l
  .a
    - for(i=0; i<12; i++)
      p
  .k
    - for(i=0; i<12; i++)
      p
  .e
    - for(i=0; i<6; i++)
      p

CSS(SCSS)

$light-blue:  #A7DBD8;
$dark-blue: #69D2E7;
$tan: #E0E4CC;

$bg-color: $tan;
$flake-color: $dark-blue;
$text-color: $light-blue;
$shadow-color: $dark-blue;

@mixin centered {
  position: absolute;
  top: 50%;
  left: 50%;
}
body {
  background: $bg-color;
}
h1 {
  color: $text-color;
  font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-size: 72px;
  text-transform: uppercase;
  font-weight: normal;
  line-height: .85em;
  text-shadow: 2px 2px 1px $shadow-color;
  position: fixed;
  bottom:10px; 
  left:10px;
  margin:0;
  padding:0;
  
}
.snow {
  @include centered;
}
.f { // middle circle
  @include centered;
  margin-top:-30px;
  margin-left:-30px;
  width:0;
  height:0;
  border-radius: 50%;
  border: 30px solid $flake-color;
}
%line {
  @include centered;
  height:380px;
  width:10px;
  background: $flake-color;
  margin-top:-190px;
  margin-left:-5px;
}
.l { // the lines
  @extend %line;
}
.l:before {
   @extend %line;
  content: " ";
  transform: rotate(120deg);
}
.l:after {
   @extend %line;
  content: " ";
  transform: rotate(60deg);
}
%diamond {
  @include centered;
  width: 0;
  height: 0;
  border:20px solid transparent;
  border-bottom: 45px solid $flake-color;
  &:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-top: 75px solid $flake-color;
    left: -20px; top: 45px;
  }
}
.a p { // the large diamonds
  &:nth-child(1) {
  @extend %diamond;
  margin:-191px 0 0 58px;
  transform: rotate(44deg);
  }
  &:nth-child(2) {
  @extend %diamond;
  margin:-180px 0 0 79px;
  transform: rotate(16deg);
  }
  &:nth-child(3) {
  @extend %diamond;
  margin:-44px 0 0 160px;
  transform: rotate(104deg);
  }
  &:nth-child(4) {
  @extend %diamond;
  margin:-20px 0 0 160px;
  transform: rotate(76deg);
  }
  &:nth-child(5) {
  @extend %diamond;
  margin:128px 0 0 58px;
  transform: rotate(136deg);
  }
  &:nth-child(6) {
  @extend %diamond;
  margin:117px 0 0 79px;
  transform: rotate(164deg);
  }
  &:nth-child(7) {
  @extend %diamond;
  margin:128px 0 0 -98px;
  transform: rotate(224deg);
  }
  &:nth-child(8) {
  @extend %diamond;
  margin:117px 0 0 -119px;
  transform: rotate(196deg);
  }
  &:nth-child(9) {
  @extend %diamond;
  margin:-44px 0 0 -198px;
  transform: rotate(256deg);
  }
  &:nth-child(10) {
  @extend %diamond;
  margin:-20px 0 0 -198px;
  transform: rotate(284deg);
  }
  &:nth-child(11) {
  @extend %diamond;
  margin:-191px 0 0 -98px;
  transform: rotate(316deg);
  }
  &:nth-child(12) {
  @extend %diamond;
  margin:-180px 0 0 -119px;
  transform: rotate(344deg);
  }
}
%diamond-s {
  @include centered;
  width: 0;
  height: 0;
  border:15px solid transparent;
  border-bottom: 30px solid $flake-color;
  &:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    border-top: 45px solid $flake-color;
    left: -15px; top: 30px;
  }
}
.k p { // the smaller diamonds
  &:nth-child(1) {
  @extend %diamond-s;
  margin:-210px 0 0 37px;
  transform: rotate(44deg);
  }
  &:nth-child(2) {
  @extend %diamond-s;
  margin:-160px 0 0 120px;
  transform: rotate(16deg);
  }
  &:nth-child(3) {
  @extend %diamond-s;
  margin:-70px 0 0 172px;
  transform: rotate(104deg);
  }
  &:nth-child(4) {
  @extend %diamond-s;
  margin:115px 0 0 120px;
  transform: rotate(164deg);
  }
  &:nth-child(5) {
  @extend  %diamond-s;
  margin:25px 0 0 172px;
  transform: rotate(76deg);
  }
  &:nth-child(6) {
  @extend %diamond-s;
  margin:165px 0 0 37px;
  transform: rotate(136deg);
  }
  &:nth-child(7) {
  @extend %diamond-s;
  margin:165px 0 0 -67px;
  transform: rotate(224deg);
  }
  &:nth-child(8) {
  @extend %diamond-s;
  margin:115px 0 0 -150px;
  transform: rotate(196deg);
  }
  &:nth-child(9) {
  @extend %diamond-s;
  margin:25px 0 0 -200px;
  transform: rotate(284deg);
  }
  &:nth-child(10) {
  @extend %diamond-s;
  margin:-160px 0 0 -150px;
  transform: rotate(344deg);
  }
  &:nth-child(11) {
  @extend %diamond-s;
  margin:-70px 0 0 -200px;
  transform: rotate(256deg);
  }
  &:nth-child(12) {
  @extend %diamond-s;
  margin:-210px 0 0 -67px;
  transform: rotate(316deg);
  }
}

%circle {
  @include centered;
  width:0;
  height:0;
  border-radius: 50%;
  border: 1em solid $flake-color;
  margin: -7.25em 0 0 -11.875em;
  transform-origin: 11.875em 7.25em 0;
}
.e p { // the small circles
  @for $i from 1 through 6 {
    &:nth-child(#{$i}) {
      @extend %circle;
      transform: rotate(60deg * $i - 60deg);
    }
  }
}