Падающий снег на CSS

Простой способ наложения падающих снежинок на секции или фотографии всего одним элементом <div class="snowblock"></div>

Пример:

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

HTML:

Данный код должен размещаться в элементе с относительным позиционированием position: relative

CSS:

Чтобы не загружать картинки и не прописывать к ним пути, они добавлены в CSS

Размер снежинок можно задать свойством background-size, а их скорость продолжительностью анимации или позицией сдвига background-position

Установка на фотографии:

Если требуется установить такие снежинки на фотографии или изображения карточек, то удобнее использовать простенький JS-код, чем править все шаблоны.

Для примера возьмем карточки из новостных блоков

Добавим в класс .grid-item .image стиль position: relative; и JS для библиотеки jQuery

В итоге получим такой результат:

Название новости

Текст статьи или новости

Еще текст статьи или новости

И еще текст статьи или новости, который не умещается на одной строчке

Название новости

Текст статьи или новости

Название новости

Текст статьи или новости

Еще текст статьи или новости

И еще текст статьи или новости

Смотрите также:

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

Добавить комментарий:

Ваш комментарий отправлен!