Buscador con transiciones CSS - Ejemplo 1 - Tutoriales En Linea

Herramientas SEO Tamaño del resultado: 668 x 574

<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Buscador con transiciones CSS - Ejemplo 1 - Tutoriales En Linea</title>
</head>
<body>

<style>@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.0/css/font-awesome.css";
 html {
     background: #000;
}
 body {
     font-size: 30px;
}
 #container {
     margin: auto;
     padding: 3em 0 0;
     text-align: center;
}
 #searchform {
     display: inline;
     font-size: 1em;
     border-radius: 8em;
     border: 0.1em solid #dad0be;
     box-shadow: 0 0 0.3em rgba(60,60,60,0.4);
     padding: 0.3em;
     background: white;
}
 #s {
     transition: all 0.2s ease-out;
     width: 1px;
     border-radius: 0;
     box-shadow: none;
     outline: none;
     padding: 0;
     margin: 0;
     border: 0;
     background-color: transparent;
     opacity: 0;
}
 #s:focus {
     width: 8em;
     opacity: 1;
}
 label {
     padding-left: 1px;
     display: inline-block;
     margin-top: 0.3em;
     color: #dad0be;
     text-shadow: 0 0 0.1em rgba(60,60,60,0.3);
     position: relative;
     left: 0.1em;
}</style>

<div id="container">
<form role="search" method="get" id="searchform" action="">
  <label for="s">
    <i class="icon-search"></i>
  </label>
  <input type="text" value="" placeholder="Buscar" class="" id="s" />
</form>
</div>

</body>
</html>