Вход в личный кабинет 50 бесплатных рабочих html- и css-заготовок для отправных форм
HTML — язык разметки гипертекста, применяемый для структурирования и размещения контента на веб-сайте. С момента своего появления в 1990 году HTML вырос, укоренился и разветвился более сложными версиями. HTML 5 — новейшая версия HTML, популярная среди дизайнеров и разработчиков. Язык же CSS — каскадные таблицы стилей — используется для описания семантическими средствами внешнего вида документов, составленных на других языках разметки. Чаще всего CSS применяется к HTML-, XML-, XHTML-документам, хотя, не только. Задействуя в работе HTML- и CSS-заготовки, дизайнеры могут конструировать фрагменты веб-сайтов и различные веб-элементы, можно сказать, в промышленных масштабах. Есть и бесплатные рабочие HTML-/CSS-заготовки для лёгкого изготовления оригинальных форм, кнопок и разных прочих конструкций. Ещё один важный момент — бесплатное подспорье позволяет вам сэкономить время и посвятить драгоценные часы какой-то другой творческой деятельности. То есть, дизайнеры могут выбирать лучшие бесплатные HTML-/CSS-заготовки и использовать их на своих веб-сайтах, повышая тем самым удобство пользователя, а также привлекательность ресурсов. Бесплатные HTML-/CSS-заготовки можно найти во множестве источников по всей сети.
Сегодня вам предлагается подборка из 50 бесплатных HTML-/CSS-заготовок для отправных форм, которые очень пригодятся вам в вашем дизайнерском деле. Ознакомьтесь с 50 бесплатными экспонатами нашей галереи HTML-/CSS-заготовок для отправных форм и приступайте к построению интерактивных конструкций.
Деплой первого и второго варианта
Способов деплоя множество. Вот один самый простецкий.
Ставим gunicorn:
pip install gunicorn
В папке my_app создаем новый файл wsgi.py со следующим содержанием:
from app import create_app
app = create_app()И запускаем:
gunicorn wsgi:appПодробности
За основу я взял модуль
Скриншоты
Вот что получается из коробки:
Профиль пользователя после авторизации:
Создаем анимацию
Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:
#register{ z-index: 21; opacity: 0;
}Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.
Теперь самое интересное: меняем формы местами, используя псевдо класс :target. Вам нужно понять одну вещь по поводу :target: для перемещения мы будем использовать якоря. Нормальное поведение якоря — прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами.
И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none. Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).
#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s;
}Вот, что происходит: когда мы кликаем на кнопку Присоединиться, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться.
Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.
Стилизуем формы, используя css3
Во-первых, давайте назначим нашим формам базовый стиль.
#subscribe,
#login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px;
}
#login{ z-index: 22;
}Мы добавили две тени к элементу: одна — с целью создать внутреннее голубое свечение, а вторая — внешняя тень. Чуть позже я объясню вам z-index.
Здесь мы назначим свойства для шапки: