Как украсить любой сайт к Halloween за пару минут

Опубликовано: 22.10.2020

2561

Не нужно лезть и ковырять тему сайта и не нужно устанавливать всякие плагины. Решение подходит абсолютно для любого сайта и на любой CMS. Благодаря подсказкам реализовать сможет даже человек без опыта. Только CSS.

Пример с Компьютера » и пример с Телефона »

На телефоне размер картинок меньше, чтобы не перекрывать контент, т.к. сам блок фиксирован и нельзя закрыть.

Шаг 1. Скачиваем заготовки или делаем свои

Качаем мои заготовки картинок и закачиваем себе на сайт.

Скачать картинки

Можете свои картинки сделать в Photoshop. Главное чтобы с прозрачным фоном, а это формат .png или .svg для иконок.

Шаг 2. Задаем параметры стилей

Теперь нужно вставить параметры стилей представленные ниже в файл стилей вашего сайта (обычно style.css или css.css). Если у вас WordPress, то самый просто способ через админку сделать (Смотреть » или Внешний вид > Настроить > Дополнительные стили).

.left-content_vn {position:relative;}
.left-content_vn::after {
    content: "";
    background-image: 
        url(https://site.ru/путь_до_картинки/hall-2.png),
        url(https://site.ru/путь_до_картинки/hall-3.png),
        url(https://site.ru/путь_до_картинки/hall-1.png),
        url(https://site.ru/путь_до_картинки/hall-5.png),
        url(https://site.ru/путь_до_картинки/hall-4.png),
        url(https://site.ru/путь_до_картинки/hall-6.png),
        url(https://site.ru/путь_до_картинки/hall-7.png);
    background-position: left bottom, 140px bottom, 280px bottom, 420px bottom, 580px bottom, 720px bottom, 860px bottom;
    background-size: auto 100px;
    background-repeat: no-repeat;
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 5px;
    z-index: 999;
}
@media (max-width: 480px){
    .left-content_vn::after {
        background-size: auto 50px;
        height: 50px;
        background-image: 
        url(https://site.ru/путь_до_картинки/hall-2.png),
        url(https://site.ru/путь_до_картинки/hall-1.png),
        url(https://site.ru/путь_до_картинки/hall-4.png),
        url(https://site.ru/путь_до_картинки/hall-6.png),
        url(https://site.ru/путь_до_картинки/hall-7.png);
        background-position: left bottom, 70px bottom, 140px bottom, 210px bottom, 280px bottom, 350px bottom, 420px bottom;
    }
}

Поясняю

Вам нужно будет изменить название class вашей области контента. У меня в примере это .left-content_vn. Ниже поясняю как определить у вас на сайте.
Пропишите правильный путь до картинок у себя на сайте.
Цифры 140px, 280px, 420px и т.п. Таким образом мы задаем отступ слева для каждой следующей картинки. Шаг в 140px - это ширина одной картинки в версии для PC.
А на мобильниках мы картинку сделали меньше в 2 раза и поэтому шаг у нас будет пропорционально меньше, т.е. 70px.
Сами картинки можете менять очередность и их количество. Если количество изменится, то не забудьте добавить соответствующие записи в строки background-position: в двух местах.
Как раз на мобильниках я убрал несколько картинок и оставил более подходящие для маленького размера. Все не влезут в узкий экран и поэтому пришлось выбирать.

Шаг 3. Определим область контента

Данный пункт читать дольше, чем сделать даже новичку. Не пугайтесь.

У меня в примере сделано для темы WP Romb. Если она у вас установлена, то менять название не нужно.

Если используете другую тему, то делаем следующее:

Открываем любую статью на своем сайте и нажимаем в браузере F12 или правой клавишей мыши и Просмотреть код.
В углу нажимаем на иконку курсора в квадрате (Смотреть »).
Теперь не нажимая кнопок мышки просто подведите курсор на область вашего блока с контентом. Он должен подсветиться как на примере (Смотреть »).
А теперь нажмите на левую клавишу мышки, чтобы прошла фиксация выделенного. Снизу мы увидим подсвеченной название нашего блока, которое можно выделить и скопировать (Смотреть »).
Остается заменить название в коде выше на только что вычисленное вами.

Когда праздник закончится, то вам останется только удалить код из файла стилей. А на другой праздник можете использовать соответствующие ему картинки...

Вроде ничего сложного 😉 Дёшево и сердито. Если что пишите в комментариях, помогу.

P.S.: не забывайте чистить кеш в плагине (если такой есть) и кеш браузера (CTRL+F5 или SHIFT+F5).

CSS