Статьи

Простая, чистая, привлекательная форма регистрации CSS3

Январь 31, 2019

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

В этой статье вы узнаете, как создать чистую и привлекательную форму регистрации в CSS3.

Посмотреть демо

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

HTML

Вот как выглядит разметка для этой формы регистрации:

<form id="signup">
        <h1>Start doing cool stuff in seconds.</h1>
        <input type="email" placeholder="john.doe@email.com" required="">
        <input type="password" placeholder="Choose your password" required="">
        <input type="password" placeholder="Confirm password" required="">
        <button type="submit">Sign up for free!</button>
</form>

Для этого примера я решил использовать кнопку вместо классического ввода type = «submit». Таким образом, в дальнейшем, будет намного проще ориентироваться на элементы формы (без добавления каких-либо идентификаторов или классов).

Заполнитель полифилла

Вы можете легко заметить новые вещи HTML5, такие как type = «email», заполнитель или требуемый. Для атрибута placeholder мы добавим полифилл HTML5, который будет имитировать его эффект для старых браузеров.

В этом примере мы будем использовать Матиас Bynens «ы Заполнитель JQuery плагин . Это очень круто и очень рекомендуется.

CSS

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

Стили форм

После того, как я создал простой шаблон изображения 3х4, я преобразовал его в строку base64. Для этого я использовал этот замечательный инструмент Image to Base64 Converter . Вы можете видеть это в стилях как фон для #signup.

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

#signup {
        width: 550px;
        height: 330px;
        margin: 100px auto 50px auto;
        padding: 20px;
        position: relative;
        background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAAECAMAAAB883U1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF7+/v7u7u////REBVnAAAAAN0Uk5T//8A18oNQQAAABZJREFUeNpiYGJiYmBiYgRiBhAGCDAAALsAFJhiJ+UAAAAASUVORK5CYII=);
        border: 1px solid #ccc;
        border-radius: 3px;
}

#signup::before,
#signup::after {
        content: "";
        position: absolute;
        bottom: -3px;
        left: 2px;
        right: 2px;
        top: 0;
        z-index: -1;
        background: #fff;
        border: 1px solid #ccc;
}

#signup::after {
        left: 4px;
        right: 4px;
        bottom: -5px;
        z-index: -2;
        box-shadow: 0 8px 8px -5px rgba(0,0,0,.3);
}

Heading

Я попытался создать красивый и абстрактный дизайн для заголовка формы, так что вот мой результат:

#signup h1 {
        position: relative;
        font: italic 1em/3.5em 'trebuchet MS',Arial, Helvetica;
        color: #999;
        text-align: center;
        margin: 0 0 20px;
}

#signup h1::before,
#signup h1::after{
        content:'';
        position: absolute;
        border: 1px solid rgba(0,0,0,.15);
        top: 10px;
        bottom: 10px;
        left: 0;
        right: 0;
}

#signup h1::after{
        top: 0;
        bottom: 0;
        left: 10px;
        right: 10px;
}

Использование псевдоэлементов (снова) ?

Элементы формы

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

::-webkit-input-placeholder {
   color: #bbb;
}

:-moz-placeholder {
   color: #bbb;
}                                       

.placeholder{
        color: #bbb; /* polyfill */
}               

#signup input{
        margin: 5px 0;
        padding: 15px;
        width: 100%;
        *width: 518px; /* IE7 and below */
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 3px;
}

#signup input:focus{
        outline: 0;
        border-color: #aaa;
        box-shadow: 0 2px 1px rgba(0, 0, 0, .3) inset;
}               

#signup button{
        margin: 20px 0 0 0;
        padding: 15px 8px;
        width: 100%;
        cursor: pointer;
        border: 1px solid #2493FF;
        overflow: visible;
        display: inline-block;
        color: #fff;
        font: bold 1.4em arial, helvetica;
        text-shadow: 0 -1px 0 rgba(0,0,0,.4);
        background-color: #2493ff;
        background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
        transition: background-color .2s ease-out;
        border-radius: 3px;
        box-shadow: 0 2px 1px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .5) inset;
}

#signup button:hover{
        background-color: #7cbfff;
        border-color: #7cbfff;
}

#signup button:active{
        position: relative;
        top: 3px;
        text-shadow: none;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset;
}

Это оно!

Посмотреть демо

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

Это просто еще один классный пример, созданный с использованием великой силы CSS3. Я надеюсь, что вы найдете это полезным для ваших проектов, и, пожалуйста, не забудьте оставить комментарий, если вам понравилось (или нет). ?

Если вам понравилась эта статья, вам также может понравиться:

 

41
Share: