Главная » Файлы » Прочие скрипты » jQuery |
Стильная анимированная форма входа, подобная Apple на CSS3 и jQuery для вашего сайта
[ Скачать с сервера (114.2 Kb) ] | 27.10.14, 09:31:04 |
Очень прикольная форма входа. Смотрится стильно, но есть один минус - для вашей CMS вам придётся отредактировать форму так, как этого требует ваш движок, будь то uCoz, WP, Joomla и т.д. Также в архиве есть папка с чистыми элементами без надписей, чтобы вы в редакторе изображений (Фотошопе, например) могли форму под себя настроить Для начала посмотрите ДЕМО Моё тестирование в фидле: КЛИК Установка: В самый низ вашего css вставляйте: Код #formContainer { width:288px; height:321px; margin:0 auto; position:relative; z-index:1; -moz-perspective: 800px; -webkit-perspective: 800px; perspective: 800px; } #formContainer form { width:100%; height:100%; position:absolute; top:0; left:0; /* Enabling 3d space for the transforms */ -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; /* When the forms are flipped, they will be hidden */ -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; /* Enabling a smooth animated transition */ -moz-transition:0.8s; -webkit-transition:0.8s; transition:0.8s; /* Configure a keyframe animation for Firefox */ -moz-animation: pulse 2s infinite; /* Configure it for Chrome and Safari */ -webkit-animation: pulse 2s infinite; } /* Firefox Keyframe Animation */ @-moz-keyframes pulse { 0% { box-shadow:0 0 1px #008aff; } 50% { box-shadow:0 0 8px #008aff; } 100% { box-shadow:0 0 1px #008aff; } } /* Webkit keyframe animation */ @-webkit-keyframes pulse { 0% { box-shadow:0 0 1px #008aff; } 50% { box-shadow:0 0 10px #008aff; } 100% { box-shadow:0 0 1px #008aff; } } #login { background:url('/img/login_form_bg.jpg') no-repeat; z-index:100; } #recover { background:url('/img/recover_form_bg.jpg') no-repeat; z-index:1; opacity:0; /* Rotating the recover password form by default */ -moz-transform:rotateY(180deg); -webkit-transform:rotateY(180deg); transform:rotateY(180deg); } #formContainer.flipped #login { opacity:0; /** * Rotating the login form when the * flipped class is added to the container */ -moz-transform:rotateY(-180deg); -webkit-transform:rotateY(-180deg); transform:rotateY(-180deg); } #formContainer.flipped #recover { opacity:1; /* Rotating the recover div into view */ -moz-transform:rotateY(0deg); -webkit-transform:rotateY(0deg); transform:rotateY(0deg); } /*---------------------------- Inputs, Buttons & Links -----------------------------*/ #login .flipLink, #recover .flipLink { /* The blue ribbon links */ height: 65px; overflow: hidden; position: absolute; right: 0; text-indent: -9999px; top: 0; width: 65px; } #recover .flipLink { right:auto; left:0; } #login:after { /* The "Click here" tooltip */ width:98px; height:16px; content:''; position:absolute; right:-120px; top:22px; } input[type=text], input[type=password] { /* The text fields */ font: 15px'Segoe UI', Arial, sans-serif; border: none; background:none; height: 36px; left: 26px; position: absolute; top: 176px; width: 234px; text-indent: 8px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); color:#eee; outline:none; } #loginPass { top: 215px; } #recoverEmail { top:215px; } input[type=submit] { /* Submit button */ opacity:0.9; position:absolute; top:262px; left:25px; width: 239px; height:36px; cursor:pointer; border-radius:6px; box-shadow:0 1px 1px #888; border:none; color:#fff; font:14px/36px'Segoe UI Light', 'Segoe UI', Arial, sans-serif; /* CSS3 Gradients */ background-image: linear-gradient(bottom, rgb(80, 102, 127) 50%, rgb(87, 109, 136) 50%, rgb(106, 129, 155) 100%); background-image: -o-linear-gradient(bottom, rgb(80, 102, 127) 50%, rgb(87, 109, 136) 50%, rgb(106, 129, 155) 100%); background-image: -moz-linear-gradient(bottom, rgb(80, 102, 127) 50%, rgb(87, 109, 136) 50%, rgb(106, 129, 155) 100%); background-image: -webkit-linear-gradient(bottom, rgb(80, 102, 127) 50%, rgb(87, 109, 136) 50%, rgb(106, 129, 155) 100%); background-image: -ms-linear-gradient(bottom, rgb(80, 102, 127) 50%, rgb(87, 109, 136) 50%, rgb(106, 129, 155) 100%); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, rgb(80, 102, 127)), color-stop(0.5, rgb(87, 109, 136)), color-stop(1, rgb(106, 129, 155))); } input[type=submit]:hover { opacity:1; } input::-webkit-input-placeholder { color:#eee; } Следующий код туда, где должна быть форма входа: Код <div id="formContainer"> <form id="login" method="post" action="/"> <a href="#" id="flipToRecover" class="flipLink">Forgot?</a> <input type="text" name="loginEmail" id="loginEmail" placeholder="Email" /> <input type="password" name="loginPass" id="loginPass" placeholder="Password" /> <input type="submit" name="submit" value="Login" /> </form> <form id="recover" method="post" action="./"> <a href="#" id="flipToLogin" class="flipLink">Forgot?</a> <input type="text" name="recoverEmail" id="recoverEmail" placeholder="Your Email" /> <input type="submit" name="submit" value="Recover" /> </form> </div> Две картинки из архива залейте в папку img За основу взята ЭТА статья Материал подготовлен Apocalypse | |
Просмотров: 667 | Загрузок: 227 | |
Всего комментариев: 0 | |
| |