Frontend Portal
38.5K subscribers
1.61K photos
725 videos
7 files
1.26K links
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки

Сотрудничество, реклама: @devmangx

Менеджер: @Spiral_Yuri

РКН: https://clck.ru/3Fs3wT
Download Telegram
Простой трюк для добавления градиентной заливки к тексту в CSS

Задаем тексту фоновый рисунок с помощью свойства background-clip с значением text. Чтобы эффект был виден, установите цвет текста элемента прозрачным color: transparent;

➡️ @FrontendPortal | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6518💊1
Просыпайся, бро, завезли самый странный React-директив 🤩

➡️ @FrontendPortal
Please open Telegram to view this post
VIEW IN TELEGRAM
😁42💊13🏆3
This media is not supported in your browser
VIEW IN TELEGRAM
Набор CSS анимаций на все случаи жизни

Если хотите добавить анимацию, но не до конца понимаете, как она будет выглядеть, то вам поможет Animista.

Выбирайте из каталога, настраивайте параметры и сразу просматривайте результат. Гибкие настройки помогут адаптировать анимацию под ваши задачи и создать уникальные эффекты.

https://animista.net

➡️ @FrontendPortal | #resourse
Please open Telegram to view this post
VIEW IN TELEGRAM
24👍8🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Быстрый совет по CSS: Используйте ключевое слово CSS unset для сброса всех свойств к их унаследованным значениям, включая значения родителя и значения по умолчанию

Очень удобно использовать в качестве значения свойства all

➡️ @FrontendPortal | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
👍459👨‍💻2
This media is not supported in your browser
VIEW IN TELEGRAM
Эта JS либа решает одну из больных тем для разработчиков

Она позволяет без усилий создавать анимированные gauge-индикаторы для дашбордов. В комплекте куча настроек и опций, чтобы идеально подогнать визуализацию данных под твои нужды.

Если ты не в курсе: gauge (или спидометр) - это такие индикаторы в стиле спидометра, которые часто используют в дашбордах для отображения скорости, производительности или прогресса.

Простое, но мощное решение, чтобы сделать UI более интерактивным и живым ✌️

Забираем здесь

➡️ @FrontendPortal | #resourse
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3423💊3
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍469🏆3
This media is not supported in your browser
VIEW IN TELEGRAM
Полезная находка: npoint

Инструмент для мокинга публично доступных API-эндпоинтов, идеально подходит для получения несекретных данных.

Сайт здесь, а GitHub тут

➡️ @FrontendPortal | #resourse
Please open Telegram to view this post
VIEW IN TELEGRAM
19🔥8👍6
Реализация ступенчатой анимации

В этом примере мы добавляем CSS-переменные для каждого элемента, чтобы указать его позицию в списке

Затем используем её, чтобы добавить увеличивающуюся задержку для последовательных элементов

➡️ @FrontendPortal | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4219🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Наткнулся на демку комбинации нового компонента React <ViewTransition> и Framer Motion. Эти штуки просто огонь 🤩

➡️ @FrontendPortal
Please open Telegram to view this post
VIEW IN TELEGRAM
56🔥32👍15💊1
This media is not supported in your browser
VIEW IN TELEGRAM
Эта JS-либа позволяет добавлять на сайт спойлер-эффекты, такие же, как в Telegram 👀

Она называется Spoiler.js, и это очень прикольный способ оживить твой сайт

GitHub: spoilerjs

➡️ @FrontendPortal | #resourse
Please open Telegram to view this post
VIEW IN TELEGRAM
👍74🔥239
Создайте красивую анимацию списка аватаров в CSS всего за 4 шага

Grid в CSS уникален тем, что позволяет накладывать элементы друг на друга для создания подобных эффектов

➡️ @FrontendPortal | #CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
50👍20🔥4😁1