🖥 Vision UI Dashboard React – дизайн сайта с инфографикой. Особенность сайта – градиенты синего и разная прозрачность элементов.

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

✍️ SF Pro Text – современный шрифт без засечек из семейства San Francisco. Подходит как для объемных текстов, так и для кратких подписей. Пример есть в сниппете Glide To Reveal

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

💾 Dot Clock Preloader – часы, у которых стрелка формируется из маленьких квадратов. Когда все элементы собраны, часы снова распадаются на пунктирную окружность.

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

💾 Check Micro Animation – чекбокс с анимацией при нажатии. Элемент имеет градиентную заливку, которая заполняет всю его площадь в активном состоянии.

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

💾 Image Grids Animation – анимация для картинок в виде сетки из скругленных рамок. Шаблон подстраивается под ширину каждого изображения.

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

🖥 Fitness Mobile Ios App – дизайн мобильного приложения для фитнеса. Акцент тут сделан на шрифтах, контрастных оттенках и сильно скругленных элементах.

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

🐙 JSON Server – это библиотека с фейковыми REST API. Она поддерживает динамическую генерацию "баз данных", кастомную маршрутизацию и использование модулей.

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

🎨 Цветовая палитра макета "Vision UI Dashboard React"

HEX | RGB
#05CD99 | rgb(5,205,153)
#0075FF | rgb(0,117,255)
#09235E | rgb(9,35,94)

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

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

✍️ DM Serif Display – высококонтрастный шрифт с засечками, разработанный для надписей и заголовков большого размера. Пример шрифта можно посмотреть в сниппете Color Shaders

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

💾 World Places – карточки с 3D-эффектом и размытой внешней тенью. При наведении курсора они плавно переходят в вертикальную позицию.

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

💾 Get Color Palette – фон, который окрашивается в основной цвет с картинки. Для каждого изображения определяются три цвета: основной, вторичный и фоновый.

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

💾 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