<!-- Vanishing Placeholder. Provided by Top Site List Planet http://www.top-site-list.com -->
<style type="text/css">
body{
margin: 0;
padding: 0;
background-color: rgb(52, 73, 94);
}
h2{
color:#ecf0f1;
text-align:center;
font-family: Helvetica, Arial, sans-serif;
font-size:20pt;
text-transform:uppercase;
}
.my_input{
position: relative;
font-family: Helvetica, Arial, sans-serif;
font-size: 18pt;
line-height: 2.6em;
height: 40px;
margin-bottom: 10px;
padding: 0;
width: 200px;
}
form{
height: 120px;
width: 300px;
margin:50px auto;
}
input{
font-size: 18pt;
border: none;
outline: none;
position: absolute;
top: 0;
left: 0;
display: block;
background-color: #ecf0f1;
height: 40px;
margin-bottom: 2%;
padding-left: 50px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
color:#676868;
}
i{
display:block;
position:absolute;
left:12px;
top:8px;
color:#7f8c8d;
text-shadow: 0px 2px 40px #7f8c8d;
}
.placeHolder{
color: #bdc3c7;
display: block;
position: absolute;
top: 0;
left: 50px;
font-size: 18pt;
line-height: 40px;
}
.blur{
text-shadow: 0 0 10px #7f8c8d;
color: transparent;
animation: scale 1s ease-in-out alternate;
-webkit-animation: scale 1s ease-in-out alternate;
-moz-animation: scale 1s ease-in-out alternate;
}
@keyframes scale {
50% { transform: scale(1.3);
}
}
@-webkit-keyframes scale {
50% { -webkit-transform: scale(1.3);
}
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<h2>vanishing placeHolder</h2>
<form>
<div class="my_input">
<input type="text" />
<span class="placeHolder">User Name</span>
<i class="fa fa-user"></i>
</div>
<div class="my_input">
<input type="password" />
<span class="placeHolder">Password</span>
<i class="fa fa-key"></i>
</div>
</form><script type="text/javascript">
$(document).ready(function(){
$( "input").focus(function(e) {
$( e.target ).next("span").addClass( "blur" ).fadeOut( 900 );
});
$( "input" ).blur(function(e) {
var val=$(e.target).val();
if(!val){
$( e.target ).next("span").removeClass( "blur" ).fadeIn( 300 );
}
});
$( "span " ).click(function(e) {
$( e.target ).addClass( "blur" ).fadeOut( 900 );
$(e.target).prev("input").focus();
});
});
</script>
Do you want to expose your site to millions?
Do you want to be ranked higher in Google?
Do you want to be known as the best site in your niche?
Then look no further. Add your site in 3 simple steps. Sign up, Add your site and Start receiving votes! It only takes 10 seconds!
