Жидкие кнопки для вашего сайта

Подборка из шести кнопок, с которыми пользователю будет интересно взаимодействовать даже до момента нажатия на них. Сделаны на связке HTML + SCSS + JavaScript.

Посмотреть код и забрать их к себе в проект можно тут:

https://codepen.io/Zaku/pen/eRmRxz

#codepen #ui #фронтенд

Интересная анимация загрузки с помощью CSS

Можете попробовать повторить такой лоадер, если хотите потренироваться в создании CSS-анимации. Здесь всего несколько DIV'ов, которые анимированы с помощью @keyframes.

Посмотреть код можно на codepen.

#codepen #css

Image Hover Effect на чистом CSS

Этот проект предлагает создание необычного эффекта при наведении на изображение — текст получает эффекты негатива, но только на некоторую область.

Как повторить такой эффект у себя в проекте, можно узнать тут:

https://codepen.io/ig_design/pen/WNrWezW

#codepen #css

Pass Strength Shield

Это анимированное поле ввода пароля, созданное с помощью React, GSAP и DrawSVGPlugin3. Картинка над полем меняется в зависимости от того, соответствует пароль требованиям или нет.

Как повторить такой проект, можно узнать на его странице:

https://codepen.io/lerida/pen/MWjPxRW

#codepen

Необычные часы с «кодовым» циферблатом, реализованные с помощью CSS и JavaScript

Посмотреть код проекта можно здесь: https://codepen.io/MarkBoots/pen/zYbjaoR

#codepen

Анимация глича для текста при наведении cоздана на чистом CSS. Посмотреть код и попробовать проект можно по ссылке:

https://codepen.io/oscar-jite/pen/yLwoeLE

#codepen

Этот снежный шар сделан с помощью Canvas. Логика прописана в JavaScript, а стили в CSS. Никаких сторонних библиотек, препроцессоров и прочего.

Можете убедиться сами, посмотрев код проекта на codepen: https://codepen.io/Calleb/pen/pvzgBpa

#codepen #canvas