Вот пошаговый туториал о том, как реализовать hover-указатель для элементов списка в CSS
Это очень просто и занимает всего несколько строк кода.
Мы используем кастомный маркер списка, чтобы поставить эмодзи в качестве маркера, а затем меняем его цвет при hover
Код на CodePen✌️
➡️ @FrontendPortal | #CSS
Это очень просто и занимает всего несколько строк кода.
Мы используем кастомный маркер списка, чтобы поставить эмодзи в качестве маркера, а затем меняем его цвет при hover
Код на CodePen
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍29🔥9❤6😁6
This media is not supported in your browser
VIEW IN TELEGRAM
Добавь скролл-эффекты нового уровня в свои веб-проекты
Эта библиотека позволяет добавить к страницам аккуратные storytelling-эффекты при прокрутке: плавные, контролируемые и максимально вовлекающие
Забираем с GitHub: scrollytelling
➡️ @FrontendPortal | #resourse
Эта библиотека позволяет добавить к страницам аккуратные storytelling-эффекты при прокрутке: плавные, контролируемые и максимально вовлекающие
Забираем с GitHub: scrollytelling
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥39❤8👍3🏆3🤔2
Простой способ создания эффекта бесконечной карусели с помощью CSS
Видели ли вы подобную анимацию на сайтах в разделе «Партнеры/клиенты»? Вот простая схема создания этого фальшивого эффекта бесконечной карусели🦆
В качестве дополнительного совета, если вы не хотите дублировать элементы вручную или указывать количество элементов в CSS, вы можете использовать некоторые манипуляции JavaScript DOM и пользовательские свойства CSS (вот пример продвинутой реализации)
➡️ @FrontendPortal | #tutorial #OldButGold
Видели ли вы подобную анимацию на сайтах в разделе «Партнеры/клиенты»? Вот простая схема создания этого фальшивого эффекта бесконечной карусели
В качестве дополнительного совета, если вы не хотите дублировать элементы вручную или указывать количество элементов в CSS, вы можете использовать некоторые манипуляции JavaScript DOM и пользовательские свойства CSS (вот пример продвинутой реализации)
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤40👍26🔥10🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Вышел React Email 5.0
Лучший способ создавать email-шаблоны с помощью React.
✓ Теперь с поддержкой тёмного режима
✓ Совместимость с Tailwind 4
✓ 8 новых компонентов
Предпросмотр, линтер и многое другое:
→
➡️ @FrontendPortal | #resourse
Лучший способ создавать email-шаблоны с помощью React.
✓ Теперь с поддержкой тёмного режима
✓ Совместимость с Tailwind 4
✓ 8 новых компонентов
Предпросмотр, линтер и многое другое:
→
npx create-email@latestPlease open Telegram to view this post
VIEW IN TELEGRAM
👍37❤15💊5🔥4😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Swapy
Это инструмент для создания drag-and-drop интерфейсов всего за пару строк кода
Работает с любым фреймворком: React, Vue, Angular, Svelte или даже без них.
Гибко настраивается, позволяет выделять слоты и элементы для перетаскивания, добавлять анимации, и отслеживать изменения.
Лёгкий в установке и супер понятный в использовании.
➡️ @FrontendPortal | #resourse
Это инструмент для создания drag-and-drop интерфейсов всего за пару строк кода
Работает с любым фреймворком: React, Vue, Angular, Svelte или даже без них.
Гибко настраивается, позволяет выделять слоты и элементы для перетаскивания, добавлять анимации, и отслеживать изменения.
Лёгкий в установке и супер понятный в использовании.
npm install swapy
Please open Telegram to view this post
VIEW IN TELEGRAM
👍47❤18🔥6🤔3😁1
This media is not supported in your browser
VIEW IN TELEGRAM
Создание липкого заголовка в СSS
Блоки с «липким» позиционированием ведут себя как
Пока блок не достиг указанного расстояния от края окна браузера, он ведёт себя как относительно спозиционированный. Когда блок достигнет этой точки, то станет вести себя, как будто мы указали position: fixed
Когда таких заголовков несколько, они накладываются друг на друга, и пользователю виден последний из них
➡️ @FrontendPortal | #CSS #tutorial
Блоки с «липким» позиционированием ведут себя как
position: relative и position: fixed одновременноПока блок не достиг указанного расстояния от края окна браузера, он ведёт себя как относительно спозиционированный. Когда блок достигнет этой точки, то станет вести себя, как будто мы указали position: fixed
Когда таких заголовков несколько, они накладываются друг на друга, и пользователю виден последний из них
Please open Telegram to view this post
VIEW IN TELEGRAM
👍45❤17🔥7💯1
This media is not supported in your browser
VIEW IN TELEGRAM
Действительно классный гайд по тому, как прокачать навык работы с дейтпикерами в JS
Ты найдёшь примеры, понятные объяснения и отличный визуальный формат, который помогает разобраться во всех тонкостях создания дейтпикеров на чистом JavaScript.
Читайте здесь👍
➡️ @FrontendPortal | #article
Ты найдёшь примеры, понятные объяснения и отличный визуальный формат, который помогает разобраться во всех тонкостях создания дейтпикеров на чистом JavaScript.
Читайте здесь
Please open Telegram to view this post
VIEW IN TELEGRAM
👍24❤12💯3🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Ленивая загрузка автоматически воспроизводимых видео, которые находятся ниже первого экрана
Установите
Посмотреть это в действии: тык
➡️ @FrontendPortal | #tip by Shripal Soni
Установите
preload="none" и удалите атрибут autoplay у видео, чтобы оно не загружалось по умолчанию. Затем, используя API Intersection Observer, мы можем воспроизводить видео, когда оно становится видимым в области просмотраПосмотреть это в действии: тык
Please open Telegram to view this post
VIEW IN TELEGRAM
👍37❤15🔥5