🐙 Eidos – альтернатива приложению Notion, которая работает оффлайн. Проект написан на языке TypeScript и имеет открытый исходный код.

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

💾 CSS Responsive House – анимированная иллюстрация, которая меняется в зависимости от положения шкалы. Этот прием можно использовать в карточках товаров и на сайтах недвижимости.

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

🎨 Цветовая палитра макета "Beauty And Skincare Landing Page"

HEX | RGB
#D1E3E3 | rgb(209,227,227)
#93CCDF | rgb(147,204,223)
#2B6477 | rgb(43,100,119)

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

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

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

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

🖥 Cosmetic & Skin Care Branding – дизайн для бренда косметики. Самое интересное здесь - шрифты, яркие цвета и графическое оформление карточек.

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

💾 3D Preloader – необычный 3D-лоадер с элементами в виде подвижных столбиков. Чем выше столбик, тем ярче он окрашивается в синий цвет.

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

🐙 Academic Pages – готовый шаблон GitHub Pages для научных сайтов, в который можно подгружать PDF-файлы. Подходит для размещения публикаций, постов, портфолио, лекций и резюме.

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

✍️ Fjalla One – экранный шрифт без засечек средней контрастности. Имеет хорошую читаемость и приспосабливается к разным размерам экранов. Пример шрифта есть в сниппете Hamburgers

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

🎨 Цветовая палитра макета "Dream Job App"

HEX | RGB
#B7CBCC | rgb(183,203,204)
#FF8041 | rgb(255,128,65)
#2C696C | rgb(44,105,108)

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

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

💾 Cylinder Toggle – объемный переключатель в виде бочонка с реалистичной тенью. После нажатия он перекатывается и меняет цвет.

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

🖥 Fender Bender Guitar Tune – концепт дизайна приложения для музыкального магазина. Его особенности – это сочные цвета, контрасты, ретро-шрифты и черные контуры у карточек.

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

💾 Atom Preloader – сложный лоадер в форме атома с элементами, которые вращаются в разные стороны. Кольца крутятся как в одной плоскости, так и по собственной оси.

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

✍️ Varela Round – шрифт со скругленными буквами, который подходит для небольших заголовков, текстов на карточках и подписей к иллюстрациям. Пример шрифта есть в сниппете 3D Preloader

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

💾 Longcat Scroll – индикатор скролла в виде большого длинного кота. Слева показана длина кота в пикселях. В исходной позиции появляется всплывающее окно с прогрессом.

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

🎨 Цветовая палитра макета "Cosmetic & Skincare Branding"

HEX | RGB
#FEF6A5 | rgb(254,246,165)
#FF7A01 | rgb(255,122,1)
#0224AA | rgb(2,36,170)

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

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

💾 Stacked Cards with Autoplay – карточки, которые перелистываются автоматически. Активная карточка имеет слабую оранжевую подсветку в виде рамки. Подсветка не исчезает во время анимации.

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

🐙 Aos – библиотека анимаций для JavaScript, сокращенно от "Animate On Scroll". Она позволяет не только пользоваться готовыми анимациями скролла, но и кастомизировать их для любого проекта.

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

💾 Simple Grid With Reveal – галерея, в которой изображение при наведении курсора становится цветным и визуально отдаляется. Сама карточка переходит из темного режима в светлый.

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

💾 Loading Bar – анимация загрузки с прямоугольными элементами. Можно использовать ее как единый блок для страницы, а можно выбрать один из четырех квадратов.

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

🖥 DesignCode UI – дизайн-система для создания мобильных приложений. Она включает в себя полупрозрачные скругленные карточки и элементы с разноцветными градиентами.

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

🐙 Annyang – небольшая javaScript-библиотека для распознавания речи. Она дает возможность управлять сайтом с помощью голосовых команд.

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