LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Need Account?
CSS
/*  style container*/
.container{
    width:98%;
    height: 100%;
    margin: 0 auto;
    font-family: sans-serif;
}
/* style form */
form{
    width: 320px;
    height: 500px;
    margin: 2rem auto 0;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.3),
                -1px -1px 3px rgba(0,0,0,0.3);
    border-radius: 1rem;
    overflow: hidden;
    padding-top: 1rem;
}
/* style place holder */
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #cad2da;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #cad2da;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #cad2da;
}
:-moz-placeholder { /* Firefox 18- */
  color: #cad2da;
}

/*logo section style*/
form .logo{
    position: relative;
    width:1rem;
    height:3rem;
    -webkit-transform: skew(-10deg) translateX(-50%);
            transform: skew(-10deg) translateX(-50%);
    background-color: #feba55;
    left: 50%;
    margin: 0;
    margin-top: 1rem;
    margin-bottom: 4rem;
    padding: 0;
}
form .logo:before,
form .logo:after{
    content: '';
    position: absolute;
    width: 100%;
}
form .logo:before{
    background-color: #40a9f8;
    left:-1.2rem;
    height: 2rem;
    bottom: 0;
}
form .logo:after{
    width: 0;
	height: 0;
	border-bottom: 1.2rem solid red;
	border-right: 1.2rem solid transparent;
    bottom: 0;
    left: 1.2rem;
}
form a{
    text-decoration: none;
}
/*field style*/
/*user name section & password section*/
form .user-name,
form .password{
    width: 90%;
    height: 5rem;
    margin: 2rem auto;
    padding-left: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    box-shadow: 0 1px 0 rgba(0,0,0,0.25);
    -webkit-transition:all 0.5s;
    transition: all 0.5s;
}
form  .container-1{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
}
form .user-name label,
form .password label{
    color: #789c9e;
}
form .user-name .container-1 .user,
form .password .container-1 .lock{
    color: #789c9e;
}
form .container-1 input[type='text'],
form .container-1 input[type='password']{
    outline: none;
    border: 1px solid transparent;
    padding:0 0.4rem;
}
form .container-1 a{
    color: #789c9e;
    -webkit-transition:color 0.3s;
    transition: color 0.3s;
}
form .container-1 a:hover{
    color: #40a9f8;
}
form .container-1 input[type='text']:focus,
form .container-1 input[type='password']:focus{
    color: #40a9f8;
}
form .sign{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height:5rem;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
form .sign button{
    outline: none;
    border: none;
    padding: 2rem;
    color: #fff;
    cursor: pointer;
    border-radius: 5px;
    background: -webkit-linear-gradient(top,#58d9e5 30%,#40a9f8 70%);
    background: linear-gradient(to bottom,#58d9e5 30%,#40a9f8 70%);
    -webkit-transition:background 0.5s ease-in-out;
    transition: background 0.5s ease-in-out;
}
form .sign button:hover{
    background: -webkit-linear-gradient(top,#40a9f8 30%,#58d9e5 70%);
    background: linear-gradient(to bottom,#40a9f8 30%,#58d9e5 70%);
}
form .sign a{
    color: #789c9e;
    -webkit-transition:color 0.3s;
    transition: color 0.3s;
}
form .sign a:hover{
    color: #40a9f8;
}
form .container-2{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 80px;
    position: relative;
}
form .balls{
    width: 140px;
    height: 140px;
    background-image: -webkit-linear-gradient(left,#58d9e5 30%,#40a9f8 70%);
    background-image: linear-gradient(to right,#58d9e5 30%,#40a9f8 70%);
    border-radius: 50%;
    position: absolute;
}
form .balls:before,
form .balls:after{
    content: '';
    display: block;
    position: absolute;
    width:60px;
    height: 60px;
    border-radius: 50%;
}
form .balls:first-of-type{
    left: 30%;
    top:1rem;
    z-index: 2;
}
form .balls:first-of-type:before{
    width:120px;
    height:120px;
    left:-60px;
    top:30px;
    background-image: -webkit-linear-gradient(left,#58d9e5 30%,#40a9f8 70%);
    background-image: linear-gradient(to right,#58d9e5 30%,#40a9f8 70%);
}
form .balls:first-of-type:after{
    left: -92px;
    top: 42.5px;
    background-image: -webkit-linear-gradient(left,#58d9e5 30%,#40a9f8 70%);
    background-image: linear-gradient(to right,#58d9e5 30%,#40a9f8 70%);
}
form .balls:last-of-type{
    top:2rem;
    left:48%;
    z-index:1;
}
form .balls:last-of-type:before{
    background: aqua;
    right: -37px;
    top: 16px;
    background-image: -webkit-linear-gradient(left,#58d9e5 30%,#40a9f8 70%);
    background-image: linear-gradient(to right,#58d9e5 30%,#40a9f8 70%);
}
JS
/*inspired by:-
https://dribbble.com/shots/3574886-Login-Screen-iOS
*/
var div1 = document.querySelector('form div.user-name'),
    div2 = document.querySelector('form div.password'),
    input1 = document.querySelector('input[type="text"]'),
    input2 = document.querySelector('input[type="password"]');
input1.addEventListener('focus', function () {
    'use strict';
    this.setAttribute('data-1', this.getAttribute('placeholder'));
    this.setAttribute('placeholder', '');
    div1.style.boxShadow = '0 1px 0 #40a9f8';
}, false);
input1.addEventListener('blur', function () {
    'use strict';
    this.setAttribute('placeholder', this.getAttribute('data-1'));
    div1.style.boxShadow = '0 1px 0 rgba(0,0,0,0.25)';
}, false);
input2.addEventListener('focus', function () {
    'use strict';
    this.setAttribute('data-1', this.getAttribute('placeholder'));
    this.setAttribute('placeholder', '');
    div2.style.boxShadow = '0 1px 0 #40a9f8';
}, false);
input2.addEventListener('blur', function () {
    'use strict';
    this.setAttribute('placeholder', this.getAttribute('data-1'));
    div2.style.boxShadow = '0 1px 0 rgba(0,0,0,0.25)';
}, false);
Host Instantly Drag and Drop Website Builder

 

Description

One page Login Form Using HTML, CSS And Java Script inspired by https://dribbble.com/shots/3574886-Login-Screen-iOS
Term
Wed, 11/29/2017 - 11:24

Related Codes

Pen ID
Pen ID
Pen ID