Cómo realizar un Buscador con transiciones CSS
Las animaciones CSS3 se utilizan cuando necesita mover elementos en una página web. Animar elementos a través de CSS brinda más control que las transiciones CSS, la principal diferencia es que en las animaciones puede controlar los estados intermedios según el inicio, el final o el porcentaje de tiempo transcurrido, mientras que en las transiciones solo puede interactuar con los estados inicial y final.
Un ejemplo obvio de distinguir estas dos propiedades podría ser un enlace o un botón, cuando pasas el mouse sobre uno de ellos y cambia de un color a otro, hay un tiempo de retraso entre la transición inicial y final, arriba hay una transición Si este botón o enlace se mueve de un punto a otro, aumenta o reduce su tamaño, aplica una transformación en un momento determinado, entonces estamos hablando de animación.
Es fácil desarrollar una barra de navegación receptiva estándar con Bootstrap. Las cosas se complican en los dispositivos móviles. Seguro que has visto muchas webs con este tipo de botón de búsqueda animado, que suele ayudar mucho cuando desarrollamos para smartphones. Bueno, hoy aprenderemos como hacer este buscador de una manera muy sencilla, solo necesitas html5 y css3, te lo explico a continuación.
Ejemplo 1
La generación de este motor de búsqueda desplegable requiere la colaboración entre la etiqueta y la entrada; cuando se selecciona el icono de la etiqueta, el navegador se centra en el campo de entrada conectado.
Cuando un elemento de entrada recibe el foco, su anchura puede modificarse con la ayuda de transiciones CSS3 para crear un efecto. Es importante tener en cuenta que el elemento de entrada debe tener una anchura mínima de 1px para que la transición funcione correctamente.
La etiqueta de form es responsable de crear una presentación visualmente atractiva con los elementos box-shadow, border-radius y border.
<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>@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;
}
Ejemplo 2
Demo 1: Input desplegable
.demo, .demo-2 {
position:relative;
height:100px;
width:500px;
}
.demo .form-search, .demo-2 .form-search {
position:absolute;
right:0px;
top:0px;
}
.demo .form-search input[type=text],
.demo-2 .form-search input[type=text] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
border: solid 1px #ccc;
padding: 9px 18px;
width: 200px;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.demo-2 .form-search input[type=text] {
width:60px;
position:absolute;
right:0px;
z-index:1000;
padding:8px 12px;
cursor:pointer;
}
.demo-2 .form-search div.input-group {
width:60px;
}
.demo .form-search input[type=text]:focus {
width: 350px;
background-color: #fff;
}
.demo-2 .form-search input[type=text]:focus {
position:absolute;
right:60px;
width:250px;
}
.demo .form-search button.btn,
.demo-2 .form-search button.btn {
padding:16px 12px;
border-top-right-radius:4px;
border-bottom-right-radius: 4px;
cursor:not-allowed;
}
.demo-2 .form-search button.btn {
padding:15px 12px;
}<div class="demo">
<form class="form-search">
<div class="input-group">
<input class="form-control form-text" maxlength="128" placeholder="Buscar" size="15" type="text" />
<span class="input-group-btn"><button class="btn btn-primary"><i class="fa fa-search fa-lg"> </i></button></span>
</div>
</form>
</div>Demo 2: Input desplegable que oculta el botón. Cuando el espacio es muy reducido en la barra de navegación (Ej: Smartphones)
/* Lo primero es posicionar el formulario para asegurarnos que el efecto se produce de derecha a izquierda */
.navbar-form {
position:absolute;
right:0px;
top:0px;
}
/* Definimos las transiciones */
.navbar-form .form-control[type=text] {
background: transparent;
display:inline-block;
transition: all .5s;
}
/* Al situar el puntero en el campo de búsqueda este cambia su color de fondo a blanco, el color de la letra, el borde y la sombra */
.navbar-form .form-control[type=text]:focus {
background-color: #fff;
border-color: #729fcf;
color:#333;
-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
box-shadow: 0 0 5px rgba(109,207,246,.5);
}
/* Para pantallas grandes hacemos que el formulario se despliegue con amplitud ya que disponemos de espacio en la barra de navegación, la busqueda se ejecuta con intro o pinchando en el icono de la lupa */
@media (min-width:1200px) {
.navbar-form input.form-control[type=text] { width: 160px; }
.navbar-form input.form-control[type=text]:focus { width: 350px; }
}
/* Para pantallas menores reducimos el campo de busqueda y hacemos que se despliegue cuando hacemos focus sobre el icono de la lupa. La busqueda se ejecuta con intro o pinchando de nuevo en el icono de la lupa */
@media (max-width: 1200px) {
.navbar-form .form-control[type=text] {
width:40px;
position:absolute;
right:0px;
z-index:1000;
padding:8px 12px;
cursor:pointer;
}
.navbar-form,
.navbar-form div.input-group {
width:40px;
height:40px;
}
.navbar-form .form-control[type=text]:focus {
position:absolute;
right:40px;
width:250px;
}
}
/* Para pantallas de smartphones ajustamos el ancho del campo de busqueda */
@media (max-width: 375px) {
.navbar-form .form-control[type=text]:focus {
width:150px;
}
}Ejemplo 3
Expandir el Input en Hover: Al pasar el ratón por encima del icono de la lupa, el cuadro de búsqueda se expandirá, permitiendo al usuario escribir su consulta. Este ejemplo sigue un enfoque similar al del ejemplo anterior, con ligeras modificaciones para permitir el comportamiento deseado.
@import "https://tutorialesenlinea.es/engine/classes/min/index.php?charset=utf-8&f=/templates/Tutorialesenlinea-es/estilo/fontawesome.min.css";
.container-2{
width: 300px;
vertical-align: middle;
white-space: nowrap;
position: relative;
}
.container-2 input#search{
width: 50px;
height: 50px;
background: #2b303b;
border: none;
font-size: 10pt;
float: left;
color: #262626;
padding-left: 35px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
color: #fff;
-webkit-transition: width .55s ease;
-moz-transition: width .55s ease;
-ms-transition: width .55s ease;
-o-transition: width .55s ease;
transition: width .55s ease;
}
.container-2 input#search::-webkit-input-placeholder {
color: #65737e;
}
.container-2 input#search:-moz-placeholder { /* Firefox 18- */
color: #65737e;
}
.container-2 input#search::-moz-placeholder { /* Firefox 19+ */
color: #65737e;
}
.container-2 input#search:-ms-input-placeholder {
color: #65737e;
}
.container-2 .icon{
position: absolute;
top: 50%;
margin-left: 17px;
margin-top: 17px;
z-index: 1;
color: #4f5b66;
}
.container-2 input#search:focus, .container-2 input#search:active{
outline:none;
width: 300px;
}
.container-2:hover input#search{
width: 300px;
}
.container-2:hover .icon{
color: #93a2ad;
}<div class="box">
<div class="container-2">
<span class="icon"><i class="fa fa-search"></i></span>
<input type="search" id="search" placeholder="Buscar..." />
</div>
</div>
Deja una respuesta