В этом посте рассмотрим прием, который дает CSS новую супер способность: реагировать на содержимое без единой строчки JavaScript.
Как работает:
• Селектор :has() позволяет родителю “заглядывать” внутрь — и менять стиль, если есть нужный элемент.
• Например, контейнер сам поймёт, что в нём появилась картинка — и адаптирует отступы или фон.
• Работает в современных браузерах (Chrome, Safari, Edge) — но уже применяется в продакшене.
Идеально для карточек, адаптивных блоков, динамически загружаемого контента — стилизация становится умной!
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍34❤12🔥10
Grid даёт контроль над размещением элементов по строкам и колонкам, включая выравнивание, области и отступы.
На картинке — ключевые свойства CSS Grid с наглядными иллюстрациями:
grid-template-columns, grid-area, gap, justify-content, align-items, place-self и многое другое.Сохрани, чтобы быстро вспоминать синтаксис и поведение сетки в разных ситуациях!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24👍10❤5🤝2
🔥15👍7❤5😁3🤝1
С их помощью можно обрабатывать большие объёмы данных по частям, отменять долгие запросы и управлять выполнением кода с высокой точностью. Эти возможности особенно актуальны при создании чатов, стриминговых приложений, сложных UI и интерактивных SPA.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤22👍13🔥6
Всем привет! Сегодня покажу, как сделать стильную кнопку лайка, которая не просто меняет цвет при клике, а ещё и анимирует сердечко с эффектом "биения", плюс ведёт живой подсчёт лайков с плавной анимацией.
Ключевые моменты:
• HTML: простая структура — кнопка с сердечком и счетчиком.
• CSS: flexbox для выравнивания, keyframes для анимации биения, hover-эффекты с transform.
• JavaScript: toggle активного состояния, обновление счетчика и анимация масштабирования.
🔥 — если хочешь побольше подобного
🤝 — если попробуешь сделать
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤25🔥23👍9🤝5
Когда часть страницы должна быть визуально видна, но при этом неактивна (например, при открытии модального окна или блокировке интерфейса), 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