💾 Shader Image Transition – переключатель фото с анимированной загрузкой. Каждая картинка выстраивается из крупных пикселей.

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

🐙 Wtfjs – репозиторий с забавными особенностями JavaScript, которые полезно знать каждому фронтенд-разработчику. Каждый кейс разбирается на конкретных примерах.

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

💾 Timeline Seemless Loop – лоадер в виде CD-диска. Эффект объема создается за счет теней от центра и изменения формы краев.

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

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

HEX | RGB
#ECEADE | rgb(236, 234, 222)
#C28C7E | rgb(194, 140, 126)
#A2AA7B | rgb(162, 170, 123)

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

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

✍️ Geist – геометрический шрифт без засечек. Идеально подходит для заголовков, логотипов, постеров и крупных надписей. Пример есть в сниппете Anchor Positioning Hover Cards

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

💾 CSS Single Element Goey Spinner – лоадер из "жидких" капель, которые перетекают друг в друга по направлению движения. Лучше всего будет выглядеть на белом фоне.

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

💾 List Click On Expand – вертикальная галерея с раскрывающимся фото. Если нажать на боковой текст, то картинка схлопнется обратно.

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

💾 React Glow Cards – карточки с неоновой подсветкой рамок и кнопок. Чем ближе к курсору, тем белее свечение.

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

💾 Text Geometry – стилизованный 3D-текст с анимацией волн, выполненный на Three.js. Текст можно приближать и поворачивать во все стороны.

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

🖥 Performance Driven Gym – дизайн лендинга для спортзала, выполненный в оттенках синего и серого. Дизайн отличается крупными заголовками и четким разделением секций.

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

🐙 Text Behind Image – полезный инструмент для создания текста на заднем плане фотографии. Проект имеет открытый исходный код.

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

✍️ Pretendard – шрифт без засечек, созданный для улучшения читаемости экранов. Часто используется в текстах пользовательских интерфейсов. Пример шрифта есть в дизайне Glass Flowers 3D Assets

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

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

HEX | RGB
#FDA155 | rgb(253, 161, 85)
#F75EB1 | rgb(247, 94, 177)
#2C20BE | rgb(44, 32, 190)

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

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

🖥 Glass Flowers 3D Assets – набор PNG-изображений стеклянных цветов. Есть три варианта картинок: золотые, сине-розовые (с фильтром) и черно-белые.

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

💾 Aura Menu – меню с 3D-фоном, который медленно меняет свои цвета. При наведении курсора заголовки подсвечиваются и прокручиваются вверх.

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

🖥 Social Factory – дизайн обложки лендинга. Его особенности - контрастная графика и геометрия, броские заголовки, а также оттенки красного.

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

💾 Infinite Draggable Image Gallery – бесконечная монохромная фотогалерея с увеличением каждой картинки. Страницу нельзя прокручивать вверх и вниз, но можно перетаскивать.

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

🎨 Цветовая палитра макета "Performance Driven Gym"

HEX | RGB
#E9ECFF | rgb(233, 236, 255)
#808CFD | rgb(128, 140, 253)
#3C3E4C | rgb(60, 62, 76)

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

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

💾 Made With CSS – анимированное кольцо с текстом. Так как оно вращается против часовой стрелки, слова легко считываются справа налево.

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

🐙 Computer Science – подборка курсов по CS на английском языке. Тут вы найдете информацию о том, как устроены языки программирования и архитектура проектов.

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

💾 Neon Glass Context Menu – полупрозрачное меню с неоновой подсветкой, которое вызывается правой кнопкой. Оттенок свечения можно менять с помощью двух шкал.

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