En este tutorial veremos como crear una caja de búsqueda con efecto de animación, utilizando CSS3.
Básicamente, lo que vamos a hacer es crear un buscador que aumentará de tamaño tan pronto coloquemos el puntero del ratón dentro del mismo.
Lo primero que haremos será crear nuestra estructura con HTML. Para esto, agregamos un elemento <form> que sirve como contenedor, y dentro de este definimos un elemento <input> con el atributo type y el valor “search”, el cual le indica al navegador que el campo de formulario es una caja de búsqueda. Además, agregaremos el atributo placeholder con el texto “Buscar…”
Y aquí tenemos el código HTML:
<form action="datos.php" method="GET">
<input type="search" name="nombre" placeholder="Buscar...">
</form>
Lo siguiente será aplicar los estilos con CSS.
Primero vamos a crear una regla para definir un tamaño por defecto a nuestro input, y además añadiremos algunos bordes y un tamaño de fuente. Para esto, vamos a emplear un selector de atributos del tipo input[type=»search»] con lo cual indicamos al navegador que aplique los estilos declarados a todos los elementos <input> que que contengan el atributo type con el valor “search”.
input[type="search"]{
width: 145px; /*ancho por defecto*/
font-size: 1rem;
padding: 9px 10px 9px 5px;
border: 1px solid #000;
border-radius: 2px;
}
Luego creamos otra regla para que la caja de búsquedas aumente de tamaño cuando hagamos foco en de la misma, es decir, cuando ubiquemos el puntero del rato dentro del campo de formulario. Para esto, al selector de atributos le agregaremos la pseudo-clase “focus”, y en la declaración definimos la propiedad width con un valor de 50%, además añadimos la propiedad transition para crear un efecto de transición.
input[type="search"]:focus{
width: 50%; /*tamaño del boton buscar al hacer click*/
transition: width 1s ease-in-out
}
De forma opcional, podemos agregar la propiedad transition dentro de la primera regla, con el fin de crear un efecto de salida.
input[type="search"]{
width: 145px; /*ancho por defecto*/
font-size: 1rem;
padding: 9px 10px 9px 5px;
border: 1px solid #000;
border-radius: 2px;
transition: width 1s ease-in-out
}
Y este sería el código completo:
See the Pen Cómo crear un buscador animado con CSS3 by simplicitytree (@simplicitytree) on CodePen.
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
