Новогодние украшения для сайта

Используя приведенные в статье приемы можно придать своему сайту новогоднее настроение.

Новогодняя гирлянда

Сделана с помощью картинки в формате gif. Для работы скачайте картинку и загрузите ее себе на сайт.

гирлянда

Добавьте в код в самый верх, например, после открывающего тега <body> следующий код:

<div style="height: 30px; background: url(girlianda1.gif) repeat-x 100%;"></div>

В url укажите точный путь к картинке на сайте. В итоге получится так.

See the Pen
НГ гирлянда 1
by Андрей (@adlibi)
on CodePen.

Вот еще картинка для похожей гирлянды.

girlianda2

Еще одна более сложная, но и красивая гирлянда на основе изображения 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.

Оцените статью
Инструкции для Web
Добавить комментарии