Новогоднее украшение блога — снеговик и сугробы внизу экрана

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

Как украсить сайт к новому году

Чтобы сделать задуманное, сначала скачайте две картинки снега и снеговика. Эти картинки нужно положить в папку images вашего шаблона.
Далее в файл шаблона footer.php перед тегом </body> вставляем следующий код

[php]<span class=»snowman»></span>
<span class=»snow-layer»></span>[/php]

Необходимо добавить стили в файл шаблона style.css (возможно у вас он называется по другому, но расширение будет .css или в некоторых шаблонах в настройках есть возможность добавления пользовательских стилей)

[css].snowman {
background: transparent url(«images/snowman.png») no-repeat scroll right top / 80px auto;
bottom: 0;
display: block;
height: 110px;
position: fixed;
right: 2%;
width: 100px;
z-index: 3;
}
.snow-layer {
background: transparent url(«images/snow-layer.png») repeat-x scroll center top / auto 20px;
bottom: 0;
display: block;
height: 20px;
position: fixed;
width: 100%;
z-index: 1;
}
@media screen and (max-width: 1024px){
.snowman, .snow-layer {display: none;}
}[/css]

В коде предусмотрено скрытие снеговика при просмотре на смартфонах. Так же можете поместить снеговика с левой стороны, заменив

[css].snowman {
background: transparent url(«images/snowman.png») no-repeat scroll right top / 80px auto;
bottom: 0;
display: block;
height: 110px;
position: fixed;
right: 2%;
width: 100px;
z-index: 3;
}[/css]

на

[css].snowman {
background: transparent url(«images/snowman.png») no-repeat scroll left top / 80px auto;
transform: scale(-1, 1);
bottom: 0;
display: block;
height: 110px;
position: fixed;
right: 2%;
width: 100px;
z-index: 3;
}[/css]

Вот в принципе и все. Вы смогли украсить сайт к Новому Году. Счастья и удачи вам в новом году!

Очередной шедевр от Enjoykin чисто отдохнуть

Статья помогла? Поблагодари автора, он ведь старался