Оглавление:
Это позволяет создавать пользовательский интерфейс интерактивной формы без единой строчки JavaScript. Попробуйте пример ниже:
Этот пример использует :focus-within, плюс псевдо-селектор ::before и некоторую магию позиционирования. Мы рассмотрим детали, но вы можете проверить полный источник ниже.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Селектор :focus-within + псевдоэлементы ::before + абсолютное позиционирование
Все в одном блоке объявлений! Давайте посмотрим на самую важную часть этого примера.
CSS body:focus-within::before { content: «»; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); }
| 123456789 | body:focus-within::before { content: «»; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7);} |
body:focus-within
Этот селектор будет применять стили всякий раз, когда есть фокус … в body! Да, :focus-within работает с любым элементом. Мы берем body только для этого примера.
Вы можете проявить изобретательность и придумать .буквальноЛюбойЭлемент:focus-within и использовать этот селектор, как вам нравится.
body:focus-within::before + абсолютное позиционирование
В нашем примере это означает, что всякий раз, когда какое-либо поле сосредоточено на теле, псевдоэлемент ::before будет создан с этими стилями:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
CSS content: «»; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7);
| 1234567 | content: «»;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.7); |
Свойство content: » требуется для псевдоэлементов, а все остальное — это свойства, используемые для создания темного прозрачного наложения, заполняющего весь экран!
Дополнительные инструменты для правильной работы
Имейте в виду, что вам все равно нужно сделать пару настроек, чтобы наложение работало идеально.
CSS html, body { height: 100vh; }
| 1234 | html,body { height: 100vh;} |
Это гарантирует, что оверлей заполняет весь экран, даже если на странице недостаточно контента.
CSS form { position: relative;
| 12 | form { position: relative; |
position: relative; гарантирует, что наложение будет отображаться под формой. И это все, что касается небольшого трюка на этой неделе. Спасибо за прочтение!
Автор: Vitor Paladini
Источник: webformyself.com
