Web-разработка: Лайфхаки

Недавно я заметил эффект падающего снега в Telegram, и мне захотелось сделать нечто подобное для моих сайтов. С самого начала я решил сделать нечто очень простое, но при этом красивое. Дизайн Начал я с разработки самой снежинки и примерной зарисовки анимации. Написание кода После разработки дизайна я приступил к разработке HTML-кода: Стоит заметить, что скриншота не хватило, чтобы полностью поместить код снежинки, но не стоит переживать, ведь это всего лишь SVG картинка. Также я создал блок с id «place_for_snow», туда мы будем помещать наши будущие снежинки...

Данный эффект далеко не новый, все мы его знаем по Material Design. В этой статье я покажу свою версию этого эффекта для сайта на примере обычной кнопки. Стоит помнить, что данный эффект может быть применён не только к кнопке, но и к любому другому блоку. Создаём кнопку Для начала я накидал дизайн нашей будущей кнопки: Для начала надо просто добавить кнопку на сайт. Для этого я написал следующий код: HTML: И, конечно же, CSS: Стоит обратить внимание на стили элемента wave_elem, а именно на position и overflow...