Добавляем снеговика и сугробы снизу сайта
Небольшое Новогоднее украшение, которое подсмотрел на одном буржуйском сайте. Понравилось) Делюсь с вами "рецептом".
Снизу экрана появится сугроб и снеговик. При этом они будут "ползти" за экраном, т.е. всегда будут на виду. На момент написания этой статьи и до конца праздников на этом блоге будет стоять данная штука (почистите кеш браузера если не видите CTRL+F5).
Скачиваем эти 2 картинки и помещаем в папку images в папке с вашим шаблоном сайта (можно в любую другую папку на хостинге, просто потом подмените пути к ней):
Картинка 1 и Картинка 2
Открываем файл footer.php вашего шаблона, и прямо перед закрывающим </body> вставляем
Осталось добавить стили оформления в ваш файл 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;}
}Здесь посмотрите где прописываются пути до картинок (в 2 местах).
По весне вам понадобятся стеклоочистители. Посмотрите обзор и сравнение https://tehnoobzor.com/tests-reviews/home_appliances/1904-sravnitelnyy-obzor-stekloochistiteley-karcher-i-thomas.html двух популярных моделей.
Если хотите отобразить снеговика слева экрана, то для .snowman параметр right меняем на left, а так же добавляем transform: scale(-1, 1);
При помощи параметра @media screen and я задал: если разрешение экрана меньше 1024px по ширине - не показывать эти украшения. Чтобы на мобилах не мешало смотреть. Можете задать свою цифру вместо 1024.
Все.
