Java, UX, HTML, CSS, WEB-design

10. Модальный вход/регистрация с открытым исходным кодом Windows для разработчиков

Краткое описание по статье 10. Модальный вход/регистрация с открытым исходным кодом Windows для разработчиков

Название: 10. Модальный вход/регистрация с открытым исходным кодом Windows для разработчиков . Краткое описание: ⭐ Существует так много ресурсов и руководств по . Дата публикации: 15.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года


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

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

С помощью этого пользовательского интерфейса посетители могут зарегистрироваться или войти на сайт из любая страница – все динамически с использованием JavaScript.

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

Профессиональный модальный

См. Модальное окно входа/регистрации с ручкой от Adventures in Missions (@adventuresinmissions) на CodePen.

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

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

На самом деле мое внимание привлекает анимация и стиль интерфейса. Модальное просто чувствует так чисто и он может работать практически на любом веб-сайте.

Функция отображения/скрытия в поле пароля — приятное дополнение.

Базовая коробка jQuery

См. «Вход и регистрация во всплывающем окне Pen с помощью jQuery» Биджая Пахрина (@monkeytempal) на CodePen.

Биджай Пахрин разработал довольно простой модальный jQuery с кнопками входа OAuth для Facebook и Google.

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

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

Скользящая анимация

См. модальный вход/регистрацию Pen от Марина Беговича (@Rinma95) на CodePen.

Для динамического подхода к модальным окнам входа ознакомьтесь с этим фрагментом, созданным Марином Беговичем.

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

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

Семантическая форма пользовательского интерфейса

См. Pen Modal с формой входа Semantic-UI от Saad (@SaadRegal) на CodePen.

Большинство разработчиков знают о фреймворке Semantic UI, так как это один из самых популярных вариантов — помимо Bootstrap.

А с помощью этого модального скрипта вы можете добавить пользовательскую форму регистрации/входа на любую страницу Semantic UI всего несколькими строками кода. Этот скрипт опирается на стили по умолчанию и использует менее 10 строк JavaScript. Разговор о простом!

Не говоря уже о том, что нет стилей CSS для копирования, так как это возвращается к таблице семантических стилей по умолчанию.

Чистый модальный вход

См. модальную форму входа Pen Clean от Эша Скотта (@Ashbo) на CodePen.

Редко можно найти пригодные для использования модальные окна, построенные на чистом CSS. Но этот пример, созданный разработчиком Эшем Скоттом, — один из лучших, что я видел.

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

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

Bootstrap Модальный

См. Пример модального входа в Pen Bootstrap от Anis Nouira (@Weezlo) на CodePen.

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

Посмотрите на это модальное окно BS3, работающее на Bootstrap 3.3.6. Хотя он должен работать с Bootstrap 4, он еще не тестировался.

Разработчик Анис Нуира построил весь этот модальный вход в Bootstrap, используя чистый CSS – что еще более впечатляет.

Однако это предлагает только одну форму входа. Ручка не имеет дополнительного пользовательского интерфейса для формы регистрации или подписки.

Всплывающее окно с вкладками

См. всплывающее окно Pen Modal с формами входа / регистрации! Крис (@thebeloved88) на CodePen.

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

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

Обратите внимание, что при этом используется большое количество jQuery, всего почти 100 строк кода.

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

Модальное окно на чистом CSS

См. Модальное окно Pen Pure CSS / Войти и зарегистрироваться / Вкладки / All Responsive by Andrew (@WhoIsAndrew) на CodePen.

Вот еще одно решение на чистом CSS для разработчиков, которые хотят избежать использования JavaScript.

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

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

Панель навигации с модальным входом

См. панель навигации Pen с модальным входом от Nashwa (@Nashwa_Ashour) на CodePen.

Несколько окон входа в систему являются единственным элементом на странице. Большинство из них интегрированы в верхнюю панель навигации, что соответствует стилю дизайна этого пера.

Анимация действительно чистая, с очень простым дизайном пользовательского интерфейса. И весь интерфейс работает на Bootstrap, что приятно (хотя и не обязательно).

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

Модальный вход в панель

См. Модальный вход Pen Painel от Rodrigo (@skazee) на CodePen.

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

Начальное модальное окно спрашивает, хотите ли вы войти в систему или зарегистрировать новую учетную запись. Затем все, что вы выбираете, просто появляется в поле зрения. Простой!

Если вам нравится этот тип потока UI/UX, попробуйте продублировать этот мод для своего собственного проекта. Чтобы изменить язык и стили, потребуется некоторое редактирование, но это касается практически каждого пера.

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

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.


Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — 10. Модальный вход/регистрация с открытым исходным кодом Windows для разработчиков

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»