Сайтодел | GitHub, Верстка, Сайты, Вайбкодинг
25.4K subscribers
1.34K photos
106 videos
28 files
2.39K links
FullStack-материалы от Senior-разработчика для WEB-специалистов

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

РКН: shorturl.at/qinly
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Signature Animation – поле ввода, которое превращает текст в имитацию рукописной подписи. Эффект работает только с латиницей.

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

Сайтодел | #репозиторий #github
🎨 Цветовая палитра макета "XIDE Serenity Springs":

HEX | RGB
#E5DFD6 | rgb(229,223,214)
#B19061 | rgb(177,144,97)
#3C2418 | rgb(60,36,24)

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

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

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

Сайтодел | #сниппет #css
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Atom Preloader – сложный лоадер в форме атома с элементами, которые вращаются в разные стороны. Кольца крутятся как в одной плоскости, так и по собственной оси.

Сайтодел | #сниппет #css
✍️ Varela Round – шрифт со скругленными элементами букв, который подходит для экранных текстов и мелких заголовков. Пример использования можно посмотреть в сниппете Clean Toast Notification

Сайтодел | #шрифт
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Alex the CSS Husky – анимация из нескольких элементов, написанная с помощью SCSS. Ее можно использовать для заголовка сайта или для страницы 404.

Сайтодел | #сниппет #css
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Order Button Animation – анимация, которая появляется после нажатия кнопки вместо лоадера. Когда заказ принят, кнопка возвращается обратно.

Сайтодел | #сниппет #css
✍️ REM – шрифт без засечек, который подходит для экранов устройств и брендинга продуктов. Пример можно посмотреть в сниппете "45 CSS Only Buttons"

Сайтодел | #шрифт
🐙 Layui – бесплатная UI-библиотека с веб-компонентами для быстрого и легко создания интерфейсов. Фреймворк основан на принципах минимализма и содержит в себе только самое необходимое.

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

Сайтодел | #репозиторий #github
🐙 Eruda – консоль для мобильных браузеров. Отображает JavaScript-логи, показывает локальное хранилище, информацию о файлах cookie и статусы запросов.

Сайтодел | #репозиторий #github
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Alex the CSS Husky – анимация из нескольких элементов, написанная с помощью SCSS. Ее можно использовать для заголовка сайта или для страницы 404.

Сайтодел | #сниппет #css
🎨 Цветовая палитра макета "XIDE Serenity Springs":

HEX | RGB
#E5DFD6 | rgb(229,223,214)
#B19061 | rgb(177,144,97)
#3C2418 | rgb(60,36,24)

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

Сайтодел | #палитра
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Futuristic Card Effect – карточка со слайд-шоу из фотографий. Для футуристичного эффекта есть фильтр в мелкую полосочку и неоновая подсветка текста.

Сайтодел | #сниппет #css
💾 Glassmorphism Buttons – кнопки, которые имитируют полупрозрачное стекло и подсвечиваются мягким неоновым светом в активном состоянии.

Сайтодел | #сниппет #css
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Balkan Style Portfolio Gallery – лендинг для портфолио дизайнера. Детализация каждой работы находится в выпадающем окне.

Сайтодел | #сниппет #css
✍️ Outfit – красивый и элегантный геометрический шрифт без засечек. Подойдет для текстов статей и заголовков на сайтах. Пример можно посмотреть в дизайне приложения Fitness App

Сайтодел | #шрифт
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Animated Weather Cards – карточки с реалистичными спецэффектами. Некоторые элементы (капли дождя, снег, листья) попадают из карточки на саму страницу.

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