<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Text Input Effects</title>
<meta name="description" content="Simple ideas for enhancing text input interactions" />
<meta name="keywords" content="input, text, effect, focus, transition, interaction, inspiration, web design" />
<meta name="author" content="Kabir Shah" />
<!--[if IE]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<section class="content bgcolor-3">
<h2>Manami</h2>
<span class="input input--manami">
<input class="input__field input__field--manami" type="text" id="input-32" />
<label class="input__label input__label--manami" for="input-32">
<span class="input__label-content input__label-content--manami">Username</span>
</label>
</span>
<span class="input input--manami">
<input class="input__field input__field--manami" type="text" id="input-33" />
<label class="input__label input__label--manami" for="input-33">
<span class="input__label-content input__label-content--manami">Website</span>
</label>
</span>
<span class="input input--manami">
<input class="input__field input__field--manami" type="text" id="input-34" />
<label class="input__label input__label--manami" for="input-34">
<span class="input__label-content input__label-content--manami">Invitation Code</span>
</label>
</span>
</section>
<section class="content bgcolor-7">
<h2>Nariko</h2>
<span class="input input--nariko">
<input class="input__field input__field--nariko" type="text" id="input-20" />
<label class="input__label input__label--nariko" for="input-20">
<span class="input__label-content input__label-content--nariko">Username</span>
</label>
</span>
<span class="input input--nariko">
<input class="input__field input__field--nariko" type="text" id="input-21" />
<label class="input__label input__label--nariko" for="input-21">
<span class="input__label-content input__label-content--nariko">Website</span>
</label>
</span>
<span class="input input--nariko">
<input class="input__field input__field--nariko" type="text" id="input-22" />
<label class="input__label input__label--nariko" for="input-22">
<span class="input__label-content input__label-content--nariko">Invitation Code</span>
</label>
</span>
</section>
<section class="content bgcolor-1">
<h2>Nao</h2>
<span class="input input--nao">
<input class="input__field input__field--nao" type="text" id="input-1" />
<label class="input__label input__label--nao" for="input-1">
<span class="input__label-content input__label-content--nao">Username</span>
</label>
<svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
</svg>
</span>
<span class="input input--nao">
<input class="input__field input__field--nao" type="text" id="input-2" />
<label class="input__label input__label--nao" for="input-2">
<span class="input__label-content input__label-content--nao">Email</span>
</label>
<svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
</svg>
</span>
<span class="input input--nao">
<input class="input__field input__field--nao" type="text" id="input-3" />
<label class="input__label input__label--nao" for="input-3">
<span class="input__label-content input__label-content--nao">Invitation Code</span>
</label>
<svg class="graphic graphic--nao" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
</svg>
</span>
</section>
<section class="content">
<h2>Yoshiko</h2>
<span class="input input--yoshiko">
<input class="input__field input__field--yoshiko" type="text" id="input-10" />
<label class="input__label input__label--yoshiko" for="input-10">
<span class="input__label-content input__label-content--yoshiko" data-content="Bird's Color">Bird's Color</span>
</label>
</span>
<span class="input input--yoshiko">
<input class="input__field input__field--yoshiko" type="text" id="input-11" />
<label class="input__label input__label--yoshiko" for="input-11">
<span class="input__label-content input__label-content--yoshiko" data-content="Wing Span">Wing Span</span>
</label>
</span>
<span class="input input--yoshiko">
<input class="input__field input__field--yoshiko" type="text" id="input-12" />
<label class="input__label input__label--yoshiko" for="input-12">
<span class="input__label-content input__label-content--yoshiko" data-content="Beak Length">Beak Length</span>
</label>
</span>
</section>
<section class="content bgcolor-10">
<h2>Shoko</h2>
<span class="input input--shoko">
<input class="input__field input__field--shoko" type="text" id="input-4" />
<label class="input__label input__label--shoko" for="input-4">
<span class="input__label-content input__label-content--shoko">Player Name</span>
</label>
<svg class="graphic graphic--shoko" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
<path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"/>
</svg>
</span>
<span class="input input--shoko">
<input class="input__field input__field--shoko" type="text" id="input-5" />
<label class="input__label input__label--shoko" for="input-5">
<span class="input__label-content input__label-content--shoko">Village</span>
</label>
<svg class="graphic graphic--shoko" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
<path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"/>
</svg>
</span>
<span class="input input--shoko">
<input class="input__field input__field--shoko" type="text" id="input-6" />
<label class="input__label input__label--shoko" for="input-6">
<span class="input__label-content input__label-content--shoko">World</span>
</label>
<svg class="graphic graphic--shoko" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M0,56.5c0,0,298.666,0,399.333,0C448.336,56.5,513.994,46,597,46c77.327,0,135,10.5,200.999,10.5c95.996,0,402.001,0,402.001,0"/>
<path d="M0,2.5c0,0,298.666,0,399.333,0C448.336,2.5,513.994,13,597,13c77.327,0,135-10.5,200.999-10.5c95.996,0,402.001,0,402.001,0"/>
</svg>
</span>
</section>
<section class="content bgcolor-4">
<h2>Chisato</h2>
<span class="input input--chisato">
<input class="input__field input__field--chisato" type="text" id="input-13" />
<label class="input__label input__label--chisato" for="input-13">
<span class="input__label-content input__label-content--chisato" data-content="First Name">First Name</span>
</label>
</span>
<span class="input input--chisato">
<input class="input__field input__field--chisato" type="text" id="input-14" />
<label class="input__label input__label--chisato" for="input-14">
<span class="input__label-content input__label-content--chisato" data-content="Middle Name">Middle Name</span>
</label>
</span>
<span class="input input--chisato">
<input class="input__field input__field--chisato" type="text" id="input-15" />
<label class="input__label input__label--chisato" for="input-15">
<span class="input__label-content input__label-content--chisato" data-content="Last Name">Last Name</span>
</label>
</span>
</section>
<section class="content bgcolor-3">
<h2>Makiko</h2>
<span class="input input--makiko">
<input class="input__field input__field--makiko" type="text" id="input-16" />
<label class="input__label input__label--makiko" for="input-16">
<span class="input__label-content input__label-content--makiko">Search</span>
</label>
</span>
</section>
<section class="content bgcolor-9">
<h2>Sae</h2>
<span class="input input--sae">
<input class="input__field input__field--sae" type="text" id="input-17" />
<label class="input__label input__label--sae" for="input-17">
<i class="fa fa-fw fa-pencil icon icon--sae"></i>
<span class="input__label-content input__label-content--sae">Email Address</span>
</label>
</span>
<span class="input input--sae">
<input class="input__field input__field--sae" type="text" id="input-18" />
<label class="input__label input__label--sae" for="input-18">
<i class="fa fa-fw fa-pencil icon icon--sae"></i>
<span class="input__label-content input__label-content--sae">Invitation Code</span>
</label>
</span>
<span class="input input--sae">
<input class="input__field input__field--sae" type="text" id="input-19" />
<label class="input__label input__label--sae" for="input-19">
<i class="fa fa-fw fa-pencil icon icon--sae"></i>
<span class="input__label-content input__label-content--sae">Full Name</span>
</label>
</span>
</section>
<section class="content bgcolor-4">
<h2>Kozakura</h2>
<span class="input input--kozakura">
<input class="input__field input__field--kozakura" type="text" id="input-7" />
<label class="input__label input__label--kozakura" for="input-7">
<span class="input__label-content input__label-content--kozakura" data-content="Name">Name</span>
</label>
<svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
</svg>
</span>
<span class="input input--kozakura">
<input class="input__field input__field--kozakura" type="text" id="input-8" />
<label class="input__label input__label--kozakura" for="input-8">
<span class="input__label-content input__label-content--kozakura" data-content="Email">Email</span>
</label>
<svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
</svg>
</span>
<span class="input input--kozakura">
<input class="input__field input__field--kozakura" type="text" id="input-9" />
<label class="input__label input__label--kozakura" for="input-9">
<span class="input__label-content input__label-content--kozakura" data-content="Website">Website</span>
</label>
<svg class="graphic graphic--kozakura" width="300%" height="100%" viewBox="0 0 1200 60" preserveAspectRatio="none">
<path d="M1200,9c0,0-305.005,0-401.001,0C733,9,675.327,4.969,598,4.969C514.994,4.969,449.336,9,400.333,9C299.666,9,0,9,0,9v43c0,0,299.666,0,400.333,0c49.002,0,114.66,3.484,197.667,3.484c77.327,0,135-3.484,200.999-3.484C894.995,52,1200,52,1200,52V9z"/>
</svg>
</span>
</section>
<section class="content bgcolor-1">
<h2>Fumi</h2>
<span class="input input--fumi">
<input class="input__field input__field--fumi" type="text" id="input-23" />
<label class="input__label input__label--fumi" for="input-23">
<i class="fa fa-fw fa-university icon icon--fumi"></i>
<span class="input__label-content input__label-content--fumi">Course Name</span>
</label>
</span>
<span class="input input--fumi">
<input class="input__field input__field--fumi" type="text" id="input-24" />
<label class="input__label input__label--fumi" for="input-24">
<i class="fa fa-fw fa-graduation-cap icon icon--fumi"></i>
<span class="input__label-content input__label-content--fumi">Degree</span>
</label>
</span>
<span class="input input--fumi">
<input class="input__field input__field--fumi" type="text" id="input-25" />
<label class="input__label input__label--fumi" for="input-25">
<i class="fa fa-fw fa-suitcase icon icon--fumi"></i>
<span class="input__label-content input__label-content--fumi">Work Place</span>
</label>
</span>
</section>
<section class="content bgcolor-4">
<h2>Ruri</h2>
<span class="input input--ruri">
<input class="input__field input__field--ruri" type="text" id="input-26" />
<label class="input__label input__label--ruri" for="input-26">
<span class="input__label-content input__label-content--ruri">Username</span>
</label>
</span>
<span class="input input--ruri">
<input class="input__field input__field--ruri" type="text" id="input-27" />
<label class="input__label input__label--ruri" for="input-27">
<span class="input__label-content input__label-content--ruri">Website</span>
</label>
</span>
<span class="input input--ruri">
<input class="input__field input__field--ruri" type="text" id="input-28" />
<label class="input__label input__label--ruri" for="input-28">
<span class="input__label-content input__label-content--ruri">Invitation Code</span>
</label>
</span>
</section>
<section class="content bgcolor-3">
<h2>Kohana</h2>
<span class="input input--kohana">
<input class="input__field input__field--kohana" type="text" id="input-29" />
<label class="input__label input__label--kohana" for="input-29">
<i class="fa fa-fw fa-clock-o icon icon--kohana"></i>
<span class="input__label-content input__label-content--kohana">Time</span>
</label>
</span>
<span class="input input--kohana">
<input class="input__field input__field--kohana" type="text" id="input-30" />
<label class="input__label input__label--kohana" for="input-30">
<i class="fa fa-fw fa-bus icon icon--kohana"></i>
<span class="input__label-content input__label-content--kohana">Line</span>
</label>
</span>
<span class="input input--kohana">
<input class="input__field input__field--kohana" type="text" id="input-31" />
<label class="input__label input__label--kohana" for="input-31">
<i class="fa fa-fw fa-phone icon icon--kohana"></i>
<span class="input__label-content input__label-content--kohana">Phone</span>
</label>
</span>
</section>
</div><!-- /container -->
</body>
</html>
.input {
position: relative;
z-index: 1;
display: inline-block;
margin: 1em;
max-width: 350px;
width: calc(100% - 2em);
vertical-align: top;
}
.input__field {
position: relative;
display: block;
float: right;
padding: 0.8em;
width: 60%;
border: none;
border-radius: 0;
background: #f0f0f0;
color: #aaa;
font-weight: 400;
font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-appearance: none; /* for box shadows to show on iOS */
}
.input__field:focus {
outline: none;
}
.input__label {
display: inline-block;
float: right;
padding: 0 1em;
width: 40%;
color: #696969;
font-weight: bold;
font-size: 70.25%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.input__label-content {
position: relative;
display: block;
padding: 1.6em 0;
width: 100%;
}
.graphic {
position: absolute;
top: 0;
left: 0;
fill: none;
}
.icon {
color: #ddd;
font-size: 150%;
}
/* Individual styles */
/* Manami */
.input--manami {
overflow: hidden;
}
.input__field--manami {
width: 100%;
background: transparent;
padding: 0.5em;
margin-bottom: 2em;
color: #f9f7f6;
z-index: 100;
opacity: 0;
}
.input__label--manami {
width: 100%;
position: absolute;
text-align: left;
padding: 0.5em 0;
pointer-events: none;
font-size: 1em;
}
.input__label--manami::before,
.input__label--manami::after {
content: '';
position: absolute;
width: 100%;
left: 0;
}
.input__label--manami::before {
height: 100%;
background: #A8A8A8;
top: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
}
.input__label--manami::after {
height: 2px;
background: #A8A8A8;
top: 100%;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.input__label-content--manami {
padding: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: -webkit-transform 0.2s, color 0.2s;
transition: transform 0.2s, color 0.2s;
}
.input__field--manami:focus,
.input--filled .input__field--manami {
opacity: 1;
-webkit-transition: opacity 0s 0.2s;
transition: opacity 0s 0.2s;
}
.input__label--manami::before,
.input__label--manami::after,
.input__label-content--manami,
.input__field--manami:focus,
.input--filled .input__field--manami {
-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}
.input__field--manami:focus + .input__label--manami::before,
.input--filled .input__label--manami::before {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.input__field--manami:focus + .input__label--manami::after,
.input--filled .input__label--manami::after {
opacity: 0;
}
.input__field--manami:focus + .input__label--manami .input__label-content--manami,
.input--filled .input__label--manami .input__label-content--manami {
color: #cbc4c6;
-webkit-transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1);
transform: translate3d(0, 2.1em, 0) scale3d(0.65, 0.65, 1);
}
/* Nariko */
.input--nariko {
overflow: hidden;
padding-top: 2em;
}
.input__field--nariko {
width: 100%;
background: transparent;
opacity: 0;
padding: 0.35em;
z-index: 100;
color: #f18292;
}
.input__label--nariko {
width: 100%;
bottom: 0;
position: absolute;
pointer-events: none;
text-align: left;
color: #8E9191;
padding: 0 0.5em;
}
.input__label--nariko::before {
content: '';
position: absolute;
width: 100%;
height: 4em;
top: 100%;
left: 0;
background: #fff;
border-top: 4px solid #9B9F9F;
-webkit-transform: translate3d(0, -3px, 0);
transform: translate3d(0, -3px, 0);
-webkit-transition: -webkit-transform 0.4s;
transition: transform 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.input__label-content--nariko {
padding: 0.5em 0;
-webkit-transform-origin: 0% 100%;
transform-origin: 0% 100%;
-webkit-transition: -webkit-transform 0.4s, color 0.4s;
transition: transform 0.4s, color 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.input__field--nariko:focus,
.input--filled .input__field--nariko {
cursor: text;
opacity: 1;
-webkit-transition: opacity 0s 0.4s;
transition: opacity 0s 0.4s;
}
.input__field--nariko:focus + .input__label--nariko::before,
.input--filled .input__label--nariko::before {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transform: translate3d(0, -3.3em, 0);
transform: translate3d(0, -3.3em, 0);
}
.input__field--nariko:focus + .input__label--nariko .input__label-content--nariko,
.input--filled .input__label-content--nariko {
color: #6B6E6E;
-webkit-transform: translate3d(0, -3.3em, 0) scale3d(0.81, 0.81, 1);
transform: translate3d(0, -3.3em, 0) scale3d(0.81, 0.81, 1);
}
/* Nao */
.input--nao {
overflow: hidden;
padding-top: 1em;
}
.input__field--nao {
padding: 0.5em 0em 0.25em;
width: 100%;
background: transparent;
color: #9da8b2;
font-size: 1.25em;
}
.input__label--nao {
position: absolute;
top: 0.95em;
font-size: 0.85em;
left: 0;
display: block;
width: 100%;
text-align: left;
padding: 0em;
pointer-events: none;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: -webkit-transform 0.2s 0.15s, color 1s;
transition: transform 0.2s 0.15s, color 1s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.graphic--nao {
stroke: #92989e;
pointer-events: none;
-webkit-transition: -webkit-transform 0.7s, stroke 0.7s;
transition: transform 0.7s, stroke 0.7s;
-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}
.input__field--nao:focus + .input__label--nao,
.input--filled .input__label--nao {
color: #333;
-webkit-transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1);
transform: translate3d(0, -1.25em, 0) scale3d(0.75, 0.75, 1);
}
.input__field--nao:focus ~ .graphic--nao,
.input--filled .graphic--nao {
stroke: #333;
-webkit-transform: translate3d(-66.6%, 0, 0);
transform: translate3d(-66.6%, 0, 0);
}
/* Shoko */
.input--shoko {
overflow: hidden;
padding-bottom: 2.5em;
}
.input__field--shoko {
padding: 0;
margin-top: 1.2em;
width: 100%;
background: transparent;
color: #fff;
font-size: 1.55em;
}
.input__label--shoko {
position: absolute;
top: 2em;
left: 0;
display: block;
width: 100%;
text-align: left;
padding: 0em;
text-transform: uppercase;
letter-spacing: 1px;
color: #A09C9C;
pointer-events: none;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: -webkit-transform 0.2s 0.1s, color 0.3s;
transition: transform 0.2s 0.1s, color 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.graphic--shoko {
stroke: #A09C9C;
pointer-events: none;
stroke-width: 2px;
top: 1.25em;
bottom: 0px;
height: 3.275em;
-webkit-transition: -webkit-transform 0.7s, stroke 0.7s;
transition: transform 0.7s, stroke 0.7s;
-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}
.input__field--shoko:focus + .input__label--shoko,
.input--filled .input__label--shoko {
color: #A58282;
-webkit-transform: translate3d(0, 3.5em, 0) scale3d(0.85, 0.85, 1);
transform: translate3d(0, 3.5em, 0) scale3d(0.85, 0.85, 1);
}
.input__field--shoko:focus ~ .graphic--shoko,
.input--filled .graphic--shoko {
stroke: #A58282;
-webkit-transform: translate3d(-66.6%, 0, 0);
transform: translate3d(-66.6%, 0, 0);
}
/* Yoshiko */
.input__field--yoshiko {
width: 100%;
background-color: #d0d1d0;
border: 2px solid transparent;
-webkit-transition: background-color 0.25s, border-color 0.25s;
transition: background-color 0.25s, border-color 0.25s;
}
.input__label--yoshiko {
width: 100%;
text-align: left;
position: absolute;
bottom: 100%;
pointer-events: none;
overflow: hidden;
padding: 0 1.25em;
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
-webkit-transition: -webkit-transform 0.25s;
transition: transform 0.25s ;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.input__label-content--yoshiko {
color: #8B8C8B;
padding: 0.25em 0;
-webkit-transition: -webkit-transform 0.25s;
transition: transform 0.25s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
}
.input__label-content--yoshiko::after {
content: attr(data-content);
position: absolute;
font-weight: 800;
bottom: 100%;
left: 0;
height: 100%;
width: 100%;
color: #a3d39c;
padding: 0.25em 0;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.85em;
}
.input__field--yoshiko:focus + .input__label--yoshiko,
.input--filled .input__label--yoshiko {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.input__field--yoshiko:focus + .input__label--yoshiko .input__label-content--yoshiko,
.input--filled .input__label-content--yoshiko {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.input__field--yoshiko:focus + .input__field--yoshiko,
.input--filled .input__field--yoshiko {
background-color: transparent;
border-color: #a3d39c;
}
/* Chisato */
.input--chisato {
padding-top: 1em;
}
.input__field--chisato {
width: 100%;
padding: 0.8em 0.5em;
background: transparent;
border: 2px solid;
color: #b5b5b5;
-webkit-transition: border-color 0.25s;
transition: border-color 0.25s;
}
.input__label--chisato {
width: 100%;
position: absolute;
top: 0;
text-align: left;
overflow: hidden;
padding: 0;
pointer-events: none;
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
}
.input__label-content--chisato {
padding: 0 1em;
font-weight: 400;
color: #b5b5b5;
}
.input__label-content--chisato::after {
content: attr(data-content);
position: absolute;
top: -200%;
left: 0;
color: #da6484;
font-weight: 800;
}
.input__field--chisato:focus,
.input--filled .input__field--chisato {
border-color: #da6484;
}
.input__field--chisato:focus + .input__label--chisato,
.input--filled .input__label--chisato {
-webkit-animation: anim-chisato-1 0.25s forwards;
animation: anim-chisato-1 0.25s forwards;
}
.input__field--chisato:focus + .input__label--chisato .input__label-content--chisato,
.input--filled .input__label-content--chisato {
-webkit-animation: anim-chisato-2 0.25s forwards ease-in;
animation: anim-chisato-2 0.25s forwards ease-in;
}
@-webkit-keyframes anim-chisato-1 {
0%, 70% {
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
}
71%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@-webkit-keyframes anim-chisato-2 {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
70%, 71% {
-webkit-transform: translate3d(0, 125%, 0);
transform: translate3d(0, 125%, 0);
opacity: 0;
-webkit-animation-timing-function: ease-out;
}
100% {
color: transparent;
-webkit-transform: translate3d(0, 200%, 0);
transform: translate3d(0, 200%, 0);
}
}
@keyframes anim-chisato-1 {
0%, 70% {
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
}
71%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
@keyframes anim-chisato-2 {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
70%, 71% {
-webkit-transform: translate3d(0, 125%, 0);
transform: translate3d(0, 125%, 0);
opacity: 0;
-webkit-animation-timing-function: ease-out;
}
100% {
color: transparent;
-webkit-transform: translate3d(0, 200%, 0);
transform: translate3d(0, 200%, 0);
}
}
/* Kozakura */
.input--kozakura {
overflow: hidden;
padding-bottom: 1em;
}
.input__field--kozakura {
padding: 0.25em 0.5em;
margin-top: 1.25em;
width: 100%;
background: transparent;
color: #2F3238;
font-size: 1.55em;
opacity: 0;
}
.input__label--kozakura {
width: 100%;
text-align: left;
position: absolute;
top: 1em;
pointer-events: none;
overflow: hidden;
padding: 0 0.25em;
-webkit-transform: translate3d(1em, 2.75em, 0);
transform: translate3d(1em, 2.75em, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.input__label-content--kozakura {
color: #A4A5A6;
padding: 0.4em 0 0.25em;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.input__label-content--kozakura::after {
content: attr(data-content);
position: absolute;
font-weight: 800;
top: 100%;
left: 0;
height: 100%;
width: 100%;
color: #fff;
padding: 0.25em 0;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.85em;
}
.graphic--kozakura {
fill: #494E57;
pointer-events: none;
top: 1em;
bottom: 0px;
height: 4.5em;
z-index: -1;
-webkit-transition: -webkit-transform 0.7s, fill 0.7s;
transition: transform 0.7s, fill 0.7s;
-webkit-transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
transition-timing-function: cubic-bezier(0, 0.25, 0.5, 1);
}
.input__field--kozakura:focus,
.input--filled .input__field--kozakura {
-webkit-transition: opacity 0s 0.35s;
transition: opacity 0s 0.35s;
opacity: 1;
}
.input__field--kozakura:focus + .input__label--kozakura,
.input--filled .input__label--kozakura {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.input__field--kozakura:focus + .input__label--kozakura .input__label-content--kozakura,
.input--filled .input__label-content--kozakura {
-webkit-transition-delay: 0.15s;
transition-delay: 0.15s;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
.input__field--kozakura:focus ~ .graphic--kozakura,
.input--filled .graphic--kozakura {
fill: #fff;
-webkit-transform: translate3d(-66.6%, 0, 0);
transform: translate3d(-66.6%, 0, 0);
}
/* Makiko */
.input--makiko {
overflow: hidden;
background: #CBCBCB;
}
.input__field--makiko {
width: 100%;
background: transparent;
color: #797693;
z-index: 10;
font-weight: 500;
}
.input__label--makiko {
position: absolute;
width: 100%;
text-align: left;
pointer-events: none;
color: #fff;
}
.input__label--makiko::before {
content: '';
position: absolute;
width: 30px;
height: 30px;
top: 45%;
left: 20px;
background: url(../img/search.svg) no-repeat center center;
background-size: 100%;
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.7,0,0.3,1);
transition: transform 0.4s cubic-bezier(0.7,0,0.3,1);
}
.input__label-content--makiko {
display: block;
padding: 1.5em 0 0 2.75em;
-webkit-transition: -webkit-transform 0.4s cubic-bezier(0.7,0,0.3,1);
transition: transform 0.4s cubic-bezier(0.7,0,0.3,1);
}
.input__field--makiko:focus + .input__label--makiko::before,
.input--filled .input__label--makiko::before {
-webkit-transform: scale3d(38, 38, 1);
transform: scale3d(38, 38, 1);
}
/* Sae */
.input--sae {
overflow: hidden;
width: 200px;
margin: 0 2em 2em;
}
.input__field--sae {
background: transparent;
width: 100%;
color: #fff;
padding: 1em 0 0.5em;
font-weight: 500;
}
.input__label--sae {
position: absolute;
width: 100%;
text-align: left;
color: #7771ab;
padding: 0;
height: 100%;
pointer-events: none;
}
.input__label--sae::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background: #fff;
bottom: 0;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.icon--sae {
position: absolute;
bottom: 0;
font-size: 1em;
opacity: 0.5;
left: -30px;
color: #fff;
pointer-events: none;
-webkit-transform: translate3d(205px, 0, 0);
transform: translate3d(205px, 0, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.input__label-content--sae {
padding: 0;
font-size: 18px;
display: inline-block;
vertical-align: bottom;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: translate3d(0, 50px, 0);
transform: translate3d(0, 50px, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.input__field--sae:focus + .input__label--sae .input__label-content--sae,
.input--filled .input__label-content--sae {
-webkit-transform: translate3d(0, 0, 0) scale3d(0.7, 0.7, 1);
transform: translate3d(0, 0, 0) scale3d(0.7, 0.7, 1);
}
.input__field--sae:focus + .input__label--sae::after,
.input--filled .input__label--sae::after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.input__field--sae:focus + .input__label--sae .icon--sae,
.input--filled .icon--sae {
-webkit-transition-delay: 0.01s;
transition-delay: 0.01s;
-webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -90deg);
transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -90deg);
}
/* Fumi */
.input--fumi {
background: #fff;
overflow: hidden;
padding: 0.25em 0;
}
.input--fumi::after {
content: '';
width: 1px;
position: absolute;
top: 0.5em;
bottom: 0.5em;
left: 2.5em;
background: #f0f0f0;
z-index: 100;
}
.input__field--fumi {
background: transparent;
padding: 1.5em 1em 0.25em 3.15em;
width: 100%;
color: #00aeef;
}
.input__label--fumi {
position: absolute;
width: 100%;
text-align: left;
padding-left: 4.5em;
pointer-events: none;
}
.icon--fumi {
width: 2em;
position: absolute;
top: 0;
left: 0;
padding: 1em 0 0 0.5em;
}
.input__label-content--fumi {
padding: 1.7em 0;
display: inline-block;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.input__label-content--fumi span {
display: inline-block;
}
.input__field--fumi:focus + .input__label--fumi .input__label-content--fumi,
.input--filled .input__label-content--fumi {
-webkit-animation: anim-fumi-1 0.3s forwards;
animation: anim-fumi-1 0.3s forwards;
}
@-webkit-keyframes anim-fumi-1 {
50% {
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
}
51% {
-webkit-transform: translate3d(0, -3em, 0) scale3d(0.85, 0.85, 1);
transform: translate3d(0, -3em, 0) scale3d(0.85, 0.85, 1);
}
100% {
color: #a3a3a3;
-webkit-transform: translate3d(0, -1.1em, 0) scale3d(0.85, 0.85, 1);
transform: translate3d(0, -1.1em, 0) scale3d(0.85, 0.85, 1);
}
}
@keyframes anim-fumi-1 {
50% {
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
}
51% {
-webkit-transform: translate3d(0, -3em, 0) scale3d(0.85, 0.85, 1);
transform: translate3d(0, -3em, 0) scale3d(0.85, 0.85, 1);
}
100% {
color: #a3a3a3;
-webkit-transform: translate3d(0, -1.1em, 0) scale3d(0.85, 0.85, 1);
transform: translate3d(0, -1.1em, 0) scale3d(0.85, 0.85, 1);
}
}
.input__field--fumi:focus + .input__label--fumi .icon--fumi,
.input--filled .icon--fumi {
-webkit-animation: anim-fumi-2 0.3s forwards;
animation: anim-fumi-2 0.3s forwards;
}
@-webkit-keyframes anim-fumi-2 {
50% {
opacity: 1;
-webkit-transform: translate3d(0, -3em, 0);
transform: translate3d(0, -3em, 0);
}
50.25% {
opacity: 0;
-webkit-transform: translate3d(0, -3em, 0);
transform: translate3d(0, -3em, 0);
}
50.75% {
opacity: 0;
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
}
51% {
opacity: 1;
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
color: #00aeef;
}
}
@keyframes anim-fumi-2 {
50% {
opacity: 1;
-webkit-transform: translate3d(0, -3em, 0);
transform: translate3d(0, -3em, 0);
}
50.25% {
opacity: 0;
-webkit-transform: translate3d(0, -3em, 0);
transform: translate3d(0, -3em, 0);
}
50.75% {
opacity: 0;
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
}
51% {
opacity: 1;
-webkit-transform: translate3d(0, 3em, 0);
transform: translate3d(0, 3em, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
color: #00aeef;
}
}
/* Ruri */
.input__field--ruri {
width: 100%;
background: transparent;
padding: 0.5em 0;
margin-bottom: 2em;
color: #fff;
}
.input__label--ruri {
width: 100%;
position: absolute;
text-align: left;
font-size: 1em;
padding: 10px 0 5px;
pointer-events: none;
}
.input__label--ruri::after {
content: '';
position: absolute;
width: 100%;
height: 7px;
background: #B7C3AC;
left: 0;
top: 100%;
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: -webkit-transform 0.3s, background-color 0.3s;
transition: transform 0.3s, background-color 0.3s;
}
.input__label-content--ruri {
padding: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transition: -webkit-transform 0.3s, color 0.3s;
transition: transform 0.3s, color 0.3s;
}
.input__field--ruri:focus + .input__label--ruri::after,
.input--filled .input__label--ruri::after {
background: #a3d39c;
-webkit-transform: scale3d(1, 0.25, 1);
transform: scale3d(1, 0.25, 1);
}
.input__field--ruri:focus + .input__label--ruri .input__label-content--ruri,
.input--filled .input__label--ruri .input__label-content--ruri {
color: #a3d39c;
-webkit-transform: translate3d(0, 2em, 0) scale3d(0.655, 0.655, 1);
transform: translate3d(0, 2em, 0) scale3d(0.655, 0.655, 1);
}
/* Kohana */
.input--kohana {
overflow: hidden;
background: #fff;
}
.input__field--kohana {
width: 100%;
background: transparent;
padding-left: 2.75em;
color: #6a7989;
}
.input__label--kohana {
position: absolute;
width: 100%;
text-align: left;
pointer-events: none;
color: #D2D2D2;
}
.input__label-content--kohana {
display: inline-block;
width: auto;
-webkit-transform: translate3d(-1.75em, 0, 0);
transform: translate3d(-1.75em, 0, 0);
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.icon--kohana {
display: inline-block;
margin-top: 0.9em;
-webkit-transform: translate3d(-2em, 0, 0);
transform: translate3d(-2em, 0, 0);
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.input__field--kohana:focus + .input__label--kohana .input__label-content--kohana,
.input--filled .input__label-content--kohana {
opacity: 0;
-webkit-transform: translate3d(100px, 0, 0);
transform: translate3d(100px, 0, 0);
}
.input__label-content--kohana,
.icon--kohana,
.input__field--kohana:focus + .input__label--kohana .input__label-content--kohana,
.input--filled .input__label-content--kohana {
-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.input__field--kohana:focus + .input__label--kohana .icon--kohana,
.input--filled .icon--kohana {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
@import url(https://fonts.googleapis.com/css?family=Raleway:200,500,700,800);
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'codropsicons';
src:url('../fonts/codropsicons/codropsicons.eot');
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
body {
background: #f9f7f6;
color: #404d5b;
font-weight: 500;
font-size: 1.05em;
font-family: 'Raleway', Arial, sans-serif;
}
a {
color: #2fa0ec;
text-decoration: none;
outline: none;
}
a:hover, a:focus {
color: #404d5b;
}
.container {
margin: 0 auto;
text-align: center;
overflow: hidden;
}
.content {
font-size: 150%;
padding: 3em 0;
}
.content h2 {
margin: 0 0 2em;
opacity: 0.1;
}
.content p {
margin: 1em 0;
padding: 5em 0 0 0;
font-size: 0.65em;
}
.bgcolor-1 { background: #f0efee; }
.bgcolor-2 { background: #f9f9f9; }
.bgcolor-3 { background: #e8e8e8; }
.bgcolor-4 { background: #2f3238; color: #fff; }
.bgcolor-5 { background: #df6659; color: #521e18; }
.bgcolor-6 { background: #2fa8ec; color: #fff;}
.bgcolor-7 { background: #d0d6d6; }
.bgcolor-8 { background: #3d4444; color: #fff; }
.bgcolor-9 { background: #8781bd; color: #fff; }
.bgcolor-10 { background: #6C6C6C; }
body .nomargin-bottom {
margin-bottom: 0;
}
/* Header */
.codrops-header {
padding: 3em 190px 4em;
letter-spacing: -1px;
}
.codrops-header h1 {
font-weight: 800;
font-size: 4em;
line-height: 1;
margin: 0.25em 0 0;
}
.codrops-header h1 span {
display: block;
font-size: 50%;
font-weight: 400;
padding: 0.325em 0 1em 0;
color: #c3c8cd;
}
/* Demos nav */
.codrops-demos a {
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
font-size: 0.85em;
display: inline-block;
margin: 0 1em;
font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.codrops-demos a.current-demo {
border-bottom: 2px solid;
color: #404d5b;
}
/* Top Navigation Style */
.codrops-links {
position: relative;
display: inline-block;
white-space: nowrap;
font-size: 1.25em;
text-align: center;
}
.codrops-links::after {
position: absolute;
top: 0;
left: 50%;
margin-left: -1px;
width: 2px;
height: 100%;
background: #dbdbdb;
content: '';
-webkit-transform: rotate3d(0,0,1,22.5deg);
transform: rotate3d(0,0,1,22.5deg);
}
.codrops-icon {
display: inline-block;
margin: 0.5em;
padding: 0em 0;
width: 1.5em;
text-decoration: none;
}
.codrops-icon span {
display: none;
}
.codrops-icon:before {
margin: 0 5px;
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-family: 'codropsicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
}
.codrops-icon--drop:before {
content: "\e001";
}
.codrops-icon--prev:before {
content: "\e004";
}
/* Related demos */
.content--related {
text-align: center;
color: #D8DADB;
font-weight: bold;
}
.media-item {
display: inline-block;
padding: 1em;
vertical-align: top;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.media-item__img {
opacity: 0.8;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
opacity: 1;
}
.media-item__title {
font-size: 0.75em;
margin: 0;
padding: 0.5em;
}
@media screen and (max-width: 50em) {
.codrops-header {
padding: 3em 10% 4em;
}
}
@media screen and (max-width: 40em) {
.codrops-header h1 {
font-size: 2.8em;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.