Содержание

Форма регистрации на сайте — 60 бесплатных HTML5 и CSS3 форм авторизации для сайта

Вам нужна форма регистрации на сайте? Мы составили список, состоящий из 60 бесплатных форм авторизации, которые вы можете использовать на своем WordPress-сайте, в блоге, на форуме и т.д. Каждая форма тщательно протестирована, чтобы можно было гарантировать ее работоспособность и доступность исходного кода.

  • WordPress Login Customizer
  • Creative Login Form
  • Форма авторизации №1
  • Форма авторизации №2
  • Форма авторизации №3
  • Форма авторизации №4
  • Форма авторизации №5
  • Форма авторизации №6
  • Форма авторизации №7
  • Форма авторизации №8
  • Форма авторизации №9
  • Форма авторизации №10
  • Форма авторизации №11
  • Форма авторизации №12
  • Форма авторизации №13
  • Форма авторизации №14
  • Форма авторизации №15
  • Форма авторизации №16
  • Форма авторизации №17
  • Форма авторизации №18
  • Форма авторизации №19
  • Форма авторизации №20
  • Выпадающая форма авторизации
  • Floating Sign Up Form
  • Простая форма авторизации
  • Flat Login – Sign Up Form
  • Login With Self-Contained SCSS Form
  • Animated Login Form
  • Login Form Using CSS3 And HTML5
  • Login With Shake Effect

Формы из этого списка созданы с помощью HTML / CSS. Но в данном случае речь идет о лучшем плагине для настройки пользовательского интерфейса WordPress. Он поставляется с несколькими шаблонами, которые можно дополнительно настроить в соответствии с дизайном сайта. С помощью этого плагина вы сможете избавиться от скучной страницы входа в WordPress.

Простая, но креативная форма входа, созданная с помощью HTML и CSS3. Ее также можно использовать и как форму регистрации. Это наш любимый шаблон из представленных в этом списке.

Мы поискали в интернете действительно крутые формы авторизации, но найти такие оказалось непросто. Поэтому решили представить вам собственные. Вот 20 форм входа, разработанных нашей командой.

Простая, креативная и яркая форма входа с градиентным фоном. Вы можете использовать ее для любых целей, таких как авторизация в веб-сервисе, мобильном или десктопном приложении.

Скачать

Предварительный просмотр

Минималистичная и изысканная форма входа с кнопкой, градиентной заливкой, а также с анимацией и логотипом. Используйте ее, изменив необходимые элементы.

Скачать

Предварительный просмотр

Страница входа с фоновым изображением, тенью и эффектом наведения для кнопки входа в систему.

Скачать

Предварительный просмотр

Вы можете скачать эту веб-форму и использовать по своему усмотрению. Она является полностью адаптивной.

Скачать

Предварительный просмотр

Прекрасная и современная форма с опциями входа через Facebook или Google. Ее кнопки имеют красивые эффекты наведения, что позволяет предоставить пользователям прекрасный опыт взаимодействия.

Скачать

Предварительный просмотр

Если веб-страница аккуратная и красивая, форма входа не должна отличаться от ее дизайна. Вот форма, которая точно оправдает ваши ожидания.

Скачать

Предварительный просмотр

Форма с тремя вариантами входа в учетную запись: Facebook, Twitter или адрес электронной почты. А если у пользователя еще нет учетной записи, можно связать форму со страницей регистрации.

Скачать

Предварительный просмотр

Еще одна современная, модная и красивая форма входа в систему. Она особенно хорошо смотрится на мобильных устройствах.

Скачать

Предварительный просмотр

Если хотите уйти от чисто белого или одноцветного дизайна, вам стоит обратить внимание на эту форму. Она поддерживает добавления фонового изображения или наложения градиента. Также есть опция входа через Facebook или Google.

Скачать

Предварительный просмотр

Это полная противоположность предыдущему варианту. Она выглядит минималистично, но в то же время очень аккуратно.

Скачать

Предварительный просмотр

Вместо того чтобы создавать форму с нуля, вы можете использовать готовый к использованию великолепный шаблон — такой как этот.

Скачать

Предварительный просмотр

Фоновое изображение с наложением синей тени, имя с аватаром и поля ввода — это форма авторизации №12. Для кнопки входа в систему добавлен эффект наведения.

Скачать

Предварительный просмотр

Шаблон с разделением экрана, в котором одна половина предназначена для изображения, а другая — для формы.

Скачать

Предварительный просмотр

В этой подборке есть и простые, и более сложные формы входа. А шаблон №14 — из числа минималистичных.

Скачать

Предварительный просмотр

Довольно минималистичная форма, но в ее верхней части можно добавить баннер. Благодаря этой небольшой опции можно сделать форму более привлекательной.

Скачать

Предварительный просмотр

Это форма входа с полноэкранным изображением, поверх которого размещаются поля для ввода логина и пароля, а также кнопка с эффектом наведения.

Скачать

Предварительный просмотр

Чтобы сделать форму более персонализированной, можно использовать этот шаблон. Он включает в себя изображение, расположенное сбоку.

Скачать

Предварительный просмотр

Если хотите выделиться и сохранить оригинальность, используйте форму входа №18. Кому-то нравятся простые страницы входа, в то время как другие хотят иметь дополнительные преимущества.

Скачать

Предварительный просмотр

Яркая, энергичная и захватывающая — это все о данной форме входа. Она полностью адаптивная, оптимизирована под мобильные устройства и совместима со всеми основными веб-браузерами.

Скачать

Предварительный просмотр

Градиентный фон, черная кнопка с эффектом наведения, поля для ввода логина и пароля, а также раздел «Забыли пароль?» Все это есть в форме авторизации №20.

Скачать

Предварительный просмотр

Форма скрыта, если не нажата ссылка «Войти». Отличная функция для сайтов, которые хотят обойтись без отдельной страницы для входа. Вы можете отобразить форму в любом месте сайта с помощью этого мощного инструмента.

Скачать

Разработано для форм подписки с использованием вкладок и меток.

Скачать

Что раньше останавливало людей, когда они хотели авторизоваться на WordPress -сайте так это слишком простой внешний вид. В этой форме сохранен популярный дизайн, но к нему добавлено цветовое оформление.

Скачать

Когда вы нажмете кнопку “Click me”, расположенную в правом верхнем углу, с помощью анимации форма входа будет преобразована в форму регистрации.

Скачать

Это форма, созданная с использованием SCSS. Расширение CSS, которое добавляет базовому языку новые возможности и элегантность. Оно позволяет использовать переменные, вложенные правила, встроенный импорт и многое другое.

Скачать

Это анимированная форма входа, а верхняя часть “Hey you, Login already” преобразуется в форму при нажатии кнопки.

Скачать

Пример того, как создать простую форму входа в систему с помощью HTML5 и CSS3. В ней применяются псевдо элементы (:after и :before) для создания эффекта нескольких страниц. Эта форма использует HTML5, чтобы упростить валидацию и представление данных.

Скачать

Если вы ввели неправильный пароль, то будете уведомлены об этом с помощью красивого эффекта дрожания. Простое и эффективное решение.

Скачать

Блочная форма авторизации — это небольшой сюрприз.Попробуйте ввести имя пользователя “admin” и пароль “1234”, чтобы увидеть ее в действии.

Скачать

Аккуратная небольшая форма входа. Когда вы нажмете кнопку “LOGIN”, расположенную слева, будет отображена форма авторизации.

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Скачать

Вадим Дворниковавтор-переводчик статьи «60 Free HTML5 And CSS3 Login Forms For Your Website 2018»

#20. Делаем авторизацию пользователей на сайте

  • Классы представлений, регистрация, оптимизация
  • Классы представлений: ListView, DetailView, CreateView
  • Основы ORM Django за час
  • Mixins — убираем дублирование кода
  • Постраничная навигация (пагинация)
  • Регистрация пользователей на сайте
  • Делаем авторизацию пользователей на сайте
  • Оптимизация сайта с Django Debug Toolbar
  • Включаем кэширование данных
  • Использование капчи captcha
  • Тонкая настройка админ панели
  • Начинаем развертывание Django-сайта на хостинге
  • Завершаем развертывание Django-сайта на хостинге

  • Поделиться

    Наш канал

Смотреть материал на видео

Архив проекта: lesson-20-coolsite. zip

На предыдущем занятии мы рассмотрели механизм регистрации пользователей. Продолжим эту тему и поговорим об авторизации пользователей на сайте.

Когда на север приходит запрос от пользователя, то на стороне сайта важно знать авторизован этот пользователь уже или нет. То есть, он мог ранее уже регистрироваться и авторизоваться на сайте, фреймворк Django сохранил эту информацию в сессии и при поступлении очередного запроса от этого же пользователя мы его должны воспринимать как авторизованного:

Если же пользователь не авторизован, то на сайте должен быть реализован механизм авторизации. Обычно, это форма, где пользователь вводит логин и пароль:

Именно этот функционал мы и реализуем на данном занятии. А подробную информацию об авторизации можно почитать на странице русскоязычной документации:

https://djbook. ru/rel3.0/topics/auth/default.html

Итак, первым делом добавим в файле views.py класс представления, отвечающий за отображение формы авторизации: 

class LoginUser(DataMixin, LoginView):
    form_class = AuthenticationForm
    template_name = 'women/login.html'
 
    def get_context_data(self, *, object_list=None, **kwargs):
        context = super().get_context_data(**kwargs)
        c_def = self.get_user_context(title="Авторизация")
        return dict(list(context.items()) + list(c_def.items()))

В качестве базового класса используется LoginView, в котором реализована вся необходимая логика работы, а также стандартный класс формы AuthenticationForm. Затем, мы указываем наш шаблон login.html для отображения формы со стандартным содержимым: 

{% extends 'women/base.html' %}
 
{% block content %}
<h2>{{title}}</h2>
 
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Войти</button>
</form>
 
{% endblock %}

Осталось в файле urls. py связать маршрут login с нашим классом представления: 

path('login/', LoginUser.as_view(), name='login'),

а функцию представления login поставим в комментарии. Все, если теперь перейти в браузер и щелкнуть по ссылке «Войти», то увидим стандартную форму авторизации. Причем, она уже работает. Давайте введем «user1», пароль и при нажатии на кнопку «Войти» происходит авторизация пользователя и делается автоматическое перенаправление в профайл. Нам это не нужно. Изменим адрес перенаправления, переопределив метод get_success_url() в классе LoginUser: 

class LoginUser(DataMixin, LoginView):
...
    def get_success_url(self):
        return reverse_lazy('home')

Теперь, при авторизации будем попадать на главную страницу. Этот же эффект можно получить, определив константу: 

LOGIN_REDIRECT_URL = '/'

в файле settings.py пакета конфигурации coolsite.

Следующим шагом улучшим отображение формы авторизации. Для этого в файле forms.py пропишем класс LoginUserForm, унаследовав его от базового AuthenticationForm: 

class LoginUserForm(AuthenticationForm):
    username = forms.CharField(label='Логин', widget=forms.TextInput(attrs={'class': 'form-input'}))
    password = forms.CharField(label='Пароль', widget=forms.PasswordInput(attrs={'class': 'form-input'}))

И, затем, укажем его в классе представления LoginUser: 

class LoginUser(DataMixin, LoginView):
    form_class = LoginUserForm
...

Также в шаблоне login.html сделаем вывод полей через цикл: 

<div>{{ form.non_field_errors }}</div>
 
{% for f in form %}
<p><label for="{{ f.id_for_label }}">{{f.label}}: </label>{{ f }}</p>
<div>{{ f.errors }}</div>
{% endfor %}

Обратите внимание, вначале не забываем делать отображение общих ошибок коллекции form.non_field_errors. Теперь форма выглядит гораздо лучше.

Следующим шагом, авторизованным пользователям вместо ссылок «Регистрация» и «Войти» будем показывать ссылку «Выйти». Для этого, в шаблоне base.html, добавим следующую проверку: 

{% if request.user.is_authenticated %}
<li> {{user.username}} | <a href="{% url 'logout' %}">Выйти</a></li>
{% else %}
<li><a href="{% url 'register' %}">Регистрация</a> | <a href="{% url 'login' %}">Войти</a></li>
{% endif %}

Здесь используется объект request, через него обращаемся к объекту user и уже у этого объекта проверяем свойство is_authenticated. Если оно принимает значение True, значит, пользователь авторизован, иначе – не авторизован. Для авторизованных пользователей отображается ссылка «Выйти» с именем маршрута logout. Пропишем его в файле urls.py: 

path('logout/', LoginUser.as_view(), name='logout'),

Если теперь обновить страницу сайта, то увидим эту ссылку «Выйти». Создадим для нее функцию представления, так как непосредственного отображения страницы она не предполагает. Эта функция будет иметь вид: 

def logout_user(request):
    logout(request)
    return redirect('login')

Мы здесь используем стандартную функцию logout() фреймворка Django для выхода пользователя. А, затем, перенаправляем его на форму авторизации.

В принципе, в базовом варианте авторизация готова. Но мы сделаем еще одно улучшение. При успешной регистрации пользователя будем автоматически его авторизовывать, что, мне кажется логичным действием. Для этого, в классе RegisterUser переопределим специальный метод form_valid(): 

    def form_valid(self, form):
        user = form.save()
        login(self.request, user)
        return redirect('home')

Он отрабатывает при успешной проверки формы регистрации, а значит, при успешной регистрации. Здесь мы самостоятельно сохраняем форму (добавляем пользователя в БД), а затем, вызываем функцию фреймворка Django login для авторизации пользователя. После этого, делаем перенаправление на главную страницу.

Давайте посмотрим как это будет работать. Откроем форму регистрации, заполним поля и, нажимая на кнопку «Регистрация», попадаем на главную страницу. В главном меню рядом со ссылкой «Выйти» видим имя только что зарегистрированного пользователя, следовательно, мы вошли именно под ним.

Вот так, довольно просто в Django можно выполнять авторизацию пользователей на сайте.

Видео по теме

#1. Django — что это такое, порядок установки

#2. Модель MTV. Маршрутизация. Функции представления

#3. Маршрутизация, обработка исключений запросов, перенаправления

#4. Определение моделей. Миграции: создание и выполнение

#5. CRUD — основы ORM по работе с моделями

#6. Шаблоны (templates). Начало

#7. Подключение статических файлов. Фильтры шаблонов

#8. Формирование URL-адресов в шаблонах

#9. Создание связей между моделями через класс ForeignKey

#10. Начинаем работу с админ-панелью

#11. Пользовательские теги шаблонов

#12. Добавляем слаги (slug) к URL-адресам

#13. Использование форм, не связанных с моделями

#14. Формы, связанные с моделями. Пользовательские валидаторы

#15. Классы представлений: ListView, DetailView, CreateView

#16. Основы ORM Django за час

#17. Mixins — убираем дублирование кода

#18. Постраничная навигация (пагинация)

#19. Регистрация пользователей на сайте

#20. Делаем авторизацию пользователей на сайте

#21. Оптимизация сайта с Django Debug Toolbar

#22. Включаем кэширование данных

#23. Использование капчи captcha

#24. Тонкая настройка админ панели

#25. Начинаем развертывание Django-сайта на хостинге

#26. Завершаем развертывание Django-сайта на хостинге

  • Предыдущая
  • Следующая

Как создать простую страницу входа в HTML с помощью кода CSS

Создание страницы входа — важный шаг для любого веб-сайта или приложения, требующего аутентификации пользователя. Это позволяет пользователям безопасно входить в систему и получать доступ к своей личной информации. В этой статье мы покажем вам, как создать простую страницу входа в систему в HTML с помощью кода CSS. Это руководство поможет вам создать профессионально выглядящую страницу входа, удобную для навигации и использования. Вы увидите, как написать код HTML и CSS для простой страницы входа с именем пользователя и паролем.

HTML означает язык гипертекстовой разметки. Это самый важный язык разметки, который можно использовать для создания веб-страницы. Он используется для отображения текста, изображений, аудио и видео на веб-странице.

CSS означает каскадные таблицы стилей. Он используется для оформления HTML-документов. CSS может создавать адаптивные веб-страницы и используется для стилизации и набора правил форматирования. Он используется для целей проектирования. Расширение CSS (.CSS).

Существует три типа CSS:

  • Встроенный CSS

  • Внутренний CSS

  • Внешний CSS

Шаг 1

Создайте новую папку и дайте ей имя. В папке сохраните файл HTML и CSS. После создания папок откройте возвышенный текстовый редактор.

Шаг 2

Нажмите «Файл», «Выбрать новый файл» и нажмите «Сохранить». Дайте файлу имя «index.html».

Шаг 3

Затем нажмите «Файл», затем «Новый файл» и нажмите «Сохранить». Дайте файлу имя «style.css».

Шаг 4

Теперь свяжите HTML и CSS с HTML-файлом, который вы только что скопировали, и вставьте этот код в тег заголовка:

Шаг 5

Затем создайте структуру страницы входа, используя HTML, имя пользователя и пароль.

 

<голова>
Форма входа


<тело>
 
Страница входа
     

Шаг 6

Затем напишите код в CSS, чтобы применить стиль к HTML, чтобы вы могли изменить внешний вид страницы входа.

 корпус
{
поле: 0;
отступ: 0;
фоновый цвет:#6abadeba;
семейство шрифтов: 'Arial';
}
.авторизоваться{
ширина: 382 пикселя;
переполнение: скрыто;
поле: авто;
поле: 20 0 0 450 пикселей;
отступ: 80 пикселей;
фон: #23463f;
радиус границы: 15 пикселей ;

}
h3{
выравнивание текста: по центру;
цвет: #277582;
отступ: 20 пикселей;
}
этикетка{
цвет: #08ffd1;
размер шрифта: 17 пикселей;
}
#Имя{
ширина: 300 пикс.;
высота: 30 пикс.;
граница: нет;
радиус границы: 3 пикселя;
padding-left: 8px;
}
#Проходить{
ширина: 300 пикс.;
высота: 30 пикс.;
граница: нет;
радиус границы: 3 пикселя;
padding-left: 8px;

}
#бревно{
ширина: 300 пикс.;
высота: 30 пикс.;
граница: нет;
радиус границы: 17 пикселей;
padding-left: 7px;
цвет синий;


}
охватывать{
белый цвет;
размер шрифта: 17 пикселей;
}
а {
поплавок: справа;
цвет фона: серый;
}  

Шаг 7

До использования кода CSS вывод выглядел следующим образом:

После использования кода CSS вывод выглядел следующим образом:

Мы успешно создали страницу входа. Я надеюсь, что эта статья будет полезна для вас. Если у вас есть какие-либо комментарии к этой статье, пожалуйста, спросите в разделе комментариев.

65+ Страница входа в HTML с кодом CSS — CodeHim

Страница входа — это одна из самых важных страниц веб-сайта/приложения, которая позволяет авторизованным пользователям получать доступ ко всему сайту или его части. Для сайтов, защищенных входом в систему, страница входа/регистрации является самой первой страницей, которую показывают пользователям. Будь то страница регистрации или входа в систему, она должна быть привлекательной, удобной и простой в использовании. Вот тщательно отобранная коллекция дизайнов страниц входа с предварительным просмотром в реальном времени и загружаемым кодом HTML CSS. Вы можете интегрировать эти готовые к использованию шаблоны форм в свой проект, чтобы сэкономить время и силы.

Этот набор форм регистрации/входа имеет разные типы страниц входа. Каждая страница входа имеет различные функции и функции. Вы можете просмотреть демонстрацию и загрузить исходный код HTML и CSS для страницы входа, которая вам подходит.

1. Простая страница входа в систему в формате HTML

Ниже приведена простая форма входа с чистым пользовательским интерфейсом для входа в систему. Этот шаблон формы входа имеет заголовок, поле ввода для электронной почты и пароля, ссылку на страницу с забытым паролем. и две кнопки «зарегистрироваться» и «войти». Кроме того, он имеет достойную цветовую схему, вдохновленную Material Design. Цветовая схема может быть настроена в соответствии с вашими потребностями.

Автор: Nitesh Kumar Niranjan

Скачать демоверсию

2. Страница входа с фоновым изображением

Следующая страница входа имеет фоновое изображение с размытым эффектом. Он использует значки изображений PNG внутри входных данных электронной почты и пароля. Входы и дизайн кнопки входа в систему с выравниванием по центру. По сути, эта форма входа охватывает всю страницу для фонового изображения. В любом случае, вы можете установить конкретную оболочку, если хотите использовать ее с фиксированной шириной и высотой.

Автор: Tobias Rickmann

Скачать демоверсию

3. Страница входа в HTML5 с проверкой

Если вы хотите создать простую страницу входа в HTML5 с проверкой, то вам вполне подойдет следующая форма. Он использует атрибуты проверки HTML5 и псевдоклассы CSS для проверки имени пользователя и электронной почты. Кроме того, эта форма входа имеет простой и понятный дизайн. В любом случае, вы можете настроить его в соответствии со своим шаблоном, изменив значения CSS. 9

4. Страница входа в систему с именем пользователя и паролем. Следующая страница входа выполнена в черно-розовой цветовой гамме. Он использует значки SVG внутри поля имени пользователя и пароля. Этот шаблон страницы входа лучше всего подходит для темных тем и веб-страниц.

Автор: Марко Бидерманн

Скачать демонстрационную версию

5.

Страница входа в систему в формате HTML с кодом CSS

Вы хотите иметь многофункциональный дизайн страницы входа? хорошо, эта страница входа вполне соответствует вашим потребностям. Он поставляется со всеми необходимыми элементами, которые должны быть на идеальной странице входа. Он имеет стильные кнопки для входа через профили Facebook и Twitter.

Макет этой страницы входа разделен на две части, одна из которых показывает большой заголовок и основное руководство по входу, а другая часть отображает форму входа. Форма входа содержит заголовок, ссылку на регистрационную форму, поля ввода, флажок «Запомнить пароль» и кнопку входа.


Автор: Claudia Romano

Скачать демоверсию

6. Форма входа и регистрации в HTML

Ниже представлена ​​многофункциональная форма входа и регистрации, созданная на HTML, CSS и jQuery. По сути, он отображает две кнопки для входа и регистрации. Когда пользователь нажимает кнопку, открывается всплывающее модальное окно с вкладками для входа и регистрации. Пользователи могут легко переключаться между вкладками «Войти» и «Новая учетная запись».

Пользовательский интерфейс этой страницы входа в систему также привлекателен, он поставляется с полями ввода со значками и функцией отображения/скрытия пароля. Кроме того, он хорошо разработан с помощью jQuery для проверки полей ввода перед отправкой. Он показывает специально разработанные всплывающие подсказки об ошибках в случае недопустимого имени пользователя, электронной почты или пароля.

Автор: Эмиль

Скачать демоверсию

7. Регистрационная форма студента в HTML и CSS

Если вы работаете над дизайном шаблона образовательного веб-сайта, эта регистрационная форма студента будет вам полезна. Он создан с помощью HTML и CSS со всеми необходимыми элементами, которые требуются для отправки студентом. По сути, дизайн действительно прост, но его можно настроить с помощью дополнительного CSS в соответствии с вашими потребностями.


Автор: Roshan. Эта страница регистрации/входа использует Bootstrap для адаптивного дизайна и jQuery для проверки входных данных. Тело страницы содержит фоновое изображение, а форма имеет слегка прозрачный темный цвет. Цветовая схема по умолчанию представлена ​​черно-желтой темой. Однако вы можете установить собственный цвет в соответствии с шаблоном вашего веб-сайта, если хотите интегрировать эту форму.

Автор: Petia

Скачать демоверсию

9. HTML-страница входа с Bootstrap

Нужен чистый и отзывчивый дизайн страницы входа? следующая страница входа построена с помощью Bootstrap 4 с желтой цветовой схемой. Не волнуйтесь, если вам не нравится желтый цвет. Вы можете просто изменить цвет в соответствии с вашими потребностями. В любом случае, дизайн этой формы входа полностью построен с использованием компонента формы Bootstrap.

Автор: Ганеш

Скачать демоверсию

10. HTML-страница входа с проверкой JavaScript

Стильная форма входа, которая проверяет поля ввода и отображает настраиваемые сообщения об ошибках. Этот шаблон формы входа использует подключаемый модуль проверки jQuery для проверки полей ввода. Общий пользовательский интерфейс этой формы входа связан с Material Design. Но входные данные поставляются с дополнительной анимацией рисования границы в событии фокуса.


Автор: ioSkye

Демо Скачать

11. Форма входа в систему Modern Flat Design

В настоящее время наблюдается тенденция использования визуальных элементов плоского дизайна. Следующая простая форма входа — лучший выбор для интеграции в шаблоны плоского дизайна. По сути, он имеет чистый минималистичный дизайн со светло-серой и зеленой цветовой гаммой. Элементы ввода и кнопка входа в форму идеально оформлены с помощью CSS. Вы можете легко установить собственный цвет фона для этой формы входа, внеся небольшие изменения в CSS.


Автор: Айгарс Силкалнс

Загрузка демоверсии

12. Классическая форма входа

Следующая форма входа поставляется с градиентным цветом фона CSS и анимированными элементами ввода.

No related posts.