Another small UI/UX experiment. Password fields are quite annoying to fill. In this concept I have visualised the required password's length using dashes.
A Pen by Theodore Vorillas on CodePen.
Another small UI/UX experiment. Password fields are quite annoying to fill. In this concept I have visualised the required password's length using dashes.
A Pen by Theodore Vorillas on CodePen.
<!-- Type abcd to unlock--> | |
<div class="clr"><small>Type 1234 to unlock</small></div> | |
<span><input type="password" maxlength="4"/></span> |
$( document ).ready(function() { | |
$("input").focus(); | |
$("input").on("keyup",function(){ | |
if( $("input").val()=="1234"){ | |
$("span").addClass("active") | |
}else{ | |
$("span").removeClass("active"); | |
} | |
}) | |
}); | |
@import "compass/css3"; | |
body{ | |
background-repeat: no-repeat; | |
background-attachment: fixed; | |
overflow: hidden; | |
display: block; | |
width: 100%; | |
height: 100%; | |
text-align: center; | |
font-weight: bold; | |
font-family:Arial, sans-serif; | |
font-smoothing: antialiased; | |
perspective: 700px; | |
transform-style: preserve-3d; | |
background-color: #ffffff; | |
@include filter-gradient(#ffffff, #eae0de, horizontal); | |
@include background-image(radial-gradient(center, ellipse cover, #ffffff 0%,#eae0de 100%)); | |
} | |
.clr{ | |
height: 1px; margin-top: 200px; clear: both; text-align: center; font-weight: 100; font-size: 12px; text-indent: -18px;color:#300031; | |
} | |
input{ | |
position:relative; | |
top:50%; | |
border:0; | |
background:none; | |
font-size:60px; | |
line-height:30px; | |
width: 140px; | |
display: inline-block; | |
z-index:1000; | |
color:#300031; | |
&:focus{outline:none;} | |
} | |
span{ | |
position:relative; | |
color:#DB3665; | |
margin-top:200px; | |
display:inline; | |
&:before,&:after{position:absolute;} | |
&:before{ | |
content: "\f023"; | |
display: inline-block; | |
font-family: FontAwesome; | |
font-style: normal; | |
font-weight: normal; | |
line-height: 1; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
left: -22px; | |
top: -13px; | |
font-size: 20px; | |
} | |
&:after{ | |
content: "----"; | |
top: -8px; | |
left: 4px; | |
width: 135px; | |
z-index: 100; | |
height: 10px; | |
font-size: 69px; | |
line-height: 0px; | |
letter-spacing: 10.7px; | |
text-align: left; | |
text-indent: 0; | |
color: #DB3665; | |
} | |
} | |
span.active{ | |
color: #00700C; | |
&:before{content: "\f09c";} | |
} |