В этой статье мы познакомимся с CSS и сделаем симпатичную форму входа на HTML.
Для начала давайте сразу набросаем очень простенькую и НЕ красивую форму :
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
<h1>Вход</h1>
<div>
<input>
<label>Email</label>
</div>
<div>
<input>
<label>Пароль</label>
</div>
<button>Войти</button>
</form>
<body>
</html>
Да уж, согласитесь убогенько. Что бы сделать все красивей мы воспользуемся CSS(Cascading Style Sheets — каскадные таблицы стилей) — язык описания внешнего вида документа, написанного с использованием языка разметки. Преимущественно используется как средство описания внешнего вида веб-страниц, написанных с помощью языков разметки HTML и XHTML.
Первым делом.
Первым делом мы подключаем внешний файл стилей c помощью тега <link> , атрибут href="style.css" указывает на путь к файлу.
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>Теперь давайте создадим файл style.css и напишем первый стиль в нем . Разместим нашу форму по середине экрана в центре.
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Тут мы используем Flexbox систему компоновки элементов на веб-странице — display: flex; Выравниваем по осям justify-content: center; align-items: center; Ну и body {} говорит нам что этот стиль применяется ко всему телу тега <body>.
Теперь создадим стиль для всей формы , добавим тень , поменяем шрифт и расстояние между буквами.
.form {
width: 300px; # Ширина 300 пикселей
padding: 32px; # Внутренний отступ 32 пикселей
border-radius: 10px; # Закруглённую рамку или скруглить углы элемента.
box-shadow: 0 4px 16px #ccc; # Тень элемента. 0 - смещение Х, 4 - смещение Y, 16 - степень размытия, #ccc - цвет.
font-family: sans-serif; # Шрифт.
letter-spacing: 1px; # Расстояние между буквами
}
Ну и конечно не забудем добавить этот стиль в HTML файл:
<form class="form">
Делай два.
Едем дальше. Создадим стиль для кнопочки(Войти) поменяем цвет , шрифт и поправим заголовок(Вход)
.form_title {
text-align: center; # Текст по центру
margin: 0 0 32px 0; # Внешний отступ на всех четырех сторонах элемента.
font-weight: normal;# Насыщенность шрифта, убираем жирность.
}
Кнопочка :
.form_button {
padding: 10px 20px;
border: none; # Без границы блока.
border-radius: 5px; # Радиус закругления
font-family: sans-serif;
letter-spacing: 1px;
font-size: 16xp;
color :#fff ; # Цвет текста
background-color: #0071f0; # Цвет фона
outline: none; # Внешней границы элемента
cursor: pointer; # Тип курсора при наведение
transition: 0.3s; # transition позволяет делать плавные переходы между двумя значениями какого-либо CSS свойства
}
Добавляем стили в HTML :
<h1 class="form_title">Вход</h1>
<button class="form_button">Войти</button>
Поля ввода, подсказки.
Дальше на очереди поля в вода. Если вы обратили внимание каждое поле находиться в своем блоке <div> . Задаем стиль для блоков :
.form_grup {
position: relative; # Положение элемента устанавливается относительно его исходного места.
margin-bottom: 32px;# Внешний отступ снизу элемента
Теперь стиль поля ввода :
.form_input {
width: 100%;
padding: 0 0 10px 0;
border: none; # Без рамки.
border-bottom: 1px solid #e0e0e0; # Нижняя рамка 1 пиксель, цвет #e0e0e0
background-color: transparent; # Фон будет прозрачным.
outline: none;
transition: 0.3s;
}
Стиль подсказок :
.form_label {
position: absolute; # Абсолютное позиционирование.
top: 0; # Смещение позиционированного элемента относительно верхнего края
z-index: -1;
color: #9e9e9e; # Цвет текска.
transition: 0.3s;
}
CSS свойство z-index определяет порядок расположения позиционированных элементов по оси Z. Это позволяет контролировать наложение перекрывающихся элементов.
<div class="form_grup">
<label class="form_label">Email</label>
<input class="form_input">
</div>
<div class="form_grup">
<label class="form_label">Пароль</label>
<input class="form_input">
</div>
Уже намного лучше выглядит ?
Немного анимации, завершаем.
Начнем с кнопки , если она в фокусе или на нее нажимают меняем цвет бэкграунд:
.form_button:focus,
.form_button:hover{
background-color: rgba(0, 113, 240, 0.7); RGBA Цвет фона и значение прозрачности.
}
Когда поле ввода в фокусе , поменяем цвет нижней границы:
.form_input:focus {
border-bottom: 1px solid #1a73a8;
}
Так же поменяем свойства подсказок, сдвинем их в верх и уменьшим шрифт :
.form_input:focus ~ .form_label {
top: -18px;
font-size:12px;
color: #e0e0e0;
}
Уже совсем хорошо , но есть один косяк. Когда уходит фокус, подсказка возвращается на место.
Мы исправим это с помощью псевдоэлемент placeholder для стилизации дефолтного текста в элементе input или textarea. Большинство современных браузеров поддерживают это. Первым делом добавим его в HTML :
<input class="form_input" placeholder=" ">Теперь под правами CSS стиль :
.form_input:focus ~ .form_label,
.form_input:not(:placeholder-shown) ~ .form_label {
top: -18px;
font-size:12px;
color: #e0e0e0;
}
Надеюсь вам эта статья пригодилась и понравилась . Успехов.
Не РАБОТАЕТ!!!!
А что именно не работает ? Вроде на вскидку ошибок явных не заметил.Когда писал статью все проверял.
Если копировать, а не смотреть код, то в form_button написано 16xp , а в самой форме label стоит после input, поэтому вообще съезжает вправо, если то и то исправить то всё окей, кину на редакцию те места)
Спасибо ))) Все поправил )
Воще фигня. У тебя в пароле не звездочки а буквы видны. Полный бред бес стиля нормального. Это я сам за 5 минут на коленках сделаю.
А бред то по чему? Что в вашем понятие нормальный стиль ? ))) Я очень рад что вы сможете сделать за 5 минут. Жаль, у меня ушло намного больше, а кто то наверное вообще не может )
поставь type=»password»
А если я это делаю в файле php результат совсем другой как в html
.form_input:focus ~ .form_label {
top: -18px;
font-size:12px;
color: #e0e0e0;
}
Когда прописываю этот кусок кода, то надписи вверх не сдвигаются, оно не работает
Спасибо, очень выручили)
для .form_label нужно добавить left: 0;
Всем привет!