Правила форума Подписки
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Баннерообмен с SVK Portal (2)
Hibernation Evil - Эпизод... (0)
Народная Солянка 2016 [OG... (0)
У костра (193)
Вступить в группировку (40)
У костра (193)
Анекдоты (145)
Города (94)
Обновление сайта (68)
Создание НПС (63)
StraNNik (1366)
RamzeS (523)
Каратель (178)
Narkostalker (127)
Кракен (93)
nikiz (05.07.2020)
0owlrly (23.06.2020)
NightyBob (19.06.2020)
keelq458 (17.06.2020)
fondyu01rus (30.05.2020)
  • Страница 1 из 1
  • 1
Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Форма регистрации с CSS3 и jQuery
Форма регистрации с CSS3 и jQuery
Бармен
Бармен
Пропуск №: 63
Регистрация: 12.04.2014
Ранг: Познающий
Сообщений: 74
Карма: 1 | Хабар: 8
stalkers
Дата: Вторник, 19.05.2015, 21:48/ Сообщение №: 1

Создаем качественную, темную форму входа, используя CSS3, jQuery и HTML. Данная форма подойдет как под темный дизайн, так и под светлый.

Установка:
HTML разметка:

Код
<form action="#">   
    <input type="text" name="username" placeholder="логин">    
    <input type="password" name="password" placeholder="пароль">    
    <span>   
    <input type="checkbox" name="checkbox">   
    <label for="checkbox">запомнить</label>   
    </span>    
    <input type="submit" value="Войти">   
    </form>

CSS:
Код
.login-form,   
.login-form h1,   
.login-form span,   
.login-form input,   
.login-form label {   
    margin: 0;   
    padding: 0;   
    border: 0;   
    outline: 0;   
}   

/* Form Container */   
.login-form {   
    position: relative;   
    width: 200px;   
    height: 200px;   
    padding: 15px 25px 0 25px;   
    margin-top: 15px;   
    cursor: default;   

    background-color: #141517;   

    -webkit-border-radius: 5px;   
    -moz-border-radius: 5px;   
    border-radius: 5px;   

    -webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);   
    -moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);   
    box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);   
}   

.login-form:before {   
    position: absolute;   
    top: -12px;   
    left: 10px;   

    width: 0px;   
    height: 0px;   
    content: '';   
       
    border-bottom: 10px solid #141517;   
    border-right: 10px solid #141517;   
    border-top: 10px solid transparent;   
    border-left: 10px solid transparent;   
}   

/* Form Title */   
.login-form h1 {   
    line-height: 40px;   
    font-family: 'Myriad Pro', sans-serif;   
    font-size: 22px;   
    font-weight: normal;   
    color: #e4e4e4;   
}   

/* Form Input General Styles */   
.login-form input[type=text],   
.login-form input[type=password],   
.login-form input[type=submit] {   
    line-height: 14px;   
    margin: 10px 0;   
    padding: 6px 15px;   
    border: 0;   
    outline: none;   

    font-family: Helvetica, sans-serif;   
    font-size: 12px;   
    font-weight: bold;   
    text-shadow: 0px 1px 1px rgba(255,255,255, .2);   

    -webkit-border-radius: 26px;   
    -moz-border-radius: 26px;   
    border-radius: 26px;   

    -webkit-transition: all .15s ease-in-out;   
    -moz-transition: all .15s ease-in-out;   
    -o-transition: all .15s ease-in-out;   
    transition: all .15s ease-in-out;   
}   

/* Form User&Pass Input Styles */   
.login-form input[type=text],   
.login-form input[type=password],   
.js .login-form span {   
    color: #686868;   
    width: 170px;   

    -webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);   
    -moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);   
    box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6);   

    background: #989898;   
    background: -moz-linear-gradient(top, #ffffff 0%, #989898 100%);   
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#989898));   
    background: -webkit-linear-gradient(top, #ffffff 0%,#989898 100%);   
    background: -o-linear-gradient(top, #ffffff 0%,#989898 100%);   
    background: -ms-linear-gradient(top, #ffffff 0%,#989898 100%);   
    background: linear-gradient(top, #ffffff 0%,#989898 100%);   
}   

.login-form input[type=text]:hover,   
.login-form input[type=password]:hover {   
    -webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);   
    -moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);   
    box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .6), 0px 0px 5px rgba(255,255,255, .5);   
}   

.login-form input[type=text]:focus,   
.login-form input[type=password]:focus {   
    background: #e1e1e1;   
    background: -moz-linear-gradient(top, #ffffff 0%, #e1e1e1 100%);   
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e1e1e1));   
    background: -webkit-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);   
    background: -o-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);   
    background: -ms-linear-gradient(top, #ffffff 0%,#e1e1e1 100%);   
    background: linear-gradient(top, #ffffff 0%,#e1e1e1 100%);   
}   

/* Form Submit Input Styles */   
.login-form input[type=submit],   
.js .login-form span.checked:before {   
    float: right;   
    cursor: pointer;   

    color: #445b0f;   

    -webkit-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);   
    -moz-box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);   
    box-shadow: inset 1px 1px 1px 0px rgba(255,255,255, .45), 0px 1px 1px 0px rgba(0,0,0, .3);   
}   

.login-form input[type=submit]:hover {   
    -webkit-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);   
    -moz-box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);   
    box-shadow: inset 1px 1px 3px 0px rgba(255,255,255, .8), 0px 1px 1px 0px rgba(0,0,0, .6);   
}   

.login-form input[type=submit]:active {   
    -webkit-box-shadow: none;   
    -moz-box-shadow: none;   
    box-shadow: none;   
}   

/* Form Green Gradient Styles */   
.login-form input[type=submit],   
.js .login-form span.checked:before {   
    background: #a5cd4e;   
    background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%);   
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a));   
    background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);   
    background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);   
    background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);   
    background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%);   
}   

/* Form Checkbox Input Styles */   
.js .login-form input[type=checkbox] {   
    position: fixed;   
    left: -9999px;   
}   

.login-form span {   
    position: relative;   
    margin-top: 15px;   
    float: left;   
}   

.js .login-form span {   
    width: 16px;   
    height: 16px;   
    cursor: pointer;   

    -webkit-border-radius: 2px;   
    -moz-border-radius: 2px;   
    border-radius: 2px;   
}   

.js .login-form span.checked:before {   
    content: '';   
    position: absolute;   
    top: 4px;   
    left: 4px;   
    width: 8px;   
    height: 8px;   

    -webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);   
    -moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);   
    box-shadow: 0px 1px 1px 0px rgba(255,255,255, .45), inset 0px 1px 1px 0px rgba(0,0,0, .3);   
}   

/* Form Label Styles */   

.login-form label {   
    position: absolute;   
    top: 1px;   
    left: 25px;   
    font-family: sans-serif;   
    font-weight: bold;   
    font-size: 12px;   
    color: #e4e4e4;   
}

jQuery:
Подключаем jQuery библиотеку и скрипт:
Код
$(document).ready(function() {   

    // Check if javascript is enabled   
    $('body').addClass('js');   

    // Make the checkbox checked on load   
    $('.login-form span').addClass('checked').children('input').attr('checked', true);   

    // Click function   
    $('.login-form span').on('click', function() {   

    if ($(this).children('input').attr('checked')) {   
    $(this).children('input').attr('checked', false);   
    $(this).removeClass('checked');   
    }   

    else {   
    $(this).children('input').attr('checked', true);   
    $(this).addClass('checked');   
    }   
       
    });   

});




Форум[S-R] | Развлекательный форум » Мастерская портала » Скрипты » Разное » Форма регистрации с CSS3 и jQuery
  • Страница 1 из 1
  • 1
Поиск:

Авторское право на игру и использованные в ней материалы принадлежат GSC Game World.
Любое использование материалов сайта возможно только с разрешения его администрации!
Для корректного отображения сайта, рекомендуем использовать обновленный Yandex.Browser
Powered by StraNNik | Хостинг от uCoz | Рекомендуем AdGuard
© 20.11.2013-13.07.2020