наверх





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


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

Начнем с HTML разметки.

HTML



<div class="login">
    <h5>Авторизация</h5>
    <br><input type="text" name="login" class="input" placeholder="E-mail">
    <br><input type="password" name="login" class="input" placeholder="Пароль">
    <br><input type="submit" name="login" class="loginsubmit" value="Войти"> <a href="#" class="loginsubmit">Регистрация</a>
</div>


Кстати, если вы еще не знакомы с атрибутом из HTML5 placeholder, то пора это сделать. Данный атрибут создает "мнимый" текст внутри текстового поля, после ввода в данное поле любой информации - он исчезает. То есть, показывает, что это за поле и как его нужно использовать.
Так же, на него не подействовало значение атрибута type password, то есть не "превратило" его в звездочки.

CSS



Сначала просто оформим наш класс login. Здесь были использованы: тень, градиент, обводка, ширина, округления, в общем, много чего.

.login {
    width:277px; /* Ширина */
    border-bottom:1px solid #CFCFCF; /* Нижняя обводка */
    border-right:1px solid #CFCFCF;    /* Обводка справа */
    border-left:1px solid #CFCFCF;    /* Обводка слева */
    /* градиент старт */
    background: rgb(244,244,244);
    background: -moz-linear-gradient(top,  rgb(244,244,244) 1%, rgb(223,223,223) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(244,244,244)), color-stop(100%,rgb(223,223,223)));
    background: -webkit-linear-gradient(top,  rgb(244,244,244) 1%,rgb(223,223,223) 100%);
    background: -o-linear-gradient(top,  rgb(244,244,244) 1%,rgb(223,223,223) 100%);
    background: -ms-linear-gradient(top,  rgb(244,244,244) 1%,rgb(223,223,223) 100%);
    background: linear-gradient(top,  rgb(244,244,244) 1%,rgb(223,223,223) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#dfdfdf',GradientType=0 );
    /* градиент конец */
    /* округления старт */
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    /* округления конец */
    padding:10px; /* Внутренние отступы */
    color:#000;    /* Цвет текста */
    box-shadow:2px 4px 4px #EEEEEE;    /* тень */
}


А вот что получилось:



Теперь стоит оформить заголовок, слово "Авторизация" или тег <h5>:

.login h5{
    font-size:14pt; /* Размер шрифта */
    text-shadow:1px 1px 1px #F1F1F1; /* Тень текста */
    font-weight:bold;    /* делаем текст жирным */
    margin:0; padding:0;    /* Внешние, внутренние отступы */
    color:#919191;    /* Цвет */
}


Получилось просто:



Теперь оформим саму кнопку "Войти", ну и ссылку "Регистрация", у которой будут те же свойства, как и у кнопки:

.loginsubmit {
    /* градиент старт */
    background: rgb(83,150,244);
    background: -moz-linear-gradient(top,  rgb(83,150,244) 0%, rgb(51,130,247) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(83,150,244)), color-stop(100%,rgb(51,130,247)));
    background: -webkit-linear-gradient(top,  rgb(83,150,244) 0%,rgb(51,130,247) 100%);
    background: -o-linear-gradient(top,  rgb(83,150,244) 0%,rgb(51,130,247) 100%);
    background: -ms-linear-gradient(top,  rgb(83,150,244) 0%,rgb(51,130,247) 100%);
    background: linear-gradient(top,  rgb(83,150,244) 0%,rgb(51,130,247) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5396f4', endColorstr='#3382f7',GradientType=0 );
    /* градиент конец */
    /* округления старт */
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    /* округления конец */
    font-size:10pt;    /* Размер шрифта */
    cursor:pointer;    /* Форма курсора */
    color:#fff;    /* Цвет текста */
    text-decoration:none;    /* Отстуствие нижней линии (под ссылкой) */
    font-weight:bold; /* Жирный текст */
    border:1px solid #3382F7; /* Обводка */
    padding:5px;  /* Внутренние отступы */
}


Ну и осталось сделать свойства при наведении, то есть просто изменение цвета градиента:

.loginsubmit:hover {
    background: rgb(62,136,239);
    background: -moz-linear-gradient(top,  rgb(62,136,239) 1%, rgb(19,113,244) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgb(62,136,239)), color-stop(100%,rgb(19,113,244)));
    background: -webkit-linear-gradient(top,  rgb(62,136,239) 1%,rgb(19,113,244) 100%);
    background: -o-linear-gradient(top,  rgb(62,136,239) 1%,rgb(19,113,244) 100%);
    background: -ms-linear-gradient(top,  rgb(62,136,239) 1%,rgb(19,113,244) 100%);
    background: linear-gradient(top,  rgb(62,136,239) 1%,rgb(19,113,244) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e88ef', endColorstr='#1371f4',GradientType=0 );
}


А вот что получилось:



Осталось лишь оформить поле ввода информации. Здесь так же все просто: градиент, отступы, высота, ширина, обводка, внутренняя тень при фокусе:

.input {
    background: rgb(247,247,247);
    background: -moz-linear-gradient(left,  rgba(247,247,247,1) 1%, rgba(252,252,252,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(247,247,247,1)), color-stop(100%,rgba(252,252,252,1)));
    background: -webkit-linear-gradient(left,  rgba(247,247,247,1) 1%,rgba(252,252,252,1) 100%);
    background: -o-linear-gradient(left,  rgba(247,247,247,1) 1%,rgba(252,252,252,1) 100%);
    background: -ms-linear-gradient(left,  rgba(247,247,247,1) 1%,rgba(252,252,252,1) 100%);
    background: linear-gradient(left,  rgba(247,247,247,1) 1%,rgba(252,252,252,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#fcfcfc',GradientType=1 );
    border:1px solid #CFCFCF; outline:0;
    width:250px;
    height:30px;
    font-size:13pt;
    padding-left:3px;
    font-size:12pt;
    font-weight:bold;
    margin-bottom:5px;
}
.input:focus {
    box-shadow: inset 4px 4px 6px #EEEEEE;
}


Ну и вот получившийся результат:






Просмотр демо-варианта


Поделиться
Text-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный text-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.