Skip to content

Instantly share code, notes, and snippets.

@danklammer

danklammer/index.html

Forked from anonymous/index.html
Created September 18, 2015 13:37
Show Gist options
  • Save danklammer/a86056fa96d33c01963f to your computer and use it in GitHub Desktop.
Save danklammer/a86056fa96d33c01963f to your computer and use it in GitHub Desktop.
Download ZIP
CSS-Only Animated 'Reminder' Placeholders // source http://jsbin.com/hoqan
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="CSS-Only Animated 'Reminder' Placeholders" />
<meta id="viewport" name="viewport" content="initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=1" />
<meta charset="utf-8">
<style id="jsbin-css">
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
box-shadow: none;
outline: none;
}
html, body { height: 100%; }
body {
background: #252525;
padding: 1.5em;
font: 1em/1 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200;
background: url(http://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2013/08/16-730x1071.jpg) center center;
background-size: cover;
}
h2 {
color: #fff;
text-align: center;
padding: 30px 0 5px;
line-height: 1.2em;
font-weight: 200;
text-shadow: -1px -1px rgba(0,0,0,0.1);
}
input {
display: block;
width: 100%;
height: 3em;
background: rgba(255,255,255,0.97);
font-family: inherit;
font-weight: 200;
line-height: 1em;
padding: 1em .5em;
font-size: 1em;
border-radius: 0;
-webkit-appearance: none;
transition: all 0.2s ease-in-out;
}
input:focus { background: rgba(255,255,255,1); }
input:valid { padding: 1.4em .5em .6em; }
input + input { border-top: 1px solid #ddd; }
::-webkit-input-placeholder {
color: #909090;
position: relative;
-webkit-transform: translate(0, 0);
transition: all 0.2s ease-in-out;
}
::-webkit-input-placeholder[style*=hidden] {
color: #5856D6;
font-weight: 700;
font-size: 0.65em;
-webkit-transform: translate(0, -1.65em);
opacity: 1;
visibility: visible !important;
}
.input-set {
max-width: 320px;
margin: 0 auto;
padding: 15px 0 5px;
}
.input-set input:first-child {
border-radius: .25em .25em 0 0;
}
.input-set input:last-child {
border-radius: 0 0 .25em .25em;
box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
img {
display: block;
width: 20px;
}
</style>
</head>
<body>
<h2>CSS-Only Animated<br/> 'Reminder' Placeholders</h2>
<div class="input-set">
<input type="text" placeholder="First Name" required />
<input type="text" placeholder="Last Name" required />
<input type="text" placeholder="Email Address" required />
</div>
<div class="input-set">
<input type="text" placeholder="Username" required />
<input type="password" placeholder="Password" required />
<input type="password" placeholder="Confirm Password" required />
</div>
<script id="jsbin-source-css" type="text/css">* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
box-shadow: none;
outline: none;
}
html, body { height: 100%; }
body {
background: #252525;
padding: 1.5em;
font: 1em/1 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200;
background: url(http://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2013/08/16-730x1071.jpg) center center;
background-size: cover;
}
h2 {
color: #fff;
text-align: center;
padding: 30px 0 5px;
line-height: 1.2em;
font-weight: 200;
text-shadow: -1px -1px rgba(0,0,0,0.1);
}
input {
display: block;
width: 100%;
height: 3em;
background: rgba(255,255,255,0.97);
font-family: inherit;
font-weight: 200;
line-height: 1em;
padding: 1em .5em;
font-size: 1em;
border-radius: 0;
-webkit-appearance: none;
transition: all 0.2s ease-in-out;
}
input:focus { background: rgba(255,255,255,1); }
input:valid { padding: 1.4em .5em .6em; }
input + input { border-top: 1px solid #ddd; }
::-webkit-input-placeholder {
color: #909090;
position: relative;
-webkit-transform: translate(0, 0);
transition: all 0.2s ease-in-out;
}
::-webkit-input-placeholder[style*=hidden] {
color: #5856D6;
font-weight: 700;
font-size: 0.65em;
-webkit-transform: translate(0, -1.65em);
opacity: 1;
visibility: visible !important;
}
.input-set {
max-width: 320px;
margin: 0 auto;
padding: 15px 0 5px;
}
.input-set input:first-child {
border-radius: .25em .25em 0 0;
}
.input-set input:last-child {
border-radius: 0 0 .25em .25em;
box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
img {
display: block;
width: 20px;
}
</script>
</body>
</html>
Raw
jsbin.hoqan.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
box-shadow: none;
outline: none;
}
html, body { height: 100%; }
body {
background: #252525;
padding: 1.5em;
font: 1em/1 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 200;
background: url(http://cdn2.tnwcdn.com/wp-content/blogs.dir/1/files/2013/08/16-730x1071.jpg) center center;
background-size: cover;
}
h2 {
color: #fff;
text-align: center;
padding: 30px 0 5px;
line-height: 1.2em;
font-weight: 200;
text-shadow: -1px -1px rgba(0,0,0,0.1);
}
input {
display: block;
width: 100%;
height: 3em;
background: rgba(255,255,255,0.97);
font-family: inherit;
font-weight: 200;
line-height: 1em;
padding: 1em .5em;
font-size: 1em;
border-radius: 0;
-webkit-appearance: none;
transition: all 0.2s ease-in-out;
}
input:focus { background: rgba(255,255,255,1); }
input:valid { padding: 1.4em .5em .6em; }
input + input { border-top: 1px solid #ddd; }
::-webkit-input-placeholder {
color: #909090;
position: relative;
-webkit-transform: translate(0, 0);
transition: all 0.2s ease-in-out;
}
::-webkit-input-placeholder[style*=hidden] {
color: #5856D6;
font-weight: 700;
font-size: 0.65em;
-webkit-transform: translate(0, -1.65em);
opacity: 1;
visibility: visible !important;
}
.input-set {
max-width: 320px;
margin: 0 auto;
padding: 15px 0 5px;
}
.input-set input:first-child {
border-radius: .25em .25em 0 0;
}
.input-set input:last-child {
border-radius: 0 0 .25em .25em;
box-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
img {
display: block;
width: 20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment