Привет! В этом гайде создаём собственный курсор — круглый элемент, который плавно двигается за мышкой, реагирует на клики и увеличивается при наведении на ссылки и кнопки.
Ключевые моменты:
• HTML: контейнер для курсора.
• CSS: стили кружка, плавные переходы, эффекты клика и hover.
• JS: слежение за движением мыши, анимация клика и реакция на интерактивные элементы.
Подходит для креативных сайтов, лендингов, портфолио и интерфейсов с акцентом на стильный интерактив.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤18👍8🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь наконец разобраться в селекторах, комбинаторах и псевдоклассах без скучной теории и документации? CSS Diner - идеальный способ: уровни начинаются с простых селекторов, а дальше всё усложняется, придётся реально думать.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤24👍9🔥6
Атрибут
readonly делает поля формы доступными только для чтения. Пользователь не сможет изменить значение такого поля, но сможет выделить и скопировать текст.Например:
• Отображение данных из профиля, которые нельзя изменить;
• Показ результатов расчётов;
• Демонстрация значений по умолчанию.
Не путайте readonly с
disabled. Неактивные поля не получают фокус и не отправляются с формой, а поля только для чтения (readonly) - получают и отправляются.Please open Telegram to view this post
VIEW IN TELEGRAM
👍18🔥9🤝5
Современное копирование текста через Clipboard API!
Почти каждое веб-приложение сегодня требует возможности быстро скопировать данные: ссылку, токен, код. Для этой задачи используется
Начнём с базовой команды на копирование:
Этот метод возвращает промис, поэтому стоит обернуть его в аккуратную обёртку с обработкой результата:
Создадим функцию
И используем её в нужный момент (например, по клику или по горячей клавише):
🔥 Всё лаконично и нативно. Главное, что это работает во всех современных браузерах.
📣 Code Ready | #практика
Почти каждое веб-приложение сегодня требует возможности быстро скопировать данные: ссылку, токен, код. Для этой задачи используется
navigator.clipboard.Начнём с базовой команды на копирование:
const value = "https://example.com?ref=JS";
navigator.clipboard.writeText(value);
Этот метод возвращает промис, поэтому стоит обернуть его в аккуратную обёртку с обработкой результата:
navigator.clipboard.writeText(value)
.then(() => console.log("✅ Скопировано"))
.catch(err => console.error("❌ Ошибка:", err));
Создадим функцию
copyToClipboard, которую можно переиспользовать в любом месте приложения:function copyToClipboard(text) {
return navigator.clipboard.writeText(text);
}И используем её в нужный момент (например, по клику или по горячей клавише):
copyToClipboard("PROMO2025").then(() =>
console.log("Промокод отправлен в буфер 🎯")
);🔥 Всё лаконично и нативно. Главное, что это работает во всех современных браузерах.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤16👍8🔥4👎1🤝1
Ищи свое направление:
Материалы в канале постоянно пополняются!
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
В этой шпаргалке — методы для работы с картами (Map) в JS: создание, добавление и удаление элементов, проверка наличия ключей, перебор данных и очистка коллекции. Это основа для хранения пар «ключ → значение», где ключи могут быть не только строками, но и объектами или функциями.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥17❤6👍6
В этом посте - анимация, которая имитирует набор текста на клавиатуре. Всё работает на чистом CSS!
Принцип работы:
• Свойство steps() в анимации ограничивает показ текста посимвольно;
• border-right используется как курсор, а keyframes blink заставляет его мигать;
• Количество шагов (steps(n,end)) и ширину в ch подбираем под длину текста;
• Для доступности добавляем prefers-reduced-motion.
Приём отлично подходит для hero-секций, заголовков и промо-блоков, добавляя динамики и «живости» интерфейсу.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍23❤7🔥5
Привет! В этом гайде создаём кнопку «Скопировать» рядом с текстовым полем. При клике содержимое попадает в буфер обмена, а кнопка меняет состояние, показывая обратную связь пользователю.
Ключевые моменты:
• HTML: разметка с input и кнопкой.
• CSS: цвета, тени, интерактивные эффекты наведения.
• JS: использование Clipboard API и асинхронной логики для копирования.
Подходит для форм, сниппетов кода, документации и любых интерфейсов, где важно быстро скопировать данные.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17❤5🔥4