В этом посте покажем способ сделать эффектную контурную обводку текста при наведении — без text-shadow, без копий и без JavaScript.
Как работает:
• Используем -webkit-text-stroke — нативный способ обводки символов прямо в CSS.
• Меняем color: transparent, чтобы текст стал “пустым”, и проявилась только обводка.
• Добавляем плавный transition и получаем чистый и стильный ховер-эффект.
И главное: эффект отключается на тач‑устройствах, чтобы не портить UX!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥26👍17❤13
This media is not supported in your browser
VIEW IN TELEGRAM
Глобальный атрибут
enterkeyhint применяется к элементам формы или для любых элементов с contenteditable. Подсказывает браузеру, как должна выглядеть клавиша ввода на экранной клавиатуре.Варианты значений:
• enterkeyhint="search" — "Поиск"
• enterkeyhint="send" — "Отправить"
• и другие: "go", "next", "done", "previous"
Несмотря на значения next и previous, клавиша
enter всё равно отправит форму. Поэтому лучше использовать их там, где пользователь просто переходит между полями.Please open Telegram to view this post
VIEW IN TELEGRAM
❤30👍17🔥6
Привет! В этом гайде покажу, как реализовать обрезку длинного текста с кнопкой “Ещё” — идеально подходит для отзывов, описаний товаров и карточек постов.
Ключевые моменты:
• HTML: минимальная разметка — один абзац и кнопка.
• CSS: компактная стилизация в виде карточки с тенью, скруглением и элегантной обрезкой строки.
• JavaScript: простой переключатель состояния с изменением текста кнопки и класса.
Это универсальный и полезный элемент, который стоит держать под рукой для любого интерфейса.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥19❤9🤝2
В первой части
мы разобрали базовые методы. Во второй — шаг глубже: перебор свойств, удаление, сравнение, прототипы и скрытые ключи. Эти техники важны при работе с динамическими структурами, формами, валидацией и кастомной логикой.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥22❤14🤝7
This media is not supported in your browser
VIEW IN TELEGRAM
Git Graph — мощный плагин, который показывает древовидную структуру коммитов в виде наглядной граф-схемы: ветки, слияния, история — всё как на ладони.
Особенно удобен, если работаете в нескольких ветках или сопровождаете чужой проект — сразу видно, что где происходило.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21❤8🔥7🤝1
This media is not supported in your browser
VIEW IN TELEGRAM
Свойство
touch-action управляет взаимодействием с сенсорным экраном и напоминает более распространённое свойство pointer-events, которое регулирует взаимодействие мышкой.Примеры использования:
• none — запрещает все типы взаимодействий.
• auto — разрешает все типы взаимодействия.
• manipulation — элемент можно сдвигать и зумить.
• pan-down — элемент можно смещать только если начать движение снизу вверх.
• pan-up — элемент можно смещать только если начать движение сверху вниз.
• pinch-zoom — элемент можно зазумить щипком.
Он может пригодится, например, чтобы отключить обработку прикосновений браузером по умолчанию на сенсорных экранах.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍25❤14🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
frontendchecklist — удобный чеклист всего, что нужно учесть при разработке фронтенд-проекта.
Подходит как для самопроверки, так и в командной работе над продакшн-сборкой.
📌 Оставляю ссылочку: frontendchecklist.io
📣 Code Ready | #ресурсы
Подходит как для самопроверки, так и в командной работе над продакшн-сборкой.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21🔥7❤5
Привет! В этом гайде создадим поле ввода пароля с цветной полоской-индикатором, которая показывает его безопасность во время ввода.
Ключевые моменты:
• HTML: компактная и понятная структура формы.
• CSS: плавная визуализация — от красного до зелёного.
• JavaScript: минимальный, но точный анализ длины, регистра, цифр и символов.
Простой, но полезный элемент UX, который улучшает безопасность и вовлечённость пользователя.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍30❤15🔥8🤝4