13 уникальных дизайнов форм входа
Формы входа являются неотъемлемой частью большинства веб-сайтов и приложений, служа шлюзом для доступа пользователей к своим учётным записям или персонализированному контенту. Грамотно разработанная форма входа не только обеспечивает беспроблемную аутентификацию, но и отражает индивидуальность бренда, вовлекает пользователей и улучшает их общее впечатление.
С развитием тенденций веб-дизайна формы входа превратились из простых полей ввода в высокоинтерактивные и визуально привлекательные компоненты. Сегодня дизайнеры стремятся создавать функциональные, доступные и эстетически привлекательные формы, сочетая потребности пользователей с творческим самовыражением.
В этом руководстве рассматриваются 13 уникальных дизайнов форм входа , каждый из которых разработан для разных тем, аудиторий и вариантов использования. От минималистичных и плоских до футуристических и геометрических стилей — эти дизайны демонстрируют универсальность форм входа в современном веб-дизайне. Разрабатываете ли вы корпоративный портал, креативное портфолио или игровую платформу, вы найдете вдохновение для создания формы входа, которая не только эффективно работает, но и выделяется.
Минималистичная форма входа ориентирована на простоту и элегантность. Она устраняет отвлекающие факторы и делает акцент на удобстве использования, что делает её идеальным выбором для аккуратных и современных веб-сайтов. Эта форма использует округлые поля ввода, мягкие тени и яркую кнопку для создания профессионального вида.
Доступный дизайн обеспечивает взаимодействие пользователей с формой на любом устройстве и экране любого размера. Минималистичный дизайн также ускоряет загрузку, обеспечивая удобство использования.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Minimalistic Login</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #f5f5f5;
}
.login-form {
background: #fff;
padding: 20px 30px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.login-form h2 {
margin-bottom: 20px;
font-size: 24px;
text-align: center;
}
.login-form input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
.login-form button {
width: 100%;
padding: 10px;
border: none;
background: #007BFF;
color: white;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
.login-form button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
Предварительный просмотр
Дизайн 2: Форма с градиентным фоном
Форма входа с градиентным фоном отличается эффектным дизайном, который использует цветовые переходы для создания глубины и элегантности. Форма выделяется прозрачными полями ввода и яркой кнопкой входа, что делает её идеальным вариантом для творческих портфолио или развлекательных сайтов.
Градиентный фон не только привлекает внимание, но и задаёт определённый тон сайту. В сочетании с элементами адаптивного дизайна эта форма обеспечивает функциональность и эстетичность на всех устройствах.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gradient Login</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
.login-form {
background: rgba(255, 255, 255, 0.8);
padding: 20px 30px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.login-form h2 {
text-align: center;
color: #444;
}
.login-form input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
}
.login-form button {
width: 100%;
padding: 10px;
border: none;
background: #ff7e5f;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
}
.login-form button:hover {
background: #feb47b;
}
</style>
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
Предварительный просмотр
Дизайн 3: Форма темного режима
Форма входа в тёмном режиме разработана для приложений и веб-сайтов, ориентированных на пользователей, предпочитающих тёмные темы. В дизайне используются лёгкие подсветки, светящиеся эффекты и элегантный современный дизайн. Поля ввода и кнопки имеют высокую контрастность, что обеспечивает удобство использования в условиях слабого освещения.
Эта форма идеально подходит для игровых платформ, технических блогов и любых сайтов, ориентированных на молодую, технически подкованную аудиторию. Она создаёт интересный и захватывающий опыт, сохраняя при этом доступность.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Login</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #1e1e1e;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
}
.login-form {
background: #2a2a2a;
padding: 20px 30px;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.login-form h2 {
color: #f5f5f5;
text-align: center;
}
.login-form input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #444;
border-radius: 4px;
background: #1e1e1e;
color: #fff;
}
.login-form button {
width: 100%;
padding: 10px;
border: none;
background: #007BFF;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 4px;
}
.login-form button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
Предварительный просмотр
Дизайн 4: Форма входа в Material Design
Форма входа в стиле Material Design создана в соответствии с рекомендациями Google Material Design, которые делают акцент на чистом, структурированном и интуитивно понятном пользовательском интерфейсе. Этот дизайн включает в себя мягкие тени, адаптивную анимацию и выразительную типографику, создавая профессиональный и современный вид. Поля ввода формы имеют плавающие подписи, которые обеспечивают понятную навигацию, не перегружая интерфейс.
Эта форма входа идеально подходит для бизнес-приложений, SaaS-платформ и мобильных сайтов. Её адаптивный дизайн обеспечивает отличное отображение на всех устройствах, а использование эффектов возвышения и анимации добавляет нотку изысканности. Сочетая функциональность и эстетику, эта форма — отличный пример того, как принципы дизайна могут вывести взаимодействие с пользователем на новый уровень.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Design Login</title>
<style>
body {
margin: 0;
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f5f5f5;
}
.login-form {
background: #fff;
padding: 30px 40px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
width: 300px;
}
.login-form h2 {
font-size: 24px;
margin-bottom: 20px;
text-align: center;
color: #333;
}
.form-group {
position: relative;
margin-bottom: 20px;
}
.form-group input {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
outline: none;
font-size: 16px;
transition: all 0.3s ease;
}
.form-group input:focus {
border-color: #6200ee;
box-shadow: 0 0 4px rgba(98, 0, 238, 0.5);
}
.form-group label {
position: absolute;
top: 10px;
left: 10px;
font-size: 16px;
color: #888;
pointer-events: none;
transition: all 0.3s ease;
}
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
top: -10px;
left: 5px;
font-size: 12px;
color: #6200ee;
}
.login-form button {
width: 100%;
padding: 10px;
background: #6200ee;
color: white;
font-size: 16px;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s ease;
}
.login-form button:hover {
background: #3700b3;
}
</style>
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<form>
<div class="form-group">
<input type="text" required placeholder=" ">
<label>Username</label>
</div>
<div class="form-group">
<input type="password" required placeholder=" ">
<label>Password</label>
</div>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>Предварительный просмотр
Особенности формы:
- Плавающие метки: при фокусировке или заполнении элементы ввода динамически сдвигают метки наверх.
- Материальные тени: на карте используются тонкие тени, создающие ощущение возвышенности.
- Современная типографика: шрифт Roboto обеспечивает четкость и читабельность.
Дизайн 5: Форма входа Glassmorphism
Форма входа Glassmorphism — это современный и стильный дизайн, создающий полупрозрачный эффект «стекла» на фоне формы. Он сочетает размытие и прозрачность с лёгким матовым эффектом, создавая впечатление, будто стеклянная панель парит над страницей. Этот дизайн идеально подходит для модных сайтов, креативных портфолио и приложений, где эстетика играет решающую роль в пользовательском опыте.
В стиле «глассморфизм» акцент делается на свете и контрасте, чтобы выделить поля ввода и кнопки. Фон обычно представляет собой градиент или абстрактное изображение, добавляя форме глубины и контекста, не перегружая пользователя. Такой дизайн повышает визуальную привлекательность веб-сайта, сохраняя при этом функциональность и ясность.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glassmorphism Login</title>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #74ebd5, #acb6e5);
overflow: hidden;
}
.login-form {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 30px 40px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
text-align: center;
color: white;
width: 350px;
}
.login-form h2 {
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
}
.form-group {
margin-bottom: 20px;
}
.form-group input {
width: calc(100% - 20px);
padding: 10px;
border: none;
border-radius: 5px;
outline: none;
font-size: 16px;
background: rgba(255, 255, 255, 0.2);
color: white;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.form-group input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.form-group input:focus {
background: rgba(255, 255, 255, 0.3);
}
.login-form button {
width: 100%;
padding: 10px;
background: rgba(255, 255, 255, 0.4);
border: none;
border-radius: 5px;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background 0.3s ease;
}
.login-form button:hover {
background: rgba(255, 255, 255, 0.6);
}
</style>
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<form>
<div class="form-group">
<input type="text" placeholder="Username" required>
</div>
<div class="form-group">
<input type="password" placeholder="Password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>Предварительный просмотр
Особенности формы:
- Эффект стекла: Прозрачный фон с эффектом размытия создает иллюзию матового стекла.
- Светлый текст и поля ввода: поля ввода имеют легкое свечение и сохраняют контраст на градиентном фоне.
- Современная эстетика: чистый, минималистичный дизайн обеспечивает современный и визуально привлекательный вид.
Дизайн 6: Форма входа в неоновом стиле
Форма входа в неоновом стиле — это смелый и визуально эффектный дизайн, использующий неоновые цвета и светящиеся эффекты. Эта форма выделяется, особенно на сайтах в тёмном или футуристическом стиле, благодаря использованию ярких оттенков на тёмном фоне. Благодаря светящимся границам, эффектам наведения и элегантному дизайну, этот дизайн идеально подходит для игровых платформ, технических блогов или развлекательных сайтов.
Неоновый стиль не только привлекает внимание, но и создаёт энергичное и динамичное ощущение. Светящиеся эффекты подсвечивают интерактивные элементы, такие как кнопки и поля ввода, создавая захватывающий пользовательский опыт, отражающий современные тенденции в дизайне интерфейсов.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Style Login</title>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
color: #fff;
}
.login-form {
background: #121212;
padding: 30px 40px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
text-align: center;
width: 300px;
}
.login-form h2 {
margin-bottom: 20px;
font-size: 24px;
color: #00ffff;
}
.form-group {
margin-bottom: 20px;
}
.form-group input {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #00ffff;
border-radius: 5px;
outline: none;
background: #000;
color: #00ffff;
font-size: 16px;
transition: box-shadow 0.3s ease;
}
.form-group input:focus {
box-shadow: 0 0 10px #00ffff;
}
.login-form button {
width: 100%;
padding: 10px;
background: #00ffff;
border: none;
border-radius: 5px;
color: #000;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: box-shadow 0.3s ease;
}
.login-form button:hover {
box-shadow: 0 0 15px #00ffff;
}
</style>
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<form>
<div class="form-group">
<input type="text" placeholder="Username" required>
</div>
<div class="form-group">
<input type="password" placeholder="Password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>Предварительный просмотр
Особенности формы:
- Светящиеся эффекты: неоновые рамки и кнопки создают футуристическое настроение.
- Темный фон: Контраст усиливает свечение и выделяет интерактивные элементы.
- Динамическая интерактивность: эффекты наведения и фокусировки делают дизайн более интересным.
Дизайн 7: Плоская форма дизайна
Форма входа в плоском дизайне отличается чистой и минималистичной эстетикой, без градиентов, теней и текстур. Этот дизайн ориентирован на простоту и функциональность, что делает его идеальным для профессиональных веб-сайтов, корпоративных порталов и современных приложений.
Принципы плоского дизайна ставят во главу угла удобство использования и скорость. Отсутствие отвлекающих элементов обеспечивает быстрое и эффективное взаимодействие пользователей с формой, а смелое использование цветов и шрифтов поддерживает визуальный интерес.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flat Design Login</title>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f5f5f5;
}
.login-form {
background: #fff;
padding: 30px 40px;
border-radius: 5px;
width: 300px;
text-align: center;
}
.login-form h2 {
margin-bottom: 20px;
font-size: 24px;
color: #333;
}
.form-group input {
width: calc(100% - 20px);
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 3px;
font-size: 16px;
color: #333;
}
.login-form button {
width: 100%;
padding: 10px;
background: #007BFF;
border: none;
border-radius: 3px;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
.login-form button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<form>
<div class="form-group">
<input type="text" placeholder="Username" required>
</div>
<div class="form-group">
<input type="password" placeholder="Password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>Предварительный просмотр
Особенности формы:
- Никаких теней и градиентов: основное внимание уделяется чистому и простому макету.
- Яркие цвета кнопок: добавляют визуальную иерархию и ясность.
- Компактный дизайн: идеально подходит для профессиональных и корпоративных сайтов.
Дизайн 8: Анимированные поля ввода
Форма входа с анимированными полями ввода добавляет динамические эффекты к полям ввода, делая процесс входа более интересным. Анимация ввода, такая как скользящие надписи, расширяющиеся границы или светящаяся подсветка, добавляет интерактивности. Эта форма идеально подходит для современных веб-сайтов и приложений, стремящихся создать запоминающийся пользовательский опыт.
Анимация помогает пользователю заполнить форму, обеспечивая доступность и ясность, не перегружая интерфейс. Этот дизайн подходит для портфолио, креативных агентств и любых сайтов, ориентированных на технически подкованную аудиторию.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Input Login</title>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
.login-form {
background: #fff;
padding: 30px 40px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 350px;
text-align: center;
}
.login-form h2 {
margin-bottom: 20px;
font-size: 24px;
color: #444;
}
.form-group {
position: relative;
margin-bottom: 20px;
}
.form-group input {
width: calc(100% - 20px);
padding: 10px;
border: 0;
border-bottom: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
outline: none;
transition: border-color 0.3s ease;
}
.form-group input:focus {
border-color: #007BFF;
}
.form-group label {
position: absolute;
top: 10px;
left: 10px;
font-size: 16px;
color: #aaa;
transition: all 0.3s ease;
}
.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label {
top: -10px;
left: 5px;
font-size: 12px;
color: #007BFF;
}
.login-form button {
width: 100%;
padding: 10px;
background: #007BFF;
border: none;
border-radius: 5px;
color: white;
font-size: 16px;
cursor: pointer;
}
.login-form button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<form>
<div class="form-group">
<input type="text" placeholder=" " required>
<label>Username</label>
</div>
<div class="form-group">
<input type="password" placeholder=" " required>
<label>Password</label>
</div>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>Предварительный просмотр
Особенности формы:
- Скользящие метки: метки плавно анимируются при наведении фокуса на ввод.
- Расширяющиеся границы: поля ввода выделяются для лучшего ориентирования пользователя.
- Чистый дизайн: сочетает анимацию с минимальным стилем для создания современного дизайна.
Дизайн 9: Форма с разделённым экраном
Форма входа с разделённым экраном делит страницу на две части, создавая визуально сбалансированный дизайн. На одной стороне обычно располагается форма входа, а на другой — изображение, графика или информационный контент, например, слоган или призыв к действию. Такой дизайн идеально подходит для веб-сайтов, которые хотят произвести сильное первое впечатление или подчеркнуть индивидуальность бренда.
Формы с разделённым экраном особенно хорошо подходят для креативных портфолио, целевых страниц продуктов и SaaS-платформ. Такой макет позволяет сосредоточиться на форме входа, одновременно используя другую половину экрана для визуального повествования или дополнительного контента.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Split-Screen Login</title>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
height: 100vh;
}
.split-screen {
display: flex;
width: 100%;
}
.left {
background: url('https://via.placeholder.com/600') no-repeat center center;
background-size: cover;
flex: 1;
}
.right {
background: #f5f5f5;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.login-form {
background: #fff;
padding: 30px 40px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
.login-form h2 {
margin-bottom: 20px;
font-size: 24px;
color: #333;
}
.form-group input {
width: calc(100% - 22px);
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
.login-form button {
width: 100%;
padding: 10px;
background: #007BFF;
border: none;
border-radius: 4px;
color: white;
font-size: 16px;
cursor: pointer;
}
.login-form button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div class="split-screen">
<div class="left"></div>
<div class="right">
<div class="login-form">
<h2>Login</h2>
<form>
<div class="form-group">
<input type="text" placeholder="Username" required>
</div>
<div class="form-group">
<input type="password" placeholder="Password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
</div>
</div>
</body>
</html>Предварительный просмотр
- Раздельная компоновка: одна сторона для формы, другая для визуальных материалов или брендинга.
- Адаптивный дизайн: макет легко адаптируется к экранам меньшего размера.
- Настройка бренда: демонстрация изображений, слоганов или ключевых сообщений.
Дизайн 10: Форма в стиле 3D-коробки
Форма входа в стиле 3D Box выводит глубину и перспективу на новый уровень, используя 3D-эффект не только для контейнера, но и для полей ввода и кнопок. Этот дизайн использует тени и подсветку, чтобы каждый интерактивный элемент выглядел как выпуклый или вдавленный объект. Это отличный выбор для футуристических, игровых или технологичных сайтов.
В этой версии улучшена интерактивность за счет тактильных ощущений, когда элементы управления и кнопки кажутся живыми, что добавляет дополнительный уровень взаимодействия.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Box Style Login</title>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #eef2f3;
}
.login-form {
background: #fff;
padding: 30px 40px;
border-radius: 12px;
box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), -8px -8px 20px rgba(255, 255, 255, 0.7);
width: 350px;
text-align: center;
}
.login-form h2 {
margin-bottom: 20px;
font-size: 24px;
color: #333;
font-weight: bold;
}
.form-group {
margin-bottom: 20px;
}
.form-group input {
width: calc(100% - 30px);
padding: 15px;
border: none;
border-radius: 12px;
background: #eef2f3;
box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.1), inset -4px -4px 8px rgba(255, 255, 255, 0.7);
font-size: 16px;
color: #333;
outline: none;
transition: all 0.2s ease-in-out;
}
.form-group input:focus {
box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(255, 255, 255, 0.9);
}
.login-form button {
width: 100%;
padding: 15px;
border: none;
border-radius: 12px;
background: #007BFF;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2), -4px -4px 8px rgba(255, 255, 255, 0.7);
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.login-form button:active {
box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.2), inset -4px -4px 8px rgba(255, 255, 255, 0.7);
background: #0056b3;
}
.login-form button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<form>
<div class="form-group">
<input type="text" placeholder="Username" required>
</div>
<div class="form-group">
<input type="password" placeholder="Password" required>
</div>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
Предварительный просмотр
- Динамическое взаимодействие: поля ввода и кнопки визуально реагируют на взаимодействие с пользователем, что делает форму живой.
- 3D-контейнер: сама форма стилизована под глубокие тени, что придает ей эффект парения.
- 3D-вводы: поля ввода имеют встроенные тени, создающие эффект «вдавленности», который изменяется при фокусировке для повышения интерактивности.
- 3D-кнопка: кнопка выделяется мягкими тенями, создавая приятную анимацию щелчка при нажатии.
Дизайн 11: Форма входа в социальные сети
Форма входа через социальные сети — это современный дизайн, включающий в себя возможности входа через популярные аккаунты социальных сетей. Этот тип формы входа идеально подходит для веб-сайтов, которые хотят упростить процесс регистрации и входа пользователей, предлагая функцию единого входа(SSO). Она позволяет пользователям быстро входить в систему через такие платформы, как Google, Facebook или Twitter, избавляя от необходимости запоминать дополнительные учётные данные.
Эта форма идеально подходит для сайтов электронной коммерции, блогов и любых сервисных платформ. Дизайн обеспечивает пользователям как традиционные способы входа, так и кнопки входа через социальные сети, обеспечивая гибкость и инклюзивность.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Social Media Login</title>
<!-- Font Awesome CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
.login-form {
background: #fff;
padding: 30px 40px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 350px;
text-align: center;
}
.login-form h2 {
margin-bottom: 20px;
font-size: 24px;
color: #333;
font-weight: bold;
}
.form-group {
margin-bottom: 20px;
}
.form-group input {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
color: #333;
outline: none;
margin-bottom: 15px;
}
.login-form button {
width: 100%;
padding: 10px;
background: #007BFF;
border: none;
border-radius: 5px;
color: white;
font-size: 16px;
font-weight: bold;
cursor: pointer;
margin-bottom: 15px;
}
.login-form button:hover {
background: #0056b3;
}
.social-buttons {
display: flex;
flex-direction: column;
gap: 10px;
}
.social-buttons button {
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.social-buttons .google {
background: #db4437;
}
.social-buttons .facebook {
background: #4267B2;
}
.social-buttons .twitter {
background: #1DA1F2;
}
.social-buttons button i {
margin-right: 10px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="login-form">
<h2>Login</h2>
<form>
<div class="form-group">
<input type="text" placeholder="Username" required>
</div>
<div class="form-group">
<input type="password" placeholder="Password" required>
</div>
<button type="submit">Login</button>
</form>
<p>Or</p>
<div class="social-buttons">
<button class="google"><i class="fab fa-google"></i> Login with Google</button>
<button class="facebook"><i class="fab fa-facebook-f"></i> Login with Facebook</button>
<button class="twitter"><i class="fab fa-twitter"></i> Login with Twitter</button>
</div>
</div>
</body>
</html>
Дизайн 12: Форма входа в систему геометрической формы
Форма входа «Геометрическая фигура» использует креативные фигуры, такие как круги, треугольники и многоугольники, в качестве фона или структуры формы, создавая уникальный и художественный дизайн. Этот стиль добавляет современную и игривую эстетику, что делает его идеальным для творческих портфолио, арт-сайтов или платформ, ориентированных на молодую аудиторию.
Геометрические фигуры служат декоративными элементами, сохраняя при этом функциональность формы понятной и удобной для пользователя. Дизайн формы входа выделяется, сохраняя при этом простоту и удобство использования.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geometric Shape Login</title>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
overflow: hidden;
}
.background-shapes {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
overflow: hidden;
}
.background-shapes .circle {
position: absolute;
width: 200px;
height: 200px;
background: #74b9ff;
border-radius: 50%;
top: -50px;
left: -50px;
}
.background-shapes .triangle {
position: absolute;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid #00cec9;
bottom: -50px;
right: -50px;
}
.login-form {
position: relative;
background: #fff;
padding: 30px;
clip-path: polygon(50% 0%, 100% 25%, 85% 100%, 15% 100%, 0% 25%);
width: 300px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background: linear-gradient(135deg, #6c5ce7, #81ecec);
}
.login-form h2 {
margin-bottom: 20px;
font-size: 24px;
color: #fff;
font-weight: bold;
}
.form-group {
margin-bottom: 20px;
position: relative;
}
.form-group input {
padding: 15px;
border: none;
outline: none;
text-align: center;
background: linear-gradient(135deg, #ffeaa7, #fab1a0);
color: #2d3436;
font-size: 16px;
clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}
.login-button {
width: 100%;
padding: 15px;
border: none;
cursor: pointer;
background: linear-gradient(135deg, #00cec9, #0984e3);
color: #fff;
font-size: 16px;
font-weight: bold;
transition: all 0.3s ease;
clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}
.login-button:hover {
background: linear-gradient(135deg, #0984e3, #00cec9);
}
.background-shapes .square {
position: absolute;
width: 150px;
height: 150px;
background: #ff7675;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
</style>
</head>
<body>
<div class="background-shapes">
<div class="circle"></div>
<div class="triangle"></div>
<div class="square"></div>
</div>
<div class="login-form">
<h2>Login</h2>
<form>
<div class="form-group">
<input type="text" placeholder="Username" required>
</div>
<div class="form-group">
<input type="password" placeholder="Password" required>
</div>
<button class="login-button" type="submit">Login</button>
</form>
</div>
</body>
</html>
Предварительный просмотр
Особенности этого дизайна
-
Геометрическая форма:
-
Вся форма представляет собой многоугольник(стилизованный с помощью
clip-path), что придает ей футуристический и креативный вид.
-
Вся форма представляет собой многоугольник(стилизованный с помощью
-
Геометрические входные данные:
- Поля ввода имеют трапециевидную форму, что делает их уникальными и в то же время функциональными.
-
Геометрическая кнопка:
- Кнопка входа также имеет форму трапеции, что создает единый дизайн всех элементов.
-
Яркие цвета:
- Градиентные цвета добавляют современный и игривый штрих, дополняя геометрическую эстетику.
-
Фоновые геометрические фигуры:
- Круги, треугольники и квадраты на заднем плане придают дополнительную глубину и визуальный интерес.
Дизайн 13: Форма входа с вкладками(Вход/Регистрация)
Форма входа с вкладками предоставляет пользователям интуитивно понятный способ переключения между формами «Вход» и «Регистрация» с помощью вкладок. Такая структура идеально подходит для приложений и веб-сайтов, которым требуется сочетание обеих функций в компактном и удобном интерфейсе. В дизайне используются плавные переходы и четкое разделение разделов для повышения удобства использования.
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabbed Login/Signup Form</title>
<style>
body {
margin: 0;
font-family: 'Arial', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f4f4f4;
}
.tabbed-form {
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 400px;
overflow: hidden;
}
.tabbed-form .tabs {
display: flex;
background: #007BFF;
}
.tabbed-form .tabs button {
flex: 1;
padding: 15px;
border: none;
background: #007BFF;
color: white;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease;
}
.tabbed-form .tabs button.active {
background: #0056b3;
}
.tabbed-form .tabs button:hover {
background: #0056b3;
}
.tab-content {
padding: 20px 30px;
}
.tab-content form {
display: none;
}
.tab-content form.active {
display: block;
}
.form-group {
margin-bottom: 20px;
}
.form-group input {
width: calc(100% - 22px);
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-size: 14px;
color: #555;
}
.form-group button {
width: 100%;
padding: 10px;
border: none;
background: #007BFF;
color: white;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
.form-group button:hover {
background: #0056b3;
}
</style>
<script>
function switchTab(tab) {
const tabs = document.querySelectorAll('.tabs button');
const forms = document.querySelectorAll('.tab-content form');
tabs.forEach(button => button.classList.remove('active'));
forms.forEach(form => form.classList.remove('active'));
tab.classList.add('active');
document.querySelector(tab.dataset.target).classList.add('active');
}
</script>
</head>
<body>
<div class="tabbed-form">
<div class="tabs">
<button class="active" data-target="#login" onclick="switchTab(this)">Login</button>
<button data-target="#signup" onclick="switchTab(this)">Signup</button>
</div>
<div class="tab-content">
<form id="login" class="active">
<div class="form-group">
<label for="login-username">Username</label>
<input type="text" id="login-username" placeholder="Enter your username" required>
</div>
<div class="form-group">
<label for="login-password">Password</label>
<input type="password" id="login-password" placeholder="Enter your password" required>
</div>
<div class="form-group">
<button type="submit">Login</button>
</div>
</form>
<form id="signup">
<div class="form-group">
<label for="signup-username">Username</label>
<input type="text" id="signup-username" placeholder="Choose a username" required>
</div>
<div class="form-group">
<label for="signup-email">Email</label>
<input type="email" id="signup-email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="signup-password">Password</label>
<input type="password" id="signup-password" placeholder="Create a password" required>
</div>
<div class="form-group">
<button type="submit">Signup</button>
</div>
</form>
</div>
</div>
</body>
</html>
Предварительный просмотр
-
Навигация с вкладками:
- Две вкладки с надписями «Вход» и «Регистрация» позволяют пользователям легко переключаться между формами.
- Активная вкладка визуально выделена для ясности.
-
Динамический контент:
- Одновременно видна только одна форма(Вход или Регистрация), что обеспечивает понятный интерфейс.
- Плавное переключение между вкладками повышает удобство использования.
-
Адаптивный дизайн:
- Макет полностью адаптивен, что обеспечивает удобство использования на всех устройствах.
Функции
-
Удобный интерфейс:
- Объединяет вход и регистрацию в одном компактном макете.
- Простая навигация между вкладками снижает сложность.
-
Настраиваемый:
- При необходимости добавьте дополнительные вкладки(например, «Забыли пароль»).
- Измените цвета и текст в соответствии с вашим брендом.
-
Облегченный сценарий:
- Минимальный JavaScript обеспечивает быструю загрузку и простоту обслуживания.
Этот дизайн идеально подходит для веб-сайтов и приложений, стремящихся упростить аутентификацию пользователей. Сообщите мне, если вам нужны дополнительные функции или дополнительная настройка!