Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно использовать выбранный нами фреймворк, и он становится основным подходом к каждому новому продукту. Однако существует и другой подход к разработке. Вы начинаете со старого доброго HTML/CSS и создаете полностью функциональный инструмент. Затем вы добавляете новые возможности с помощью JavaScript. Это называется прогрессивным совершенствованием.
Прогрессивное улучшение гарантирует, что ваш сайт будет работать в максимальном количестве браузеров и конфигураций. HTML и CSS прошли долгий путь с 90-х годов. Даже без JavaScript вы можете обеспечить большую визуальную привлекательность и функциональность.
Недавно я написал статью о проверке форм с помощью Quasar Framework и Vue.js. Я хотел вернуться к этой форме и показать, как много из этой формы можно воссоздать, используя только HTML и CSS.
Если вас интересует только конечный результат, вы можете перейти к нижней части статьи чтобы увидеть завершенную разметку и стилизацию.
Если вы не знакомы с тегами section, header и footer, то это новые семантические элементы. На странице может быть много тегов заголовков и колонтитулов, если они относятся к собственному тегу section.
Вы заметите, что теги label идут после тегов input. Это сделано для того, чтобы мы могли использовать селектор + в CSS для изменения их стиля в зависимости от различных состояний ввода.
Вы заметите, что мы используем rem для изменения размеров. Сделав базовый размер шрифта 8px, вы можете изменять размер шрифта с коэффициентом 8 (1: 0.125rem, 2: 0.25rem... 16: 2rem и т.д.). Это делает все связанным с размером шрифта и сохраняет пропорциональность при изменении размера шрифта пользователем для удобства чтения.
Мы также используем фоновое изображение для рисования границы. Таким образом, граница не вычисляется как часть размера ввода и станет важной, когда мы перейдем к шагу анимации.
Примечание: Я использую SCSS. Вам нужно будет предварительно обработать его, используя что-то вроде node-sass в файл CSS под названием material.css, прежде чем использовать его.
Теперь у нас есть форма, которая выглядит следующим образом...
Не вся форма может быть создана без JavaScript. Но мы должны быть в состоянии получить следующее:
В настоящее время мы хотим, чтобы метки закрывали текст, который мы вводим в поле ввода. Вместо этого мы хотим, чтобы label перемещались над курсором, когда он имеет фокус.
Для этого нам нужно добавить переход к label, чтобы она анимировалась при изменении ее свойств.
label {
...
transition: all ease 300ms}
Затем мы захотим изменить свойства label, чтобы переместить ее вверх с новым цветом, когда у ввода будет фокус. Внутри нашего стиля form.material .field input мы добавим.
&:not(:placeholder-shown) + label
,&:focus + label {
color: $primary;
font-size: 1.5rem;
top: 0;
}
В каждый из тегов input нужно добавить пустой атрибут placeholder, чтобы сработал селектор :not(:placeholder-shown).
<input type="name" name="name" id="name" placeholder=" "/>
Теперь у нас должно получиться что-то похожее на это.
Когда пользователь фокусируется на поле ввода, мы хотим, чтобы линия в нижней части поля анимировалась в соответствии с основным цветом. Мы также хотим, чтобы линия оставалась немного темнее, если поле ввода после потери фокуса.
Для этого мы добавим несколько фоновых изображений и анимируем их независимо друг от друга.
input {
background-image:
linear-gradient(
to bottom,
transparent calc(100% - 0.25rem),
$primary 0.25rem
),
linear-gradient(
to bottom,
transparent calc(100% - 0.125rem),
#ccc 0.125rem
);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 0, 100%;
...
transition: all ease 300ms;
&:focus {
background-size: 100%, 100%;
}
&:not(:placeholder-shown) {
background-image:
linear-gradient(
to bottom,
transparent calc(100% - 0.25rem),
$primary 0.25rem
),
linear-gradient(
to bottom,
transparent calc(100% - 0.125rem),
#999 0.125rem
);
}
...
}
Эта стилизация добавляет второй фон синей линии, который накладывается поверх светло-серой линии. Это изображение скрыто благодаря тому, что его размер установлен на 0%. Когда вход получает фокус, размер фона изменяется на 100%, а переход обрабатывает анимацию.
Теперь у нас есть вход, который выглядит следующим образом.
Одной из самых простых вещей для проверки являются обязательные поля. Все, что вам нужно, это атрибут required для любого требуемого ввода.
<input type="name" ... required/>.
Давайте сделаем еще один шаг вперед, добавив новый цвет $negative и добавив красный символ * после каждой метки для обязательного ввода.
$negative: tomato;
...
input {
...
&:required + label::after {
color: $negative;
content: ' *';
}
...
}
О проверке электронной почты автоматически позаботится ее тип.
Для проверки номера телефона и пароля мы будем использовать атрибут pattern и regex.
<input
type="tel "
pattern="[(][0-9]{3}[)] [0-9]{3} [-] [0-9]{4}"..
./>
<input
type="password "
pattern="^(?=.{12,})(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*\-_+=]).*$"...
/>
Чтобы получить базовый эффект пульсации, мы будем использовать метод, аналогичный подчеркиванию, который мы использовали для ввода. Вместо линейного градиента мы будем использовать радиальный градиент.
button.material {
..
.
background-image:
radial-gradient(circle at center, #0003 50%, transparent 50%);
background-repeat: no-repeat;
background-position: center center center;
background-size: 0;
...
&:focus {
background-size: 225%;
}
&.flat {
background-color: transparent;
box-shadow: none;
&:focus,
&:hover {
background-color: #eee;
}
}
&.primary {
...
background-image:
radial-gradient(circle at center, #fff3 50%, transparent 50%);
...
&:focus,
&:
hover {
box-shadow: 0 0.125rem 0.325rem 0.125rem #0009;
}
}}
Теперь у нас должны быть кнопки, которые ведут себя подобным образом.
Теперь у нас должна быть форма, которая выглядит и функционирует примерно так.
Наш HTML должен выглядеть примерно так.
А наш CSS должен выглядеть примерно так.
Даже без JavaScript мы смогли создать форму, которая следует многим рекомендациям Material, гарантирует, что все необходимые поля были заполнены, а правильные данные были введены перед отправкой.
Стандартные HTML и CSS оказываются мощными сами по себе, и ими не стоит пренебрегать даже при использовании фреймворков для веб-приложений.
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.