CSS предлагает программистам различные среды для разработки динамических веб-страниц. Он более приятен, поскольку предоставляет все важные функции и инструменты в одном месте. Таким образом, вам не нужно использовать другие фреймворки. Фреймворк Tailwind в CSS является наиболее широко используемым, поскольку он экономит время пользователя на написание лишнего CSS.
В этом руководстве описывается использование наведения, фокуса и других состояний в Tailwind.
Как использовать наведение, фокус и другие состояния в Tailwind?
При разработке веб-страниц необходимо добавлять динамичные и привлекательные элементы для поддержания интерактивности с пользователями. Функции Tailwind можно использовать для создания интерактивных и динамических страниц без написания дополнительного пользовательского CSS. Некоторые функции — «наведение», «фокус» и «активность», которые помогают сделать дизайн более привлекательным.
Использование варианта Hover в HTML
Свойство hover используется для стилизации элемента HTML, когда пользователь наводит курсор мыши на определенный элемент. Это помогает представить плавный опыт.
Шаг 1. Примените свойство «hover» в HTML.
Создайте HTML-файл и примените свойство hover к какому-либо элементу кода. Чтобы иметь представление, взгляните на код, приведенный ниже:
< тело >
< div сорт '=' 'центр' >
< кнопка сорт '=' 'bg-green-500 hover:bg-blue-500 text-white, шрифт-жирный, закругленный' >
Наведите меня!
< / кнопка >
< / div >
< / тело >
В этом коде:
- Кнопка с названием « Наведите меня! » создается тегом кнопки.
- « bg-зеленый-500 » устанавливает зеленый цвет фона кнопки.
- « при наведении: bg-blue-500 » меняет цвет кнопки с зеленого на синий при наведении на нее мыши.
- Текст на кнопке имеет белый цвет» текст-белый ' и ' жирный шрифт » делает шрифт жирным.
- Форма кнопки установлена на круглую « округлый ».
Шаг 2. Предварительный просмотр вывода
После выполнения приведенного выше кода окончательный вид будет выглядеть следующим образом:
Видно, что кнопка меняет цвет при наведении на нее курсора мыши.
Использование варианта фокуса в HTML
Свойство focus используется для стилизации HTML-элементов таким образом, чтобы, когда пользователь нажимает на элемент, он подсвечивается, чтобы привлечь внимание пользователя.
Шаг 1. Примените свойство Focus в HTML-коде.
Создайте HTML-файл и примените свойство фокуса к какому-либо желаемому элементу. Чтобы получить впечатление, рассмотрите код ниже:
< div >
< / div >
< / тело >
В этом коде:
- « гибкий »класс создает гибкость.
- « оправдывать-центр » оправдывает выравнивание контента по центру.
- « центр предметов Класс ” настраивает объекты по центру экрана.
- « h-экран » устанавливает размер экрана в соответствии с областью просмотра.
- « bg-синий-200 » устанавливает синий цвет фона.
- Создается поле ввода текста.
- « фокус: bg-green-300 » меняет цвет поля ввода на зеленый при нажатии пользователем.
- « w-64 » устанавливает ширину 64 пикселя.
- « ч-10 » устанавливает высоту 10 пикселей.
- « px-4 » добавляет отступы в 4 пикселя сверху и слева.
- « ру-2 » добавляет отступы в 2 пикселя сверху и снизу.
Шаг 2. Предварительный просмотр свойства фокуса
Сохраните HTML-код и откройте созданную им веб-страницу. Затем переместите курсор на поле ввода и щелкните его, и произойдет следующее изменение:
Использование активного варианта в HTML
Это свойство используется для стилизации элементов для условий, когда пользователь динамически нажимает на элемент. Активное состояние — это период времени от стадии активации курсора до его отпущенного состояния.
Синтаксис
активный: { свойство }Определенное свойство CSS применяется к выбранному элементу.
Шаг 1. Примените активный вариант в HTML-коде.
Создайте HTML-файл и примените активное свойство к какому-либо элементу, который в приведенном ниже случае является кнопкой:
< div сорт '=' 'flex justify-center items-center h-screen' >
< кнопка сорт '=' 'bg-green-600 p-4 rounded-md переход-преобразование длительность-400 активное преобразование: масштаб-110' >
Нажми на меня!
< / кнопка >
< / div >
< / тело >
В этом коде:
- « bg-зеленый-600 » устанавливает зеленый цвет фона.
- « р-4 » добавляет отступ в 4 пикселя.
- « округлый-MD » делает форму кнопки округлой.
- « переход-преобразование «используется для преобразования кнопки на небольшой промежуток времени, который задается параметром « преобразование длительности-400 ».
- « активный:масштаб-110 » преобразует кнопку в больший размер.
Шаг 2. Предварительный просмотр вывода
Сохраните приведенный выше код в файле HTML и просмотрите созданную им веб-страницу. Веб-страница будет выглядеть так:
Видно, что размер кнопки увеличивается, когда ее удерживает мышь, и как только ее отпускают, она возвращается в исходное состояние.
Заключение
Чтобы использовать наведение, фокус и другие состояния в Tailwind, используйте предопределенные классы состояний, такие как «hover», и примените к ним некоторые свойства стиля, такие как изменение цвета, создание кольца фокусировки и т. д. Утилиты отображения используются для представления масштабируемого вывода. В этой статье продемонстрирован метод использования наведения, фокуса и других состояний в Tailwind.