Для начала необходимо сделать разметку HTML, которая может быть в принципе любая для нашей формы. Я использую такую:
<form action="" method="post">
<input name="name" id="name" placeholder="Ваше имя" type="text">
<input name="password" id="password" placeholder="Ваш пароль" type="password">
<input value="Авторизироваться" type="submit">
</form>
Что здесь примечательного? Использование атрибута placeholder для показа текста-помощника, который автоматически будет скрыт при наборе пользовательского текста. Ну и собственно все по поводу формы.
Теперь поговорим про эффекты кнопок формы. Во-первых, надо сделать эффект наводки курсора на форму, а во-вторых надо реализовать эффект активности поля, чтобы было понятно, что мы редактируем именно нужное поле. В качестве эффектов я выбрал box-shadow, который достаточно хорошо помог реализовать то, что можете видеть на изображении записи.
Эффект наведения полностью равен эффекту активности, только стоить уточнить, что для создания условия наведения надо использовать
:hover
А для активности поля:
:focus
Теперь сделаем не размытое, четкое смещение вниз на 5 пикселей, то есть имитация тени для наших input.
form input:hover, form input:focus {
-webkit-box-shadow: 0px 5px 0px 0px #1565c0;
-moz-box-shadow: 0px 5px 0px 0px #1565c0;
box-shadow: 0px 5px 0px 0px #1565c0;
}
box-shadow работает следующим образом:
- Первое число — горизонтальное смещение
- Второе число — вертикальное смещение
- Третье — радиус размытия
- Четвертое — разброс тени
Еще есть параметр outline и insert они пишутся перед всеми параметрами и показывают где будет тень: за объектом или внутри его.
box-shadow: insert 0px 5px 0px 0px #1565c0;
Ну собственно это все, таким же образом можно добавить эффект ошибки ввода и прочие эффекты.