Kosten |
Вторник, 05 Марта 2019, 18:17 | Сообщение 1 |
|
Эта форма входа сайта и регистраций можно поставить на модальное окно или на отдельную страницу, на обеих вариантах отлично смотрится, так как создана на чистом CSS. После того, как CSS Grid появится в браузерах, то здесь уже можно использовать его как существующий метод, прежде чем мы сможем рассмотреть его в качестве основного инструмента. В этом примере создана форма входа, которая по умолчанию идет на светлый формат сайта, так как выполнена в светло синем оттенке.
Окончательная форма выглядит как на рисунке ниже:
Также форма имеет отличную поддержку для браузера и может обеспечить горизонтальное и вертикальное центрирование. Где также была проверена на браузере с поддержкой flexbox, используя запрос CSS.
Если браузер поддерживает flexbox, то нужно использовать display: flex - где установка идет на высоту 100 единиц, где затем используйте свойства выравнивания, которые есть во flexbox, чтобы выровнять прямоугольник
Приступаем к установке:
HTML
Код <h1>Войти здесь</h1> <form class="login" action="" method="post"> <div><label for="username">Имя пользователя</label> <input type="text" name="username" id="username"></div> <div><label for="password">Пароль</label> <input type="password" name="password" id="password"></div> <div class="actions"> <input type="submit" name="login" value="Авторизоваться"> <a href="/">Я забыл свой пароль</a> </div> </form> <div class="account"> <p>Создать новую учетную <a href="">запись</a>.</p> </div>
CSS
Код @supports (display: flex) {
body {
padding:0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
h1, .login, .account, .contact {
margin: 0;
width: 80%;
}
}
@supports (display: grid) {
body {
display: grid;
grid-template-columns: 80%;
align-content: center;
align-items: stretch;
}
@media (min-width: 650px) {
body {
grid-template-columns: repeat(2, minmax(150px, 30%));
}
h1,
.login {
grid-column-end: span 2;
width: auto;
}
.login > div {
display: grid;
grid-template-columns: 1fr 2fr;
align-items: center;
}
.login > div.actions {
grid-template-columns: 1fr 1fr 1fr;
}
.account {
border-right: 1px dotted rgb(191, 216, 227);
padding: 0 10px 0 0;
align-self: end;
width: auto;
}
.contact {
padding: 0 0 0 10px;
width: auto;
}
input[type="submit"] {
grid-column: 2;
}
.actions a {
justify-self: end;
}
}
}
h1 {
background-color: rgb(59, 98, 115);
border-top-right-radius: 5px;
border-top-left-radius: 5px;
padding: 10px;
font-size: 24px;
line-height: 1.4;
box-shadow: 0px 0px 0px 1px #4a4848;
color: #f3f3f3;
text-shadow: 0 1px 0 #2f2c2c;
}
.login {
background-color: rgba(84, 123, 140, 0.4);
/* border: 2px solid rgba(148, 161, 167, 0.8); */
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
padding: 10px;
margin-bottom: 10px;
box-shadow: 0px 0px 2px 1px #7d7676;
}
.login > div {
padding: 5px 0;
}
input[type="submit"] {
border: 2px solid rgb(146, 182, 197);
border-radius: 100px;
color: #f9f9f9;
background-color: rgb(54, 134, 169);
font-size: 17px;
padding: 8px 5px 8px 5px;
cursor:pointer;
}
input[type="text"], input[type="password"] {
border: 1px solid rgba(76, 113, 130, 0.8);
padding: 5px;
border-radius: 100px;
font-size: 17px;
width: 100%;
}
.actions a {
font-size: 75%;
}
Внутри моей формы находятся элементы формы с метками и полями. Так как они вложены в сетку и не являются прямыми дочерними элементами контейнера сетки, где нужно создать новую сетку для элементов div, которые обертывают поля формы. Если бы у нас была поддержка под сетей в любых браузерах, это было бы хорошим вариантом для этого.
Однако есть ключевое различие между grid и flexbox. Когда мы используем сетку, мы решаем наш размер сетки, а затем помещаем вещи в нее, это позволяет очень легко выровнять вещи в обоих направлениях. Где Flexbox сияет в том, чтобы иметь возможность смотреть на контент и распределять пространство в соответствии с размером контента.
Демонстрация
|
| [ RU ] |
|
|
