» » Ёлки на CSS

Ёлки на CSS

Продолжаем украшать сайт перед Новым 2021 годом и Рождеством. Сегодня в интернете нашла ёлочки для сайта на css. Ёлки можно поставить в боковую панель или в подвал. Добавив код в гаджет.
К картинке можно добавить текст поздравления читателей с праздниками.
Так же можно установить картинки в статью, добавив код в режиме XTML в редакторе.

Ёлочка первая

Коды ёлочек
Елочка мигает шариками. Размер елки можно изменить, поменяв ширину SVG элемента в классе #tree. Посмотреть все ёлки можно на тестовом блоге.
Код:
<svg id="tree" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0" y="0" viewbox="-1694.2 483.2 199.3 285.2" xml:space="preserve">
    <g id="tree">
        <rect x="-1605.6" y="697.1" class="st0" width="21.7" height="71.3"/>
        <polygon class="st1" points="-1656.1 616.8 -1634.8 612 -1670.6 676.1 -1648.5 671.1 -1694.2 753 -1595 730.5 -1595 507.4 "/>
        <polygon class="st2" points="-1494.9 753 -1540.6 671.1 -1518.5 676.1 -1554.4 612 -1533.1 616.8 -1594.7 506.8 -1595 507.4 -1595 730.5 -1594.7 730.4 "/>
    </polygon></polygon></rect></g>
    <g id="lights">
        <g id="blue-lt">
            <circle class="blue-lt g1" cx="-1575" cy="706.1" r="9"/>
            <circle class="blue-lt g2" cx="-1621.3" cy="641" r="7"/>
            <circle class="blue-lt g3" cx="-1665.5" cy="732.8" r="7"/>
            <circle class="blue-lt g1" cx="-1600.3" cy="668.5" r="7"/>
        </circle></circle></circle></circle></g>
        <g id="blue-dk">
            <circle class="blue-dk g3" cx="-1578.3" cy="570.8" r="7"/>
            <circle class="blue-dk g1" cx="-1538" cy="718.6" r="7"/>
            <circle class="blue-dk g2" cx="-1594.8" cy="610.3" r="7"/>
        </circle></circle></circle></g>
        <g id="red-md">
            <circle class="red-md g1" cx="-1635.6" cy="681.7" r="9"/>
            <circle class="red-md g1" cx="-1570.3" cy="634" r="9"/>
            <circle class="red-md g2" cx="-1607.3" cy="711.6" r="7"/>
        </circle></circle></circle></g>
        <g id="gold-lt">
            <circle class="gold-lt g1" cx="-1612.3" cy="585.8" r="9"/>
            <circle class="gold-lt g2" cx="-1631.6" cy="705.6" r="7"/>
        </circle></circle></g>
        <g id="gold-dk">
            <circle class="gold-dk g2" cx="-1572.3" cy="604.7" r="7"/>
            <circle class="gold-dk g3" cx="-1561.3" cy="681.7" r="7"/>
        </circle></circle></g>
    </g>
    <polygon class="st3" points="-1600.5 499.9 -1618.1 499.9 -1603.8 510.3 -1609.3 527 -1595 516.7 -1595 483.2 "/>
    <polygon class="st4" points="-1572 499.9 -1589.6 499.9 -1595 483.2 -1595 516.7 -1580.8 527 -1586.2 510.3 "/>
</polygon></polygon></svg>
<style>
#tree {
    width: 220px;
    display: block;
    margin: 0 auto;
}
.st0 {
    fill:#332C28;
}
.st1 {
    fill:#0f690f;
}
.st2 {
    fill:#388f38;
}
.st3 {
    fill:#a60505;
}
.st4 {
    fill:#d90000;
}
.red-md {
    fill: #aa1231;
    animation: 0.6s red-flash ease-in-out infinite;
}
@keyframes red-flash {
    40% {
        fill: #ea385c;
    }
    80% {
        fill: #aa1231;
    }
}
.gold-lt {
    fill: #c1881c;
    animation: 0.6s gold-lt-flash ease-in-out infinite;
}
@keyframes gold-lt-flash {
    40% {
        fill: #e7b75c;
    }
    80% {
        fill: #c1881c;
    }
}
.blue-lt {
    fill: #1f3e64;
    animation: 0.6s blue-lt-flash ease-in-out infinite;
}
@keyframes blue-lt-flash {
    40% {
        fill: #386fb1;
    }
    80% {
        fill: #1f3e64;
    }
}
.blue-dk {
    fill: #0f1f2f;
    animation: 0.6s blue-dk-flash ease-in-out infinite;
}
@keyframes blue-dk-flash {
    40% {
        fill: #28527c;
    }
    80% {
        fill: #0f1f2f;
    }
}
.gold-dk {
    fill: #69512a;
    animation: 0.6s gold-dk-flash ease-in-out infinite;
}
@keyframes gold-dk-flash {
    40% {
        fill: #b28947;
    }
    80% {
        fill: #69512a;
    }
}
.g1 {
    animation-delay: 0s;
}
.g2 {
    animation-delay: 0.4s;
}
.g3 {
    animation-delay: 0.8s;
}
</style>

Вторая ёлочка

Ёлочка обычная, но вокруг неё вращается звезда.
Вторая ёлочка
 <svg version="1.1" id="xtree" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewbox="0 0 50 50">
    <g>
        <g>
            <polygon id="star" points="22.64,7.797 25,6.557 27.359,7.797 26.909,5.17 28.816,3.31 26.181,2.925 25,0.535 23.82,2.925 21.183,3.31 
            23.092,5.17 " />
        </polygon></g>
        <g>
            <g>
                <polygon points="34.784,19.016 35.636,19.016 25,8.381 18.218,15.162             "/>
            </polygon></g>
            <g>
                <path d="M34.506,27.173l-1.98,0.349c0.323,0.192,0.553,0.532,0.553,0.938c0,0.611-0.496,1.105-1.106,1.105
                c-0.611,0-1.104-0.496-1.104-1.105c0-0.266,0.105-0.498,0.259-0.688l-3.443,0.611c0.85,0.074,1.524,0.761,1.524,1.631
              c0,0.916-0.743,1.656-1.656,1.656c-0.919,0-1.658-0.741-1.658-1.656c0-0.655,0.387-1.209,0.938-1.479l-4.348,0.772
                c0.299,0.151,0.51,0.456,0.51,0.813c0,0.51-0.411,0.922-0.921,0.922c-0.509,0-0.918-0.412-0.918-0.922
                c0-0.242,0.096-0.456,0.248-0.62l-10.007,1.776l-2.513,2.513l27.466,2.003l-1.467-1.468h6.776L34.506,27.173z"/>
            </path></g>
            <g>
                <path d="M16.694,25.974l-3.181,3.182l24.243-4.304l-4.407-4.404l-6.46-1.504c0.371,0.354,0.604,0.853,0.604,1.407
                c0,1.077-0.872,1.95-1.949,1.95c-1.076,0-1.946-0.873-1.946-1.95c0-0.877,0.58-1.607,1.375-1.852l-3.319-0.773
                c0.12,0.203,0.205,0.426,0.205,0.676c0,0.756-0.614,1.37-1.37,1.37c-0.754,0-1.367-0.614-1.367-1.37
                c0-0.476,0.258-0.876,0.628-1.121l-2.963-0.689l-2.425,2.425h3.715l-6.957,6.957L16.694,25.974L16.694,25.974z"/>
            </path></g>
            <g>
                <path d="M43.016,42.46l-4.811-4.813L33.437,37.3c0.258,0.265,0.42,0.623,0.42,1.018c0,0.81-0.654,1.465-1.462,1.465
                c-0.807,0-1.46-0.655-1.46-1.465c0-0.481,0.251-0.889,0.614-1.153l-8.133-0.594c0.205,0.207,0.332,0.488,0.332,0.801
                c0,0.634-0.512,1.147-1.146,1.147c-0.632,0-1.144-0.511-1.144-1.147c0-0.381,0.197-0.701,0.484-0.909l-3.998-0.294
                c0.54,0.32,0.907,0.9,0.907,1.571c0,1.011-0.82,1.829-1.832,1.829c-1.008,0-1.827-0.818-1.827-1.829
                c0-0.762,0.466-1.414,1.128-1.689l-2.73-0.199l-6.606,6.608h15.829l-1.257,6.979h6.889l-1.259-6.978H43.016z"/>
            </path></g>
        </g>
    </g>
</svg>
<style>
#star {
    animation: spin 6s linear infinite;
    transform-origin: center;
    fill: #eb2700;
}
#xtree 
{
    margin: 0 auto;
    width: 200px;
    display: block;
    fill: #3c9c33;
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}
</style>
Красным в коде выделила размер ёлки. Ёлки присмотрела на сайте https://atuin.ru/

Ёлочки — картинки

О том, как добавить простые ёлочки-картинки я писала в других статьях. Но повторю код, который добавляется так же, как и два предыдущих.
<div align="center"><img alt="описание картинки"src="адрес картинки" width="105" height="126"></div>
Картинка будет по центру, если нужно сместить влево/вправо, прописываем left или
right. Отметила в коде синим.
Описание картинки — жёлтым.
Прописываем свои размеры картинки — отметила зелёным.
Прописываем адрес картинки — отметила в коде красным. Устанавливать можно картинки png и gif c прозрачным и цветным фоном и картинки с фоном jpg. Ищем на сайтах:
png
https://photoshop-kopona.com/ru/obzor-vseh-kategoriy.html
http://www.lenagold.ru - есть и гифки.
https://www.freepng.ru/
https://imgpng.ru/
https://www.klipartz.com/ru
https://www.pngwing.com/ru
https://pngicon.ru/
https://www.uihere.com/
gif 
https://my.mail.ru/community/impress/photo/8153
https://gifer.com/ru/gifs/christmas
https://www.gifki.org/
https://miranimacii.ru/
Картинки можно ставить любые — праздничные, новогодние открытки. Новогодние предметы и атрибутику — снегурочка, часы, бокалы, ёлки, подарки, дед Мороз и Санта Клаус, шары ёлочные, мишура и т.д. и т.п.

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

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