Ёлки для украшения блога

Традиция украшать елку на Рождество, и Новый год появилась в Германии в XVI веке. В то время елки украшали свечами, сладостями и яблоками. В дальнейшем эта традиция распространилась по Европе, а затем и по всему миру. 
Точную дату появления традиции украшать ёлку на Новый год в России назвать сложно, так как она менялась на протяжении истории. Однако известно, что в допетровской Руси ёлки не украшали, так как этот обычай пришёл к нам из Европы благодаря Петру I. Он ввёл традицию празднования Нового года и повелел ставить на праздник ёлку. Сегодня предлагаю посмотреть несколько ёлочек, которые можно установить на сайт перед Новым годом или Рождеством. 

Елка 1

У ёлочки мигает свет от звезды. Выглядит ёлка так:
ёлка 1
<div class="container"> <div class="tree"> <div class="tree-triangle1"></div> <div class="tree-triangle2"></div> <div class="tree-triangle3"></div> <div class="ornament or1"> <div class="shine"></div> </div> <div class="ornament or2"> <div class="shine"></div> </div> <div class="ornament or3"> <div class="shine"></div> </div> <div class="ornament or4"> <div class="shine"></div> </div> <div class="ornament or5"> <div class="shine"></div> </div> <div class="ornament or6"> <div class="shine"></div> </div> <div class="trunk"></div> <div class="star-light"></div> <div class="star"></div> <div class="star-highlight"></div> </div> </div> <style> .container { position: relative; width: 380px; height: 380px; margin: auto; margin-top: 20vh; background: #0b1a5e; border-radius: 120px; z-index: -2; } .tree { position: absolute; width: 100%; height: 100%; left: 13%; top: 5%; } .tree-triangle3 { position: absolute; width: 66%; height: 36%; bottom: 20%; left: 3.5%; background: #034f33; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .tree-triangle2 { position: absolute; width: 53%; height: 33%; bottom: 35%; left: 10%; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background: #046944; z-index: 2; } .tree-triangle1 { position: absolute; width: 42%; height: 25%; bottom: 50%; left: 15.5%; background: #038052; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); z-index: 3; } .trunk { position: absolute; width: 10%; height: 16%; background: #66503e; z-index: -1; bottom: 5%; left: 32%; } .ornament { position: absolute; width: 10%; height: 10%; border-radius: 50%; box-shadow: 0 0 3px #033b26; /* background: #eb5252; */ z-index: 4; } .shine { position: absolute; width: 55%; height: 55%; top: 10%; right: 11%; border-radius: 50%; background: white; filter: opacity(60%); } .or1 { left: 28%; top: 34%; background: #0742d9; } .or2 { left: 40%; top: 45%; background: #c91212; } .or3 { left: 20%; top: 49%; background: #dbb700; } .or4 { left: 34%; top: 62%; background: #0742d9; } .or5 { left: 50%; top: 69%; background: #dbb700; } .or6 { left: 15%; top: 68%; background: #c91212; } .star { position: absolute; width: 20%; height: 20%; background: #ffe380; clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); left: 26.5%; top: 11%; z-index: 4; } .star-highlight { position: absolute; width: 20%; height: 20%; background: #fff1bf; clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 50% 70%, 50% 60%, 50% 46%, 50% 36% ); left: 26.5%; top: 11%; z-index: 4; } .star-light { position: absolute; width: 20%; height: 20%; background: #fff1bf; filter: opacity(0.7); border-radius: 50%; left: 26.5%; top: 11%; z-index: 3; animation: star 3s ease-in-out infinite; } @keyframes star { 100% { transform: scale(0.5); } 50% { transform: scale(1.1); } 0% { transform: scale(0.5); } } </style>
В коде можно поменять цвета оформления:
Фон - выделила в коде красным
Цвета треугольников ёлки 3 шт. - выделила зелёным
Цвета ёлочных игрушек (6 шт.) - выделила в коде оранжевым цветом
Цвет звезды (2 шт.) - салатовым
Цвет сияния звезды - синим цветом

Ёлка 2

У этой ёлочки мигает не только звезда, но и игрушки.
Ёлки для украшения блога
<div class="container"> <div class="tree"> </div> <div class="ornament large orange or1"> <div class="shine"></div> </div> <div class="ornament medium blue or2"> <div class="shine"></div> </div> <div class="ornament small green or3"> <div class="shine"></div> </div> <div class="ornament small pink or4"> <div class="shine"></div> </div> <div class="ornament large purple or5"> <div class="shine"> </div> </div> <div class="ornament medium purple or6"> <div class="shine"></div> </div> <div class="ornament medium blue or7"> <div class="shine"></div> </div> <div class="ornament large pink or8"> <div class="shine"></div> </div> <div class="ornament medium orange or9"> <div class="shine"></div> </div> <div class="ornament medium green or10"> <div class="shine"></div> </div> <div class="ornament large pink or11"> <div class="shine"></div> </div> <div class="ornament blue large or12"> <div class="shine"></div> </div> <div class="star-light"></div> <div class="star"></div> <div class="star-highlight"></div> <div class="trunk"></div> <div class="floor"></div> </div> <style> .container { position: relative; /* background: #1c1c1c; */ width: 460px; height: 460px; margin: auto; /* border: 1px solid; */ /* border-radius: 100px; */ margin-top: 15vh; } .tree { position: absolute; background: #2e7055; width: 65%; height: 70%; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); bottom: 13%; left: 18%; z-index: 2; } .floor { position: absolute; width: 35%; height: 15%; border-radius: 50%; background: #69122a; bottom: -8%; left: 32%; } .star { position: absolute; width: 20%; height: 20%; background: #ffdc5e; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); left: 40.5%; top: 5%; z-index: 3; } .star-highlight { position: absolute; width: 20%; height: 20%; background: #ffedad; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 50% 70%, 50% 60%, 50% 46%, 50% 36%); left: 40.5%; top: 5%; z-index: 3; } .star-light { position: absolute; width: 20%; height: 20%; background: #ffefb5; filter: opacity(.7); border-radius: 50%; left: 40.5%; top: 5%; z-index: 2; animation: star 3s ease-in-out infinite; } .trunk { position: absolute; height: 15%; width: 10%; background: #2e2713; bottom: 0; left: 45%; z-index:1; } .ornament { position: absolute; border-radius: 50%; z-index: 3; } .large { height: 10%; width: 10%; animation: lights 1.5s linear infinite; } .medium { height: 7%; width: 7%; animation: lights 1.4s linear infinite; } .small { width: 5%; height: 5%; animation: lights 1.2s linear infinite; } .orange { background: #FDC590; } .pink { background: #f799d2; } .green { background: #9af5c6; } .blue { background: #7dd4ff; } .purple { background: #afa6ff; } .or1 { left: 33%; top: 42%; } .or2 { top: 26%; left: 52%; } .or3 { top: 38%; left: 48%; } .or4 { top: 29%; left: 41.5%; } .or5 { top: 59%; left: 35%; } .or6 { top: 41%; left: 59%; } .or7 { top: 51%; right: 42%; } .or8 { top: 55%; right: 26%; } .or9 { top: 67%; left: 55%; } .or10 { top: 75%; left: 42%; } .or11 { top: 70%; left: 21%; } .or12 { top: 73%; right: 22.5%; } .shine { position: absolute; width: 60%; height: 60%; background: white; border-radius: 50%; filter: opacity(48%); top: 6%; right: 10%; } @keyframes lights { 100% { filter: brightness(.7); } 50% { filter: brightness(1.2); } 0% { filter: brightness(.7); } } @keyframes star { 100% { transform: scale(.5); } 50% { transform: scale(1.1); } 0% { transform: scale(.5); } } </style>
По аналогии можно менять цвета оформления и этой ёлки, как и в предыдущем коде. Все названия частей ёлки имеют свой цвет, их и нужно менять.
Проверить работу ёлочек можно в визуальном редакторе.
Ёлочки нашла на сайте Сodepen.

Ваши комментарии:

Комментарии со спамом удаляются.