Используя приведенные в статье приемы можно придать своему сайту новогоднее настроение.
Новогодняя гирлянда
Сделана с помощью картинки в формате gif. Для работы скачайте картинку и загрузите ее себе на сайт.
Добавьте в код в самый верх, например, после открывающего тега <body>
следующий код:
<div style="height: 30px; background: url(girlianda1.gif) repeat-x 100%;"></div>
В url
укажите точный путь к картинке на сайте. В итоге получится так.
See the Pen
НГ гирлянда 1 by Андрей (@adlibi)
on CodePen.
Вот еще картинка для похожей гирлянды.
Еще одна более сложная, но и красивая гирлянда на основе изображения SVG. Пример работы и весь код видно ниже.
See the Pen
гирлянда 3 by Андрей (@adlibi)
on CodePen.
Еловая ветка
Скачайте картинку с веткой себе на сайт.
И добавьте вверху сайта, можно сразу после тега <body>
следующий код:
<img style="position: absolute; z-index: 1; top: 0px; left: 0px;" width="400px" class="img" src="https://websovet.pro/img/imgr3.png">
Только пропишите точный адрес к картинке в поле url
. Получится примерно так:
See the Pen
Елочная ветка by Андрей (@adlibi)
on CodePen.
Курсор в виде снежинок
Установите данный код себе на сайт:
<script type="text/javascript" src="https://websovet.pro/js/snowcursor.min.js"></script>
и у посетителей курсор при перемещении будет сыпать снежинками, как на примере (подвигайте курсором на синем фоне).
See the Pen
курсор в виде снежинки by Андрей (@adlibi)
on CodePen.