#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.

Chime: la respuesta de Amazon a Skype y WebEx

El sector de las videoconferencias se ha vuelto mucho más interesante ya que Amazon ha introducido su propia alternativa a Skype y WebEx en la tabla: Chime.Desarrollado como parte de la suite Amazon Web Services (AWS), Chime es un servicio de videoconferencia dirigido a empresas . Si bien el nivel básico (gratuito) del servicio incluye servicios estándar, como llamadas VoIP uno a uno, llamadas de video uno a uno y funcionalidad de sala de chat, los niveles pagos son donde Chime obtiene algunas funciones útiles.Par

(Consejos de tecnología y diseño)

20 mejores juegos de realidad aumentada para teléfonos inteligentes (de 2017)

La industria del juego está creciendo en diferentes áreas. En uno había aplicaciones para jugar juegos retro, mientras que, por otro lado, hay realidad aumentada que da vida al juego. Lo mejor de todo es que ahora puede jugar juegos geniales de realidad aumentada en su teléfono inteligente sin la necesidad de ningún equipo adicional.Debe

(Consejos de tecnología y diseño)