Skip to content

Instantly share code, notes, and snippets.

@thomasplevy

thomasplevy/Fullpage.html

Created May 18, 2012 22:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thomasplevy/2727942 to your computer and use it in GitHub Desktop.
Save thomasplevy/2727942 to your computer and use it in GitHub Desktop.
Download ZIP
CSS AWESOME INPUTS
Raw
Fullpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS SEXY INPUTS &middot; CodePen</title>
<style>
div {
position: relative;
}
div label {
position: absolute;
top: 8px;
left: 8px;
font-size: 16px;
color: #8f8f8f;
font-family: arial, helvetica, sans-serif;
pointer-events: none;
transition: all .3s ease;
z-index: -1;
}
input:focus + label, input.full + label {
opacity: 0;
}
input[type=text] {
width: 200px;
border: 1px solid transparent;
padding: 8px;
font-size: 18px;
font-family: arial, helvetica, sans-serif;
box-shadow: inset 1px 1px 3px #959595, inset -1px -1px 1px #bfbfbf, inset 0 -20px 25px -8px rgba(0, 153, 0, 0.25);
border-radius: 5px;
transition: all .5s ease;
outline: 0;
background: transparent;
}
input[type=text]:focus {
border: 1px solid rgba(0, 153, 0, 0.3);
box-shadow: inset 1px 1px 3px #959595, inset -1px -1px 1px #bfbfbf, inset 0 -20px 25px -8px rgba(0, 153, 0, 0.3);
width: 250px;
}
input.error {
box-shadow: inset 1px 1px 3px #959595, inset -1px -1px 1px #bfbfbf, inset 0 -20px 25px -8px rgba(187, 17, 0, 0.25);
}
input.error:focus {
border: 1px solid rgba(187, 17, 0, 0.3);
box-shadow: inset 1px 1px 3px #959595, inset -1px -1px 1px #bfbfbf, inset 0 -20px 25px -8px rgba(187, 17, 0, 0.1);
}
</style>
<script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script>
</head>
<body>
basic<br>
<div>
<input type="text" id="text"></input>
<label for="text">Input Label</label>
</div>
<br><br>
.error<br>
<div>
<input type="text" id="text" class="error"></input>
<label for="text">Input Label</label>
</div>
<div id="console"></div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
(function() {
$('input[type="text"]').blur(function(){
if($(this).val() != '') {
$(this).addClass('full');
} else if ($(this).val() == '') {
$(this).removeClass('full');
}
});
})();
</script>
</body>
</html>
Raw
index.html
basic<br>
<div>
<input type="text" id="text"></input>
<label for="text">Input Label</label>
</div>
<br><br>
.error<br>
<div>
<input type="text" id="text" class="error"></input>
<label for="text">Input Label</label>
</div>
<div id="console"></div>
Raw
index.js
$('input[type="text"]').blur(function(){
if($(this).val() != '') {
$(this).addClass('full');
} else if ($(this).val() == '') {
$(this).removeClass('full');
}
});
Raw
style.scss
@import "compass";
$happy: #009900;
$error: #bb1100;
div {
position: relative;
label {
position: absolute;
top: 8px;
left: 8px;
font-size: 16px;
color: #8f8f8f;
font-family: arial, helvetica, sans-serif;
pointer-events: none;
transition: all .3s ease;
z-index: -1;
}
}
input:focus + label, input.full + label {
opacity: 0;
}
input[type=text] {
width: 200px;
border: 1px solid transparent;
padding: 8px;
font-size: 18px;
font-family: arial, helvetica, sans-serif;
box-shadow: inset 1px 1px 3px #959595, inset -1px -1px 1px #bfbfbf, inset 0 -20px 25px -8px fade_out($happy,.75);
border-radius: 5px;
transition: all .5s ease;
outline: 0;
background: transparent;
&:focus {
border: 1px solid fade_out($happy,.7);
box-shadow: inset 1px 1px 3px #959595, inset -1px -1px 1px #bfbfbf, inset 0 -20px 25px -8px fade_out($happy,.7);
width: 250px;
}
}
input.error {
box-shadow: inset 1px 1px 3px #959595, inset -1px -1px 1px #bfbfbf, inset 0 -20px 25px -8px fade_out($error,.75);
&:focus {
border: 1px solid fade_out($error,.7);
box-shadow: inset 1px 1px 3px #959595, inset -1px -1px 1px #bfbfbf, inset 0 -20px 25px -8px fade_out($error,.9);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment