Creación de un cuadro de búsqueda CSS3 oscilante
CSS3 es el lenguaje de hoja de estilo de la próxima generación. Presenta muchas características nuevas y emocionantes como sombras, animaciones, transiciones, bordes, etc. Aunque las especificaciones aún no se han finalizado, muchos fabricantes de navegadores ya han comenzado a admitir muchas de las nuevas funciones..
En este tutorial, exploraremos algunas de estas características como sombra de texto, radio del borde, sombras de cajas y transiciones para crear un campo de búsqueda oscilante.
La versión de photoshop de este campo de búsqueda fue creada por Alvin Thong y se puede descargar desde aquí. He intentado recrear este campo de búsqueda utilizando CSS3 puro. Cabe señalar que No todos los navegadores son compatibles con las características de CSS3. y para probar este tutorial, debe usar uno de los navegadores modernos que admiten las características de CSS 3.
Listo? Empecemos!
1. HTML5 Doctype
Comenzaremos con el formato HTML. Es muy sencillo, después de la Doctype HTML5 y el declaración, tenemos un con una identificación llamada #envoltura dentro . Esto se hace simplemente para definir el ancho del cuadro de contenido y para alinearlo con el centro de la página.
Esto es seguido por una Así es como se ve el código: Para crear el cuadro grande alrededor del formulario, agregaremos estilos a la El código importante aquí es el Explicación: Aquí, el recuadro de palabras clave especifica si la sombra estará dentro del cuadro. Los dos primeros ceros indican el desplazamiento x y el desplazamiento y y el 3px indica el desenfoque. La siguiente es la declaración de color. He utilizado los valores rgba aquí; rgba significa rojo verde azul y alfa (opacidad). Por lo tanto, los 4 valores dentro del paréntesis indican la cantidad de rojo, verde, azul y su alfa (opacidad). Notarás que se han apaleado 5 conjuntos de declaraciones en la sombra. Esto se puede hacer separándolos con una coma. Las dos primeras sombras definen el efecto de "brillo interior" blanco y las siguientes declaraciones le dan a la caja su aspecto sólido / grueso. Juega con estos valores para entender cómo funciona.. Ahora que el cuadro está completo, pasemos al estilo del campo de entrada. Los estilos declarados para el campo de entrada son muy similares a los decared para la caja grande Explicación: Notará que esta vez, la sombra borrosa se mantuvo en 0 para obtener una sombra nítida y se utiliza un desplazamiento vertical de 5px. En las declaraciones sucesivas, el desenfoque se mantuvo en 0px pero el color y el desplazamiento de y se han cambiado. Nuevamente, juega con estos valores para obtener diferentes resultados.. Vamos a diseñar el botón de búsqueda. Aparte de los colores, el botón de búsqueda tiene en su mayoría los mismos estilos que el de la caja exterior. Se han utilizado sombras de borde y de cuadro similares en el botón. La nueva característica introducida es la Explicación: En el El estado activo del botón tiene un poco más de cambios. En esto, le he dado al botón una posición de absoluto y un valor 'superior' de 5px. Esto se ha hecho para darle un aspecto más natural, de modo que sienta que el botón en realidad ha sido presionado hacia abajo por 5 píxeles. Otros cambios en el estado activo son el color de fondo y las sombras. Observe que he reducido el desplazamiento de y de las sombras para darle un aspecto 'presionado hacia abajo'. Aquí está el código para el estado activo del botón de envío: Esto completa nuestro campo de búsqueda. Hemos usado bastantes de las nuevas características de CSS3. Aquí está el completo CSS y HTML de este campo de búsqueda.. Espero que hayan disfrutado este tutorial. Siéntase libre de experimentar con estas características y no olvide compartir sus pensamientos.. Nota del editor: Esta publicación está escrita por Bharani M para Hongkiat.com. Bharani es un diseñador / desarrollador de Nueva Delhi, India.#principal. Esta identificación contiene los estilos que definen el gran cuadro blanco alrededor del campo de entrada y el botón de búsqueda. Esta declarado en su interior. El formulario tiene la campo de entrada de texto y el sbotón de búsqueda. Aquí es cómo se ve el formulario sin ningún estilo aplicado: 
Campo de búsqueda CSS3
2. Creando el cuadro delimitador
#principal. A partir del código que se muestra a continuación, notará que a la caja se le ha dado un ancho de 400 px y una altura de 50 px.. #main ancho: 400px; altura: 50px; fondo: # f2f2f2; relleno: 6px 10px; borde: 1px sólido # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 5px; -moz-box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.8), inserción 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.8), inserción 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.8), inserción 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
radio del borde declaración y la sombra de la caja declaración. Para crear esquinas redondeadas, hemos utilizado la declaración de radio de borde CSS3, los prefijos de navegador "-moz-" y "-webkit-" para garantizar que esto funcione en los navegadores basados en gecko y webkit. Las declaraciones de la caja sombreada pueden parecer un poco confusas pero en realidad es muy simple. box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.8), inserción 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede;
Avance
3. Estilo del campo de entrada
input [type = "text"] float: left; ancho: 230px; relleno: 15px 5px 5px 5px; margen superior: 5px; margen izquierdo: 3px; borde: 1px sólido # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 5px; -moz-box-shadow: inserción 0 5px 0 #ccc, inserción 0 6px 0 # 989898, inserción 0 13px 0 #dfdede; -webkit-box-shadow: inserción 0 5px 0 #ccc, inserción 0 6px 0 # 989898, inserción 0 13px 0 #dfdede; cuadro de sombra: inserción 0 5px 0 #ccc, inserción 0 6px 0 # 989898, inserción 0 13px 0 #dfdede;
#principal. Hemos utilizado el mismo radio de borde (5px). Una vez más, varias cajas de sombras han sido golpeadas. cuadro de sombra: inserción 0 5px 0 #ccc, inserción 0 6px 0 # 989898, inserción 0 13px 0 #dfdede;
Avance
4. Diseñar el botón enviar
input [type = "submit"]. solid float: left; cursor: puntero; ancho: 130px; relleno: 8px 6px; margen izquierdo: 20px; color de fondo: # f8b838; color: rgba (134, 79, 11, 0,8); transformar texto: mayúsculas; font-weight: negrita; borde: 1px sólido # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 5px; texto-sombra: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.6), inserción 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.6), inserción 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; caja-sombra: inserción 0 0 3px rgba (255, 255, 255, 0.6), inserción 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transición: fondo 0.2s facilidad de salida;
sombra de texto. texto-sombra: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9);
sombra de texto Declaración, los tres primeros valores numéricos son el desplazamiento x, el desplazamiento y el desenfoque, respectivamente. Los valores rgba indican el color de la sombra. En el siguiente conjunto de declaración (separados por una coma), el desplazamiento de y tiene un valor de -1. Esto se hace para dar al texto una “sombra interior” efecto. El estado de desplazamiento / enfoque del botón de envío tiene diferentes valores de color de fondo y sombras. Avance
Estado "activo" para botón
input [type = "submit"]. solid: active background: # f6a000; posición: relativa; superior: 5px; borde: 1px sólido # 702d00; -moz-box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.6), inserción 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.6), inserción 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; caja-sombra: inserción 0 0 3px rgba (255, 255, 255, 0.6), inserción 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
El Código Completo (CSS)
#main ancho: 400px; altura: 50px; fondo: # f2f2f2; relleno: 6px 10px; borde: 1px sólido # b5b5b5; -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 5px; -moz-box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.8), inserción 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.8), inserción 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.8), inserción 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; input [type = "text"] float: left; ancho: 230px; relleno: 15px 5px 5px 5px; margen superior: 5px; margen izquierdo: 3px; borde: 1px sólido # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 5px; -moz-box-shadow: inserción 0 5px 0 #ccc, inserción 0 6px 0 # 989898, inserción 0 13px 0 #dfdede; -webkit-box-shadow: inserción 0 5px 0 #ccc, inserción 0 6px 0 # 989898, inserción 0 13px 0 #dfdede; cuadro de sombra: inserción 0 5px 0 #ccc, inserción 0 6px 0 # 989898, inserción 0 13px 0 #dfdede; input [type = "submit"]. solid float: left; cursor: puntero; ancho: 130px; relleno: 8px 6px; margen izquierdo: 20px; color de fondo: # f8b838; color: rgba (134, 79, 11, 0,8); transformar texto: mayúsculas; font-weight: negrita; borde: 1px sólido # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 5px; texto-sombra: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.6), inserción 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.6), inserción 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; caja-sombra: inserción 0 0 3px rgba (255, 255, 255, 0.6), inserción 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transición: fondo 0.2s facilidad de salida; input [type = "submit"]. solid: hover, input [type = "submit"]. solid: focus background: # ffd842; -moz-box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.9), inserción 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.9), inserción 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 #ccc; box-shadow: recuadro 0 0 3px rgba (255, 255, 255, 0.9), recuadro 0 2px 1px rgba (255, 250, 76, 0.8), 0 5px 0 # d8a031, 0 6px 0 # 593a11, 0 13px 0 # ccc; input [type = "submit"]. solid: active background: # f6a000; posición: relativa; superior: 5px; borde: 1px sólido # 702d00; -moz-box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.6), inserción 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: inserción 0 0 3px rgba (255, 255, 255, 0.6), inserción 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; caja-sombra: inserción 0 0 3px rgba (255, 255, 255, 0.6), inserción 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc;
