es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Crear un cuadro de búsqueda de Rocking CSS3

Este artículo es parte de nuestra "serie de tutoriales de HTML5 / CSS3", dedicada a ayudarlo a ser un mejor diseñador y / o desarrollador. Haga clic aquí para ver más artículos de la misma serie.

CSS3 es el lenguaje de hoja de estilo de próxima generación. Introduce muchas características nuevas y emocionantes como sombras, animaciones, transiciones, radio de borde, 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 text-shadow, border-radius, box-shadows y transitions 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í. Intenté recrear este campo de búsqueda usando 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 compatibles con las funciones de CSS 3.

Listo? ¡Empecemos!

1. Doctype HTML5

Comenzaremos con el marcado HTML. Es muy simple, después del Doctype HTML5 y declaración, tenemos un

con una identificación llamada #wrapper 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 un

con un ID llamado #main . Este ID contiene los estilos que definen el gran cuadro blanco alrededor del campo de entrada y el botón de búsqueda. Esta
tiene un
declarado dentro de él. El formulario tiene el campo de entrada de texto y el botón de búsqueda. Así es como se ve el formulario sin aplicar ningún estilo:

Así es como se ve el código:

 Campo de búsqueda CSS3 

Campo de búsqueda CSS3

2. Creando el cuadro delimitador

Para crear el cuadro grande alrededor del formulario, agregaremos estilos al

con la ID de #main Del código que se muestra a continuación, observará que la caja tiene un ancho de 400 píxeles y una altura de 50 píxeles.

 #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: recuadro 0 0 3px rgba (255, 255, 255, 0.8), recuadro 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: recuadro 0 0 3px rgba (255, 255, 255, 0.8), recuadro 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; caja-sombra: recuadro 0 0 3px rgba (255, 255, 255, 0.8), recuadro 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; } 

La parte importante del código aquí es la declaración border-radius y la declaración box-shadow . Para crear esquinas redondeadas, hemos utilizado la declaración de radio de borde CSS3, los prefijos de navegador "-moz-" y "-webkit-" se han utilizado para garantizar que esto funcione en los navegadores basados ​​en gecko y webkit. Las declaraciones de cuadro sombreado pueden parecer un poco confusas pero en realidad son muy simples.

 caja-sombra: recuadro 0 0 3px rgba (255, 255, 255, 0.8), recuadro 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 # dfdede; 

Explicación: Aquí, el recuadro de la palabra clave especifica si la sombra estará dentro del recuadro. Los primeros dos ceros indican el desplazamiento x y el desplazamiento y y el 3px indica el desenfoque. Siguiente es la declaración de color. He usado los valores de 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 5 conjuntos de declaraciones ocultas se han agrupado. Esto se puede hacer separándolos con una coma. Las dos primeras sombras definen el efecto de "brillo interior" blanco y las declaraciones siguientes le dan a la caja su aspecto sólido / grueso.

Juega con estos valores para entender cómo funciona.

Avance

3. Diseñando el campo de entrada

Ahora que la caja está completa, pasemos a diseñar el campo de entrada.

 input [type = "text"] {float: left; ancho: 230px; relleno: 15px 5px 5px 5px; margin-top: 5px; margin-left: 3px; borde: 1px sólido # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 5px; -moz-box-shadow: recuadro 0 5px 0 #ccc, recuadro 0 6px 0 # 989898, recuadro 0 13px 0 #dfdede; -webkit-box-shadow: recuadro 0 5px 0 #ccc, recuadro 0 6px 0 # 989898, recuadro 0 13px 0 #dfdede; caja-sombra: inserción 0 5px 0 #ccc, recuadro 0 6px 0 # 989898, recuadro 0 13px 0 #dfdede; } 

Los estilos declarados para el campo de entrada son bastante similares a los descartados para la caja grande #main . Hemos utilizado el mismo radio de borde (5px). Nuevamente, múltiples sombras de caja han sido golpeadas.

 caja-sombra: inserción 0 5px 0 #ccc, recuadro 0 6px 0 # 989898, recuadro 0 13px 0 #dfdede; 

Explicación: Notará que esta vez, la sombra borrosa se ha mantenido en 0 para obtener una sombra nítida y se usa una compensación vertical de 5px. En las declaraciones sucesivas, el desenfoque se ha mantenido a 0px, pero el color y el desplazamiento y se han cambiado. De nuevo, juegue con estos valores para obtener resultados diferentes.

Avance

4. Estilo del botón Enviar

Vamos a estilizar el botón de búsqueda.

 input [type = "submit"]. solid {float: left; cursor: puntero; ancho: 130px; relleno: 8px 6px; margin-left: 20px; color de fondo: # f8b838; color: rgba (134, 79, 11, 0, 8); text-transform: mayúscula; font-weight: negrita; borde: 1px sólido # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 5px; sombra de texto: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: recuadro 0 0 3px rgba (255, 255, 255, 0.6), recuadro 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: recuadro 0 0 3px rgba (255, 255, 255, 0.6), recuadro 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; caja-sombra: recuadro 0 0 3px rgba (255, 255, 255, 0.6), recuadro 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transition: fondo de 0.2 s de agilidad; } 

Además de los colores, el botón de búsqueda tiene principalmente los mismos estilos que el de la caja externa. Se han utilizado bordes de caja y sombras similares en el botón. La nueva característica introducida es la text-shadow .

 sombra de texto: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); 

Explicación: En la declaración de text-shadow, los primeros tres valores numéricos son x-offset, y-offset y blur, respectivamente. Los valores de rgba indican el color de sombra. En el siguiente conjunto de declaraciones (separadas por una coma), el desplazamiento y se da un valor de -1. Esto se hace para darle al texto un efecto de "sombra interna". El estado de desplazamiento / enfoque del botón Enviar tiene diferentes valores de color de fondo y sombras.

Avance

Estado "Activo" para botón

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 valor 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 se ha reducido en 5 píxeles. Otros cambios en el estado activo son el color de fondo y las sombras. Tenga en cuenta que he reducido el desplazamiento y de las sombras para darle un aspecto 'presionado'. Aquí está el código para el estado activo del botón de enviar:

 input [type = "submit"]. solid: active {background: # f6a000; posición: relativa; arriba: 5px; borde: 1px sólido # 702d00; -moz-box-shadow: recuadro 0 0 3px rgba (255, 255, 255, 0.6), recuadro 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: recuadro 0 0 3px rgba (255, 255, 255, 0.6), recuadro 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; caja-sombra: recuadro 0 0 3px rgba (255, 255, 255, 0.6), recuadro 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)

Esto completa nuestro campo de búsqueda. Hemos utilizado bastantes de las nuevas características de CSS3. Aquí está el CSS completo y HTML de este campo de búsqueda.

 #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: recuadro 0 0 3px rgba (255, 255, 255, 0.8), recuadro 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; -webkit-box-shadow: recuadro 0 0 3px rgba (255, 255, 255, 0.8), recuadro 0 2px 2px rgba (255, 255, 255, 1), 0 5px 0 #ccc, 0 6px 0 # 989898, 0 13px 0 #dfdede; caja-sombra: recuadro 0 0 3px rgba (255, 255, 255, 0.8), recuadro 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; margin-top: 5px; margin-left: 3px; borde: 1px sólido # 999999; -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 5px; -moz-box-shadow: recuadro 0 5px 0 #ccc, recuadro 0 6px 0 # 989898, recuadro 0 13px 0 #dfdede; -webkit-box-shadow: recuadro 0 5px 0 #ccc, recuadro 0 6px 0 # 989898, recuadro 0 13px 0 #dfdede; caja-sombra: inserción 0 5px 0 #ccc, recuadro 0 6px 0 # 989898, recuadro 0 13px 0 #dfdede; } input [type = "submit"]. solid {float: left; cursor: puntero; ancho: 130px; relleno: 8px 6px; margin-left: 20px; color de fondo: # f8b838; color: rgba (134, 79, 11, 0, 8); text-transform: mayúscula; font-weight: negrita; borde: 1px sólido # 99631d; -moz-border-radius: 5px; -webkit-border-radius: 5px; radio del borde: 5px; sombra de texto: 0 1px 2px rgba (255, 255, 255, 0.7), 0 -1px 0 rgba (64, 38, 5, 0.9); -moz-box-shadow: recuadro 0 0 3px rgba (255, 255, 255, 0.6), recuadro 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; -webkit-box-shadow: recuadro 0 0 3px rgba (255, 255, 255, 0.6), recuadro 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 #ccc; caja-sombra: recuadro 0 0 3px rgba (255, 255, 255, 0.6), recuadro 0 1px 2px rgba (255, 255, 255, 0.7), 0 5px 0 # b8882a, 0 6px 0 # 593a11, 0 13px 0 # ccc; -webkit-transition: fondo de 0.2 s de agilidad; } input [type = "submit"]. solid: hover, input [type = "submit"]. solid: focus {background: # ffd842; -moz-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; -webkit-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; caja-sombra: 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; arriba: 5px; borde: 1px sólido # 702d00; -moz-box-shadow: recuadro 0 0 3px rgba (255, 255, 255, 0.6), recuadro 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; -webkit-box-shadow: recuadro 0 0 3px rgba (255, 255, 255, 0.6), recuadro 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 #ccc; caja-sombra: recuadro 0 0 3px rgba (255, 255, 255, 0.6), recuadro 0 1px 2px rgba (255, 255, 255, 0.7), 0 3px 0 # b8882a, 0 4px 0 # 593a11, 0 8px 0 # ccc; } 

Espero que hayan disfrutado este tutorial. Siéntase libre de experimentar con estas características y no se olvide de compartir sus pensamientos.

Nota del editor: Esta publicación fue escrita por Bharani M para Hongkiat.com. Bharani es un diseñador / desarrollador de Nueva Delhi, India.

20 artilugios para ayudarte a combatir el estrés

20 artilugios para ayudarte a combatir el estrés

La vida moderna puede estar ocupada, exigente y siempre encendida. Si bien no somos capaces de controlar los factores externos inductores de estrés de nuestro entorno, podemos administrar mejor cómo reaccionamos ante ellos .Algunas veces es tan simple como aclarar tu cabeza y tomar respiraciones largas y lentas mientras te recoges.

(Consejos de tecnología y diseño)

6 maneras en que las redes sociales cambiaron la Navidad

6 maneras en que las redes sociales cambiaron la Navidad

¡Decora los pasillos con ramas de acebo ya que #Christmas está aquí! Obviamente, muchas cosas han cambiado en la forma en que celebramos las fiestas, con el continuo aumento de los teléfonos inteligentes, las redes sociales y los selfies: simplemente intente evitar que su cena de Navidad se muestre en Instagram. En

(Consejos de tecnología y diseño)