Красивая открытка С Рождеством или Новым годом на CSS

«Счастливого Рождества» или с Новым годом — это традиционная поздравительная открытка с классической эстетикой. У неё красный фон, типография с завитками, рождественская елка , гирляндой и огнями. На заднем плане мерцают блестки и гирлянды, огни которых каждую секунду меняют цвет. Можно использовать для украшения сайта к Новогодним праздникам.

Haml

- (1..30).each do |i|
  %div{:class => "glitter glitter_#{i}"}
.container
  .tree
    %svg{:'version' => "1.1", :'id' => "Layer_1", :'x' => "0px", :'y' => "0px", :'width' => "380px", :'height' => "430px", :'viewBox' => "0 0 380 430", :'enable-background' => "new 0 0 380 430", :'xml:space' => "preserve" }
      %defs
        %linearGradient{ :'id' => "TreeGradient", :'x1' => "0%", :'y1' => "0%", :'x2' => "0%", :'y2' => "100%" }
          %stop{ :'offset' => "5%", :'stop-color' => "#022D02" }
          %stop{ :'offset' => "95%", :'stop-color' => "#005600" }
      %path{ :'fill' => "#5A3412", :'stroke-width' => "0.8894", :'stroke-miterlimit' => "10", :'d' => "M161.008,410.682 c0,0,18.678,12.452,61.665,2.668c-6.951-27.11-11.265-68.483-11.265-68.483s-34.984-13.342-44.768-2.372 C167.53,379.554,161.008,410.682,161.008,410.682z" }
      %path{ :'fill' => "url(#TreeGradient)", :'stroke-width' => "0.8894", :'stroke-miterlimit' => "10", :'d' => "M68.807,268.378 c0,0-10.673,57.218-49.51,63.739c0,0,21.346,20.457,44.47,3.559c17.788,26.386,45.359,10.673,45.359,10.673 s22.235,23.123,47.436,2.372c20.751,28.163,57.515,2.075,57.515,2.075s23.123,25.792,48.027-2.669c0,0,31.128,23.125,53.363-5.337 c3.467-1.876,29.35,17.196,46.249-6.226c-43.284-8.005-50.696-64.927-50.696-64.927C300.988,256.354,68.807,268.378,68.807,268.378z" }
      %path{ :'fill' => "url(#TreeGradient)", :'stroke-width' => "0.8894", :'stroke-miterlimit' => "10", :'d' => "M95.785,222.129 c0,0-29.712,52.489-49.213,54.846c0,0,29.943,23.719,53.067,6.819c24.014,24.608,44.856,9.103,44.856,9.103 s26.296,24.694,53.868,2.756c32.61,21.938,44.68,0.061,52.178-5.04c0,0,24.903,16.307,39.404-5.337c0,0,29.079,8.599,41.828-10.375 c-26.386-0.89-44.767-50.104-44.767-50.104C276.975,209.513,95.785,222.129,95.785,222.129z" }
      %path{:'fill' => "url(#TreeGradient)", :'stroke-width' => "0.8894", :'stroke-miterlimit' => "10", :'d' => "M117.099,158.603 c0,0-30.504,56.707-50.005,59.063c0,0,22.762,19.878,45.886,2.979c24.014,24.608,48.917,8.302,48.917,8.302 s22.235,22.828,49.807,0.891c28.164,17.194,40.234,1.838,47.73-3.262c0,0,35.873,15.415,50.993-10.377 c-26.386-0.889-44.471-54.846-44.471-54.846C255.925,146.069,117.099,158.603,117.099,158.603z" }
      %path{ :'fill' => "url(#TreeGradient)", :'stroke-width' => "0.8894", :'stroke-miterlimit' => "10", :'d' => "M138.773,98.799 c0,0-27.274,54.253-46.776,56.609c0,0,22.762,19.879,45.887,2.98c24.014,24.607,45.009-0.539,45.009-0.539 s27.482,29.948,53.345,0.568c29.423,19.241,48.1-2.401,48.1-2.401c-18.084-1.779-42.098-56.329-42.098-56.329 C232.209,84.404,138.773,98.799,138.773,98.799z" }
      %path{ :'fill' => "url(#TreeGradient)", :'stroke-width' => "0.8894", :'stroke-miterlimit' => "10", :'d' => "M188.875,14.899 c0,0-29.703,62.218-69.726,86.232c0,0,24.663,18.42,47.788,1.521c24.014,20.456,48.027-2.668,48.027-2.668 s20.159,23.718,44.598,1.054C216.872,81.472,188.875,14.899,188.875,14.899z" }
  .star
  - (1..30).each do |i|
    %span{:class => "light light#{i}"}
  .shadow
%h1 Merry Christmas

SCSS

@import 'compass';

$light-color: #EAE486;

html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

body {
  height: 100%;
  overflow: hidden;
  background-color: rgba(240,48,51,1);
  @include filter-gradient(#f03033, #690000, horizontal);
  @include background-image(radial-gradient(center, ellipse cover, rgba(240,48,51,1) 0%, rgba(105,0,0,1) 100%));
    
  h1 {
    font-family: 'Great Vibes', cursive;
    font-weight: 100;
    color: #FFFFFF;
    position: absolute;
    left: 7%;
    top: 2%;
    font-size: 14vw;
    opacity: 0.8;
    @include text-shadow(1px 1px 20px rgba(#FFFFFF, 0.8));
    margin: 0;
  }

  .container {
    position: absolute;
    padding: 0;
    top: calc(50% - (420px / 2));
    left: calc(50% - (380px / 2));
    min-width: 380px;
    height: 430px;
    margin: 50px auto 0;
    
    * {
      position: absolute;
    }
    
    .star {
      top: 5px;
      left: calc(50% - 26px);
      display: block;
      color: red;
      width: 0px;
      height: 0px;
      border-right:  25px solid transparent;
      border-bottom: 17px  solid #F8CD13;
      border-left:   25px solid transparent;
      -moz-transform:    rotate(35deg);
      -webkit-transform: rotate(35deg);
      -ms-transform:     rotate(35deg);
      -o-transform:      rotate(35deg);
    
      &:before {
         border-bottom: 20px solid #F8CD13;
         border-left: 7px solid transparent;
         border-right: 7px solid transparent;
         position: absolute;
         height: 0;
         width: 0;
         top: -14px;
         left: -16px;
         display: block;
         content: '';
         -webkit-transform: rotate(-35deg);
         -moz-transform:    rotate(-35deg);
         -ms-transform:     rotate(-35deg);
         -o-transform:      rotate(-35deg);
      }
    
      &:after {
         position: absolute;
         display: block;
         color: red;
         top: 0px;
         left: -25px;
         width: 0px;
         height: 0px;
         border-right: 25px solid transparent;
         border-bottom: 17px solid #F8CD13;
         border-left: 25px solid transparent;
         -webkit-transform: rotate(-70deg);
         -moz-transform:    rotate(-70deg);
         -ms-transform:     rotate(-70deg);
         -o-transform:      rotate(-70deg);
         content: '';
      }
    }
    
    .light {
      height: 5px;
      width: 3px;
      border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
      //==== Layer 1
      &:nth-of-type(1) {
        top: 40px;
        left: 194px;
      }
      
      &:nth-of-type(2) {
        top: 72px;
        left: 178px;
      }
      
      &:nth-of-type(3) {
        top: 88px;
        left: 148px;
      }
      
      &:nth-of-type(4) {
        top: 80px;
        left: 216px;
      }
      //==== Layer 2
      &:nth-of-type(5) {
        top: 120px;
        left: 220px;
      }
      
      &:nth-of-type(6) {
        top: 144px;
        left: 246px;
      }
      
      &:nth-of-type(7) {
        top: 120px;
        left: 170px;
      }
      
      &:nth-of-type(8) {
        top: 130px;
        left: 132px;
      }
      
      &:nth-of-type(9) {
        top: 146px;
        left: 190px;
      }
      //==== Layer 3
      &:nth-of-type(10) {
        top: 180px;
        left: 220px;
      }
      
      &:nth-of-type(11) {
        top: 196px;
        left: 262px;
      }
      
      &:nth-of-type(12) {
        top: 176px;
        left: 150px;
      }
      
      &:nth-of-type(13) {
        top: 196px;
        left: 110px;
      }
      
      &:nth-of-type(14) {
        top: 210px;
        left: 170px;
      }
      
      &:nth-of-type(15) {
        top: 218px;
        left: 220px;
      }
      //==== Layer 4
      &:nth-of-type(16) {
        top: 250px;
        left: 190px;
      }
      
      &:nth-of-type(17) {
        top: 240px;
        left: 260px;
      }
      
      &:nth-of-type(18) {
        top: 268px;
        left: 290px;
      }
      
      &:nth-of-type(19) {
        top: 270px;
        left: 230px;
      }
      
      &:nth-of-type(20) {
        top: 276px;
        left: 150px;
      }
      
      &:nth-of-type(21) {
        top: 240px;
        left: 120px;
      }
      
      &:nth-of-type(22) {
        top: 266px;
        left: 84px;
      }
      //==== Layer 4
      &:nth-of-type(23) {
        top: 316px;
        left: 60px;
      }
      
      &:nth-of-type(24) {
        top: 300px;
        left: 106px;
      }
      
      &:nth-of-type(25) {
        top: 334px;
        left: 130px;
      }
      
      &:nth-of-type(26) {
        top: 314px;
        left: 176px;
      }
      
      &:nth-of-type(27) {
        top: 336px;
        left: 216px;
      }
      
      &:nth-of-type(28) {
        top: 310px;
        left: 250px;
      }
      
      &:nth-of-type(29) {
        top: 310px;
        left: 300px;
      }
      
      &:nth-of-type(30) {
        top: 338px;
        left: 280px;
      }
    }
  }
  
  .shadow {
    @include border-radius(50%);
    position: absolute;
    bottom: 20px;
    left: calc(50% - 80px);
    height: 0;
    z-index: -1;
    width: 160px;
    @include box-shadow( 0 0px 80px 30px rgba(#000000, 0.3));
    background: transparent;
  }
}


.star ~ .light {
  background: $light-color;
}



$colors: #d83636, #d87f36, #EAE486, #4dd836, #36d8c3, #36b8d8, #3658d8, #7736d8, #c736d8, #d8368a;
$repeat: 30; /* Number of lights */

@for $i from 1 through $repeat {
  $color1: nth($colors, random(length($colors)));
  $color2: nth($colors, random(length($colors)));
  $color3: nth($colors, random(length($colors)));

  @include keyframes(lights-colors-#{$i}) {
    0%, 32%, 100% {
      background: $color1;
      box-shadow: 0 0 22px 5px rgba($color1, 0.6);
    }
    33%, 65% {
      background: $color2;
      box-shadow: 0 0 22px 5px rgba($color2, 0.6);
    }
    66%, 99% {
      background: $color3;
      box-shadow: 0 0 22px 5px rgba($color3, 0.6);
    }
  }

  @include keyframes(lights-glint-#{$i}) {
    0%, 32%, 100% {
      background-image: linear-gradient(to right, rgba($color1, 0), rgba($color1, 0.3), rgba($color1, 0));
    }
    33%, 65% {
      background-image: linear-gradient(to right, rgba($color2, 0), rgba($color2, 0.3), rgba($color2, 0));
    }
    66%, 99% {
      background-image: linear-gradient(to right, rgba($color3, 0), rgba($color3, 0.3), rgba($color3, 0));
    }
  }

  span.light:nth-child(#{length($colors)}n+#{$i}) {
    background: nth($colors, random(length($colors)));
    @include animation(lights-colors-#{$i} 3s infinite);

    &:before {
      content: "";
      position: absolute;
      top: -13px;
      left: 2px;
      height: 30px;
      width: 1px;
      @include transform(rotate(32deg));
      @include animation(lights-glint-#{$i} 3s infinite);
    }
  }
}

/* -------- Glitter --------- */

.glitter {
  position: absolute;
  width: 1px;
  height: 1px;
  background: transparent;

  &:before {
    content: "";
    position: absolute;
    top: 100px;
    width: 1px;
    height: 1px;
    background: transparent;
  }

  &:after {
    content: "";
    position: absolute;
    left: 100px;
    width: 1px;
    height: 1px;
    background: transparent;
  }
}

@function multiple-box-shadow ($n) {
  $value: '#{random(1000)}px #{random(1000)}px #A1B8D0';
  @for $i from 2 through $n {
    $value: '#{$value} , #{random(1000)}px #{random(1000)}px #A1B8D0';
  }
  @return unquote($value);
}

$n: 31;
@for $i from 1 to $n {
  $random-percentage: (($i - 1) / $n) * 90 + 5;
  $random-percentage--before: $random-percentage - 5;
  $random-percentage--after: $random-percentage + 5;
  
  $diamond: multiple-box-shadow(200);
  
  @include keyframes(glitter-#{$i}) {
    0%, 100%, #{$random-percentage--before}%, #{$random-percentage--after}% {
      opacity: 0;
    }
    #{$random-percentage}% {
      opacity: 1;
    }
  }

  .glitter_#{$i} {
    @include animation(glitter-#{$i} 10s infinite);
    box-shadow: $diamond;

    &:before {
      @include animation(glitter-#{$i} 8s infinite);
      box-shadow: $diamond;
    }

    &:after {
      @include animation(glitter-#{$i} 9s infinite);
      box-shadow: $diamond;
    }
  }
}