hx
/
expo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
							<!DOCTYPE html>
<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 | Set 1</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="Codrops" />
		<link rel="shortcut icon" href="../favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/set1.css" />
		<!--[if IE]>
  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="container">
			<header class="codrops-header">
				<div class="codrops-links">
					<a class="codrops-icon codrops-icon--prev" href="http://tympanus.net/Tutorials/SlidingHeaderLayout/" title="Previous Demo"><span>Previous Demo</span></a>
					<a class="codrops-icon codrops-icon--drop" href="http://tympanus.net/codrops/?p=21991" title="Back to the a"><span>Back to the Codrops a</span></a>
				</div>
				<h1>Text Input Effects <span>Simple ideas for enhancing text input interactions</span></h1>
				<nav class="codrops-demos">
					<a href="index.html" class="current-demo">Set 1</a>
					<a href="index2.html">Set 2</a>
				</nav>
			</header>
			<section class="content bgcolor-1">
				<h2 class="nomargin-bottom">Haruki</h2>
				<span class="input input--haruki">
					<input class="input__field input__field--haruki" type="text" id="input-1" />
					<label class="input__label input__label--haruki" for="input-1">
						<span class="input__label-content input__label-content--haruki">First Name</span>
					</label>
				</span>
				<span class="input input--haruki">
					<input class="input__field input__field--haruki" type="text" id="input-2" />
					<label class="input__label input__label--haruki" for="input-2">
						<span class="input__label-content input__label-content--haruki">Last Name</span>
					</label>
				</span>
				<span class="input input--haruki">
					<input class="input__field input__field--haruki" type="text" id="input-3" />
					<label class="input__label input__label--haruki" for="input-3">
						<span class="input__label-content input__label-content--haruki">Email</span>
					</label>
				</span>
			</section>
			<section class="content">
				<h2>Hoshi</h2>
				<span class="input input--hoshi">
					<input class="input__field input__field--hoshi" type="text" id="input-4" />
					<label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4">
						<span class="input__label-content input__label-content--hoshi">Name</span>
					</label>
				</span>
				<span class="input input--hoshi">
					<input class="input__field input__field--hoshi" type="text" id="input-5" />
					<label class="input__label input__label--hoshi input__label--hoshi-color-2" for="input-5">
						<span class="input__label-content input__label-content--hoshi">Street</span>
					</label>
				</span>
				<span class="input input--hoshi">
					<input class="input__field input__field--hoshi" type="text" id="input-6" />
					<label class="input__label input__label--hoshi input__label--hoshi-color-3" for="input-6">
						<span class="input__label-content input__label-content--hoshi">Town</span>
					</label>
				</span>
				<p>Inspired by Andrej Radisic's <a href="https://dribbble.com/shots/1785176-Jawbreaker-input-field">Jawbreaker input field</a></p>
			</section>
			<section class="content bgcolor-4">
				<h2>Kuro</h2>
				<span class="input input--kuro">
					<input class="input__field input__field--kuro" type="text" id="input-7" />
					<label class="input__label input__label--kuro" for="input-7">
						<span class="input__label-content input__label-content--kuro">Username</span>
					</label>
				</span>
				<span class="input input--kuro">
					<input class="input__field input__field--kuro" type="text" id="input-8" />
					<label class="input__label input__label--kuro" for="input-8">
						<span class="input__label-content input__label-content--kuro">Website</span>
					</label>
				</span>
				<span class="input input--kuro">
					<input class="input__field input__field--kuro" type="text" id="input-9" />
					<label class="input__label input__label--kuro" for="input-9">
						<span class="input__label-content input__label-content--kuro">Invitation Code</span>
					</label>
				</span>
			</section>
			<section class="content bgcolor-7">
				<h2>Jiro</h2>
				<span class="input input--jiro">
					<input class="input__field input__field--jiro" type="text" id="input-10" />
					<label class="input__label input__label--jiro" for="input-10">
						<span class="input__label-content input__label-content--jiro">Cat's Name</span>
					</label>
				</span>
				<span class="input input--jiro">
					<input class="input__field input__field--jiro" type="text" id="input-11" />
					<label class="input__label input__label--jiro" for="input-11">
						<span class="input__label-content input__label-content--jiro">Dog's Name</span>
					</label>
				</span>
				<span class="input input--jiro">
					<input class="input__field input__field--jiro" type="text" id="input-12" />
					<label class="input__label input__label--jiro" for="input-12">
						<span class="input__label-content input__label-content--jiro">Hamster's Name</span>
					</label>
				</span>
			</section>
			<section class="content">
				<h2>Minoru</h2>
				<span class="input input--minoru">
					<input class="input__field input__field--minoru" type="text" id="input-13" />
					<label class="input__label input__label--minoru" for="input-13">
						<span class="input__label-content input__label-content--minoru">First Name</span>
					</label>
				</span>
				<span class="input input--minoru">
					<input class="input__field input__field--minoru" type="text" id="input-14" />
					<label class="input__label input__label--minoru" for="input-14">
						<span class="input__label-content input__label-content--minoru">Middle Name</span>
					</label>
				</span>
				<span class="input input--minoru">
					<input class="input__field input__field--minoru" type="text" id="input-15" />
					<label class="input__label input__label--minoru" for="input-15">
						<span class="input__label-content input__label-content--minoru">Last Name</span>
					</label>
				</span>
			</section>
			<section class="content bgcolor-5">
				<h2>Yoko</h2>
				<span class="input input--minoru">
					<input class="input__field input__field--yoko" type="text" id="input-16" />
					<label class="input__label input__label--yoko" for="input-16">
						<span class="input__label-content input__label-content--yoko">Street</span>
					</label>
				</span>
				<span class="input input--minoru">
					<input class="input__field input__field--yoko" type="text" id="input-17" />
					<label class="input__label input__label--yoko" for="input-17">
						<span class="input__label-content input__label-content--yoko">City</span>
					</label>
				</span>
				<span class="input input--minoru">
					<input class="input__field input__field--yoko" type="text" id="input-18" />
					<label class="input__label input__label--yoko" for="input-18">
						<span class="input__label-content input__label-content--yoko">Region</span>
					</label>
				</span>
			</section>
			<section class="content">
				<h2>Hideo</h2>
				<span class="input input--hideo">
					<input class="input__field input__field--hideo" type="text" id="input-41" />
					<label class="input__label input__label--hideo" for="input-41">
						<i class="fa fa-fw fa-user icon icon--hideo"></i>
						<span class="input__label-content input__label-content--hideo">Username</span>
					</label>
				</span>
				<span class="input input--hideo">
					<input class="input__field input__field--hideo" type="text" id="input-42" />
					<label class="input__label input__label--hideo" for="input-42">
						<i class="fa fa-fw fa-envelope icon icon--hideo"></i>
						<span class="input__label-content input__label-content--hideo">Email</span>
					</label>
				</span>
				<span class="input input--hideo">
					<input class="input__field input__field--hideo" type="text" id="input-43" />
					<label class="input__label input__label--hideo" for="input-43">
						<i class="fa fa-fw fa-lock icon icon--hideo"></i>
						<span class="input__label-content input__label-content--hideo">Password</span>
					</label>
				</span>
			</section>
			<section class="content bgcolor-3">
				<h2>Kyo</h2>
				<span class="input input--kyo">
					<input class="input__field input__field--kyo" type="text" id="input-19" />
					<label class="input__label input__label--kyo" for="input-19">
						<span class="input__label-content input__label-content--kyo">What's your email?</span>
					</label>
				</span>
			</section>
			<section class="content bgcolor-4">
				<h2>Akira</h2>
				<span class="input input--akira">
					<input class="input__field input__field--akira" type="text" id="input-22" />
					<label class="input__label input__label--akira" for="input-22">
						<span class="input__label-content input__label-content--akira">First Name</span>
					</label>
				</span>
				<span class="input input--akira">
					<input class="input__field input__field--akira" type="text" id="input-23" />
					<label class="input__label input__label--akira" for="input-23">
						<span class="input__label-content input__label-content--akira">Last Name</span>
					</label>
				</span>
				<span class="input input--akira">
					<input class="input__field input__field--akira" type="text" id="input-24" />
					<label class="input__label input__label--akira" for="input-24">
						<span class="input__label-content input__label-content--akira">Maiden Name</span>
					</label>
				</span>
			</section>
			<section class="content">
				<h2>Ichiro</h2>
				<span class="input input--ichiro">
					<input class="input__field input__field--ichiro" type="text" id="input-25" />
					<label class="input__label input__label--ichiro" for="input-25">
						<span class="input__label-content input__label-content--ichiro">Bird's Color</span>
					</label>
				</span>
				<span class="input input--ichiro">
					<input class="input__field input__field--ichiro" type="text" id="input-26" />
					<label class="input__label input__label--ichiro" for="input-26">
						<span class="input__label-content input__label-content--ichiro">Wing Span</span>
					</label>
				</span>
				<span class="input input--ichiro">
					<input class="input__field input__field--ichiro" type="text" id="input-27" />
					<label class="input__label input__label--ichiro" for="input-27">
						<span class="input__label-content input__label-content--ichiro">Beak Length</span>
					</label>
				</span>
			</section>
			<section class="content bgcolor-6">
				<h2>Juro</h2>
				<span class="input input--juro">
					<input class="input__field input__field--juro" type="text" id="input-28" />
					<label class="input__label input__label--juro" for="input-28">
						<span class="input__label-content input__label-content--juro">First Name</span>
					</label>
				</span>
				<span class="input input--juro">
					<input class="input__field input__field--juro" type="text" id="input-29" />
					<label class="input__label input__label--juro" for="input-29">
						<span class="input__label-content input__label-content--juro">Last Name</span>
					</label>
				</span>
				<span class="input input--juro">
					<input class="input__field input__field--juro" type="text" id="input-30" />
					<label class="input__label input__label--juro" for="input-30">
						<span class="input__label-content input__label-content--juro">Maiden Name</span>
					</label>
				</span>
			</section>
			<section class="content bgcolor-4">
				<h2>Madoka</h2>
				<span class="input input--madoka">
					<input class="input__field input__field--madoka" type="text" id="input-31" />
					<label class="input__label input__label--madoka" for="input-31">
						<svg class="graphic graphic--madoka" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
							<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
						</svg>
						<span class="input__label-content input__label-content--madoka">Frequency</span>
					</label>
				</span>
				<span class="input input--madoka">
					<input class="input__field input__field--madoka" type="text" id="input-32" />
					<label class="input__label input__label--madoka" for="input-32">
						<svg class="graphic graphic--madoka" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
							<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
						</svg>
						<span class="input__label-content input__label-content--madoka">Weight</span>
					</label>
				</span>
				<span class="input input--madoka">
					<input class="input__field input__field--madoka" type="text" id="input-33" />
					<label class="input__label input__label--madoka" for="input-33">
						<svg class="graphic graphic--madoka" width="100%" height="100%" viewBox="0 0 404 77" preserveAspectRatio="none">
							<path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
						</svg>
						<span class="input__label-content input__label-content--madoka">Strength</span>
					</label>
				</span>
			</section>
			<section class="content">
				<h2>Kaede</h2>
				<span class="input input--kaede">
					<input class="input__field input__field--kaede" type="text" id="input-35" />
					<label class="input__label input__label--kaede" for="input-35">
						<span class="input__label-content input__label-content--kaede">First Name</span>
					</label>
				</span>
				<span class="input input--kaede">
					<input class="input__field input__field--kaede" type="text" id="input-36" />
					<label class="input__label input__label--kaede" for="input-36">
						<span class="input__label-content input__label-content--kaede">Last Name</span>
					</label>
				</span>
				<span class="input input--kaede">
					<input class="input__field input__field--kaede" type="text" id="input-37" />
					<label class="input__label input__label--kaede" for="input-37">
						<span class="input__label-content input__label-content--kaede">Website</span>
					</label>
				</span>
			</section>
			<section class="content bgcolor-8">
				<h2>Isao</h2>
				<span class="input input--isao">
					<input class="input__field input__field--isao" type="text" id="input-38" />
					<label class="input__label input__label--isao" for="input-38" data-content="First Name">
						<span class="input__label-content input__label-content--isao">First Name</span>
					</label>
				</span>
				<span class="input input--isao">
					<input class="input__field input__field--isao" type="text" id="input-39" />
					<label class="input__label input__label--isao" for="input-39" data-content="Middle Name">
						<span class="input__label-content input__label-content--isao">Middle Name</span>
					</label>
				</span>
				<span class="input input--isao">
					<input class="input__field input__field--isao" type="text" id="input-40" />
					<label class="input__label input__label--isao" for="input-40" data-content="Last Name">
						<span class="input__label-content input__label-content--isao">Last Name</span>
					</label>
				</span>
			</section>
			<!-- Related demos -->
			<section class="content content--related">
				<p>If you enjoyed this demo you might also like:</p>
				<a class="media-item" href="http://tympanus.net/Development/MinimalForm/">
					<img class="media-item__img" src="img/related/MinimalForm.png" />
					<h3 class="media-item__title">Minimal Form Interface</h3>
				</a>
				<a class="media-item" href="http://tympanus.net/Development/SelectInspiration/">
					<img class="media-item__img" src="img/related/SelectInspiration.png" />
					<h3 class="media-item__title">Custom Select Elements</h3>
				</a>
			</section>
		</div><!-- /container -->
		<script src="js/classie.js"></script>
		<script>
			(function() {
				// trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
				if (!String.prototype.trim) {
					(function() {
						// Make sure we trim BOM and NBSP
						var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
						String.prototype.trim = function() {
							return this.replace(rtrim, '');
						};
					})();
				}

				[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
					// in case the input is already filled..
					if( inputEl.value.trim() !== '' ) {
						classie.add( inputEl.parentNode, 'input--filled' );
					}

					// events:
					inputEl.addEventListener( 'focus', onInputFocus );
					inputEl.addEventListener( 'blur', onInputBlur );
				} );

				function onInputFocus( ev ) {
					classie.add( ev.target.parentNode, 'input--filled' );
				}

				function onInputBlur( ev ) {
					if( ev.target.value.trim() === '' ) {
						classie.remove( ev.target.parentNode, 'input--filled' );
					}
				}
			})();
		</script>
	</body>
</html>