💾 Wave – анимация загрузки, похожая на волну. Элемент построен из линий, которые меняют свою длину и тем самым создают очертания предмета.

Сайтодел | #сниппет #css

🖥 Meal Planner UI Kit – дизайн приложения для подбора плана питания. В интерфейсах использованы оттенки фиолетового, а также прозрачные элементы в черной обводке.

Сайтодел | #макет #figma

🐙 Date.js – библиотека, которая парсит, валидирует и отображает даты. Все изменения возвращают новый экземпляр даты, что помогает избежать ошибок в коде.

Сайтодел | #репозиторий #github

✍️ IBM Plex Sans – это корпоративный шрифт IBM без засечек, который поддерживает различные языки и алфавиты мира. Посмотреть его использование можно в сниппете Simple Grid With Reveal

Сайтодел | #шрифт

🎨 Цветовая палитра макета "Fitness Mobile Ios App"

HEX | RGB
#F9F3E4 | rgb(249,243,228)
#F8C06D | rgb(248,192,109)
#3B867F | rgb(59,134,127)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра

💾 Cards – карточки, которые разворачиваются как книжка. В каждой из них есть анимированная кнопка и место для изображения.

Сайтодел | #сниппет #css

💾 Split Slick Slideshow – слайдер с двумя вертикальными частями. При скролле изображение разбивается пополам, а заголовки плавно прокручиваются.

Сайтодел | #сниппет #css

💾 Card Blur – эффект для неактивных карточек который возникает при наведении курсора. Здесь применяется не только размытие, но и затемнение элементов.

Сайтодел | #сниппет #css

🖥 Bentolio – дизайн для сайта-портфолио в теплых розовых оттенках. В дизайне много секций, а небольшой размер текстов и пустые пространства в них делают сайт визуально гармоничным.

Сайтодел | #макет #figma

🐙 PeerTube – видеохостинг с открытым исходным кодом, созданный на Typescript. Его главное отличие от других платформ – децентрализованное хранение данных.

Сайтодел | #репозиторий #github

🎨 Цветовая палитра макета "Meal Planner UI Kit"

HEX | RGB
#EEE2FF | rgb(238,226,255)
#8A47EB | rgb(138,71,235)
#27005F | rgb(39,0,95)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра

✍️ Suranna – шрифт для новостных публикаций. Он имеет особую форму из-за большей толщины в нижней части букв. Пример есть в дизайне Cosmetic & Skin Care Branding

Сайтодел | #шрифт

💾 Inner Glow Card – прозрачная карточка с внутренней неоновой подсветкой. Рамка имеет волнообразную анимацию, цвета плавно перетекают друг в друга.

Сайтодел | #сниппет #css

💾 Water Distortion – эффект воды для изображения. Анимированная картинка отображается при помощи тега <canvas>.

Сайтодел | #сниппет #css

💾 Activity Card – карточка для отображения статистики за каждый день недели. При наведении курсора появляется подсказка с числом за конкретный день.

Сайтодел | #сниппет #css

🖥 Interior Design Website – дизайн лендинга для студии дизайна. Акцент делается на скругленные детали и контраст размеров шрифта.

Сайтодел | #макет #figma

🐙 JavaScript Exercises – список задач для тренировки навыков написания кода. Чтобы начать работать, нужно клонировать репозиторий.

Сайтодел | #репозиторий #github

✍️ Cinzel – шрифт с классическими пропорциями, в основу дизайна которого легли древнеримские надписи. Посмотреть пример можно в дизайне Beauty And Skincare Landing Page

Сайтодел | #шрифт

🎨 Цветовая палитра макета "Bentolio"

HEX | RGB
#F9F1EF | rgb(249,241,239)
#FADDD9 | rgb(250,221,217)
#F8AFA6 | rgb(248,175,166)

⚠️ Цвет копируется одним кликом!

Сайтодел | #палитра

💾 GSAP Grid – сетка из анимированных SVG-изображений в ретро-стиле. Можно использовать в качестве иллюстраций для сайтов.

Сайтодел | #сниппет #css

💾 Cat Toggle Button – переключатель светлой и темной темы в виде котика. Изображение детализировано и нагружено смыслом, чтобы пользователю не было скучно.

Сайтодел | #сниппет #css