Добавляем снеговика и сугробы снизу сайта

Небольшое Новогоднее украшение, которое подсмотрел на одном буржуйском сайте. Понравилось) Делюсь с вами "рецептом".

Screenshot_1
Снизу экрана появится сугроб и снеговик. При этом они будут "ползти" за экраном, т.е. всегда будут на виду. На момент написания этой статьи и до конца праздников на этом блоге будет стоять данная штука (почистите кеш браузера если не видите CTRL+F5).

Скачиваем эти 2 картинки и помещаем в папку images в папке с вашим шаблоном сайта (можно в любую другую папку на хостинге, просто потом подмените пути к ней):
Картинка 1 и Картинка 2

Открываем файл footer.php вашего шаблона, и прямо перед закрывающим </body> вставляем

<span class="snowman"></span>
<span class="snow-layer"></span>

Осталось добавить стили оформления в ваш файл 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 местах).

Если хотите отобразить снеговика слева экрана, то для .snowman параметр right меняем на left, а так же добавляем transform: scale(-1, 1);

При помощи параметра @media screen and я задал: если разрешение экрана меньше 1024px по ширине - не показывать эти украшения. Чтобы на мобилах не мешало смотреть. Можете задать свою цифру вместо 1024.

Все.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 14 комментариев
  1. seoonly.ru (28 комм.) says:
    http://seoonly.ru/

    Снеговик крут))

  2. Andrew (1 комм.) says:

    Ух ты! Отличный хак! Прям праздничное настроение уже))
    Статья отличная, но для расширения практических примеров я б добавил еще вариант для левостороннего его расположения (указал бы что нужно отразить картинки и какие стили поменять).
    Также дать совет не ставить его на сайты, у которых фоновый цвет - белый. Снеговик сливается с фоном))

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Для лево добавил.
      А уже по поводу фона - это сами меняйте картинку на более темную или не ставьте вообще. Я не могу за вас все продумать и решить. Думайте логически.

  3. Bahus (4 комм.) says:
    http://dendrblog.ru

    Прикольненько. Просто и со вкусом. Добавил себе.

  4. Николай (1 комм.) says:
    http://www.webmedinfo.ru

    Спасибо! Отлично смотрится.

  5. Ксенья Юрьевна (16 комм.) says:
    http://naschdomidacha.ru

    Странно все скопировала и вставила, но ничего не отобразилось, фон сайта голубой.

  6. Aндрей (129 комм.) says:
    http://zarobitok.ru

    Отличный ход украсить блог/сайт под НГ праздники.

  7. Сергей Удалов (2 комм.) says:
    http://bloggerseo.ru/

    А как сделать, чтобы весной он растаял?

  8. Павел (1 комм.) says:
    http://vscode.ru/

    Спасибо! Полезная и интересная статья!

  9. Дмитрий (1 комм.) says:
    http://koskomp.ru

    Блин. Жалко, что раньше на ваш сайт не набрел, когда снежные украшения были актуальны и я придавал своему сайту новогодний вид. Но буду знать. Спасибо)

  10. Антон (1 комм.) says:
    http://algoholic.in.ua

    Эх... Жаль, что так поздно наткнулся на статейку. В следующем году обязательно возьму на заметку 🙂

  11. Lucky (18 комм.) says:
    http://lucky.zp.ua

    Добрый день, поставил себе новогодний праздник =)
    Не подскажите, как расширить снег на весь экран? а то он у меня почему то режется на 2./3 экрана =(

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Добрый.
      Вынесите span снега за пределы div id="page"
      Не туда просто вставили.

      • Lucky (18 комм.) says:
        http://lucky.zp.ua

        Спс. Помогло =)

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.71MB | MySQL:76 | 0,437sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html