Когда часть страницы должна быть визуально видна, но при этом неактивна (например, при открытии модального окна или блокировке интерфейса), inert идеально решает задачу. Элемент с этим атрибутом исключается из фокуса, навигации клавиатурой и событий мыши.
Это современная альтернатива tabindex="-1" + pointer-events: none, и работает чище — особенно в больших UI.
Можете добавить к любому тегу
inert. Это булевый атрибут, так что у него нет значений.Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥19❤12👎1
Всем привет! Сегодня разберём, как создать интерактивную игру "Угадай число" с нуля, используя HTML, CSS и JavaScript.
Ключевые моменты:
• HTML: простая структура игры всего в 7 строк кода.
• CSS: красивый дизайн с градиентами и анимацией.
• JavaScript: генерация случайного числа и логика сравнения.
🔥 — если попробуешь повторить
🤝 — если уже создавал игры
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥34🤝12❤8👍6👎1
Это фундаментальные кирпичики любого кода. Ключевые слова отвечают за область видимости, асинхронность, контекст выполнения, создание объектов и многое другое.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥31🤝15👍10❤8
This media is not supported in your browser
VIEW IN TELEGRAM
Настоящая боль верстальщиков — email-рассылки. Этот сайт показывает, что поддерживается в
Outlook, Gmail и прочих, на уровне CSS-свойств.Очень полезен для тех, кто работает с маркетингом или
B2B.Please open Telegram to view this post
VIEW IN TELEGRAM
👍20❤8🤝5
This media is not supported in your browser
VIEW IN TELEGRAM
Оно позволяет отдельно задать выравнивание только для последней строки абзаца. Особенно полезно при работе с выравниванием по ширине (
justify), когда финальная строка выглядит «обрезанной».Варианты значений:
• auto — выравнивание, как и для остальных строк, кроме случая со значением justify.
• start — в ту же сторону, что и весь остальной текст.
• end — в противоположную сторону от остального текста.
• left — по левому краю.
• right — по правому краю.
• center — по центру.
• justify — по ширине, чтобы заполнить всё пространство.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍21❤11🔥7🤝5
This media is not supported in your browser
VIEW IN TELEGRAM
Web dev — мощный ресурс от Google, где публикуются официальные рекомендации, best practices и примеры по всем современным фишкам HTML, CSS, JavaScript, performance, accessibility и PWA.
📌 Оставляю ссылочку: web.dev
📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🤝17❤10👍8🔥2
Привет! Сегодня делюсь мини-игрой, которая решит один из самых частых вопросов. Нажимаешь кнопку — получаешь предложение. Просто, быстро и весело!
Ключевые моменты:
• HTML: лаконичная и понятная структура с акцентом на UX — только нужное, ничего лишнего.
• CSS: градиентный фон, мягкие тени, анимация кнопки и адаптивный макет.
• JavaScript: простая, но эффективная логика: случайный выбор из массива с блюдами, моментальный отклик без перезагрузки.
🔥 — если попробуешь повторить
🤝 — если уже создавал подобное
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥29❤12👍11🤝10👎1