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.
Desplaza y anima tu página fácilmente con Force.js
La animación web es más fácil que nunca, y las animaciones de CSS3 se convierten en la norma. Sin embargo, JavaScript sigue siendo increíblemente valioso y es uno de los pocos idiomas confiables para las animaciones técnicas.La biblioteca Force.js es una secuencia de comandos gratuita de código abierto creada en torno a animaciones de página dinámicas .Puede c
(Consejos de tecnología y diseño)
es.hideout-lastation.com