🐙 Front End Web Development Resources – репозиторий с полезными материалами для разработчиков. Здесь есть ссылки на полезные статьи, блоги, Youtube-каналы, фреймворки и библиотеки иконок.

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

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

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

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

HEX | RGB
#ABCF9C | rgb(171,207,156)
#719EA6 | rgb(113,158,166)
#142F1F | rgb(20,47,31)

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

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

💾 Neu Times – оригинальные часы с цифрами на подвижных пластинках. Каждому элементу соответствует максимально возможное количество цифр.

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

✍️ EB Garamond – классический шрифт с засечками, вдохновленный шрифтами 1500-х годов. Подходит для небольших надписей. Шрифт можно увидеть в заголовках однотонных карточек в макете Colour Palettes/Moodboards

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

💾 Mouse Balls Animation – эффект для курсора в виде разноцветных кругов. Каждый элемент со временем тускнеет и уменьшается в размере.

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

🖥 Beauty And Skincare Landing Page – изысканный дизайн лендинга для магазина косметики. Его особенности – это утонченные шрифты и приглушенные оттенки бирюзового.

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

💾 Blob – фоторамка с подвижными границами. Область фотографии отталкивается от курсора и почти сразу возвращается на свое место.

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

🐙 Open UI – инструмент для создания верстки с помощью нейросети. На основе текстового описания генерируется дизайн и код страниц.

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

✍️ Anton – адаптация традиционного рекламного шрифта без засечек для экранов цифровых устройств. Пример можно увидеть в сниппете Template Plants Animated

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

💾 X-Ray Text Hover Effect – эффект "рентгена" для текста. При наведении курсора он показывает только обводку букв и убирает их заливку.

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

🎨 Цветовая палитра макета "Virtual Reality Landing Page Concept"

HEX | RGB
#FAB9F1 | rgb(250,185,241)
#524686 | rgb(82,70,134)
#270631 | rgb(39,6,49)

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

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

💾 Text Particle – текст, составленный из множества мелких анимированных частиц. С помощью панели управления можно менять скорость, направление движения, отступ и время существования частицы.

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

💾 Bouncy Star Rating – прыгающие звездочки для рейтинга. Если между двумя нажатыми элементами есть другие, то анимируются сразу все последние звездочки.

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

💾 Transform Toggles – переключатель карточек на чистом CSS. В активном состоянии фон становится непрозрачным, а нижняя линия растягивается на всю ширину карточки.

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

✍️ Aglet Mono – моноширный шрифт со скругленными буквами, который подходит для небольших заголовков. Пример можно увидеть в сниппете Single Keyframe Tricks

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

🖥 Dream Job App – обложка для мобильного приложения в оттенках светло-зеленого и оранжевого. Его фишки - контраст, геометрические фигуры и шрифт с засечками.

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

🐙 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