Сайтодел | GitHub, Верстка, Сайты, FullStack
28.5K subscribers
985 photos
66 videos
28 files
1.73K links
FullStack-материалы от Senior-разработчика для WEB-специалистов

Сотрудничество: @CodingLead

Разработка сайтов любой сложности 👨🏻‍💻

РКН: shorturl.at/qinly
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Dandelion – подвижная структура, которая вращается сама по себе и реагирует на курсор. Название переводится с английского как "одуванчик".

Сайтодел | #сниппет #css
🖥 SH freud UI Kit – дизайн для трекера настроения. Здесь использованы теплые, нежные оттенки и светло-кремовый фон, который ассоциируется с расслаблением и уютом.

Сайтодел | #макет #figma
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Electric Border – карточка с анимированной рамкой на чистом CSS. Рамка имеет легкое размытое свечение снаружи и внутри.

Сайтодел | #сниппет #css
🖥 Data Visualization – дизайн элементов инфографики в ярких, но глубоких тонах. Графики и диаграммы особенно стильно смотрятся на темном фоне.

Сайтодел | #макет #figma
✍️ Mona Sans –шрифт, вдохновленный гротесками индустриальной эпохи. Этот шрифт - вариативный, то есть его внешний вид в цифровых продуктах можно настраивать. Пример есть в сниппете Design Wormhole

Сайтодел | #шрифт
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Scratch Discount Ticket Animation – эффект "стирания пленки" с промокодом внутри. В самом конце по экрану падает конфетти.

Сайтодел | #сниппет #css
🐙 Front End Web Development Resources – подборка полезных ресурсов. Здесь есть ссылки на курсы, статьи, инструменты для работы, фреймворки и челленджи.

Сайтодел | #репозиторий #github
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Complementary Color Flowers – фон, который при нажатии генерирует сочетания цветов. Оба цвета – комплементарные, то есть противоположные друг другу на цветовом круге.

Сайтодел | #сниппет #css
🎨 Цветовая палитра макета "50 Gradient Texture Abstract Elements"

HEX | RGB
#FCBD54 | rgb(252, 189, 84)
#F37FA2 | rgb(243, 127, 162)
#607BE2 | rgb(96, 123, 226)

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

Сайтодел | #палитра
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Slider Animations – карточки с анимированными элементами. Слайды переключаются автоматически, но также можно их листать, нажимая на точки внизу.

Сайтодел | #сниппет #css
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Dynamic Folding – плавный эффект сложения фотографии. При создании была использована библиотека Create.js.

Сайтодел | #сниппет #css
This media is not supported in your browser
VIEW IN TELEGRAM
💾 GSAP Cards Dance – зацикленная анимация для карточек. Ее можно остановить, нажав на кнопку "Пауза" в левом верхнем углу экрана.

Сайтодел | #сниппет #css
✍️ Anton – это адаптация традиционного рекламного шрифта без засечек. Формы букв и начертания были оптимизированы для использования в качестве полужирного шрифта в современных веб-браузерах. Пример шрифта есть в заголовках: "Coffee Shop Mobile App"

Сайтодел | #шрифт
🐙 Phaser – это бесплатный и быстрый фреймворк для создания 2D-игр. Работает с HTML5, JavaScript, TypeScript, а также поддерживает Canvas и WebGL.

Сайтодел | #репозиторий #github
This media is not supported in your browser
VIEW IN TELEGRAM
💾 GSAP Cards Dance – зацикленная анимация для карточек. Ее можно остановить, нажав на кнопку "Пауза" в левом верхнем углу экрана.

Сайтодел | #сниппет #css
💾 Collage – шаблоны для презентаций с яркими геометрическими иллюстрациями и декоративным шрифтом. Дизайн выглядит динамично и живо.

Сайтодел | #макет #figma
🐙 Awesome Low Level Design – репозиторий с полезными материалами по архитектуре ПО. Здесь есть описания основных понятий и паттернов, а также вопросы для собеседований.

Сайтодел | #репозиторий #github
✍️ Georgia – шрифт с засечками, разработанный специально для удобочитаемости даже в мелких элементах веб-страниц. Пример можно посмотреть в сниппете Animated Covers

Сайтодел | #шрифт
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Neural Noise – анимированный фон, напоминающий нейроны. Светящиеся линии реагируют на курсор, но не на нажатие экрана.

Сайтодел | #сниппет #css
🖥 AR Museum Guide – дизайн для мобильного приложения музея. Ощущение объема здесь создается за счет многослойности, детализированных фото и полупрозрачных элементов.

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