10 técnicas creativas utilizando CSS3 Box Shadow

Hemos visto una gran cantidad de avances en el desarrollo web CSS3 en los últimos años. Los sitios web populares en todo el Internet han comenzado a incorporar muchos estilos únicos, como esquinas redondeadas y consultas de medios sensibles a dispositivos móviles. Pero aún más importante, esto ha abierto la puerta para prototipos de interfaces creativas en cuestión de minutos..

En este artículo quiero compartir 10 fragmentos de código relacionados con brillantes diseños de sombra de caja CSS3. Explicaré cómo funciona el código y cómo puede implementar cada caja de sombra en su propio sitio web..

Todos estos estilos se atribuyen a la gran influencia del diseño de otros sitios web populares. Este es un gran ejemplo de cómo los desarrolladores web actuales están creando tendencias impactantes para el futuro del diseño web..

1. Barra de herramientas superior fija

El servicio de medios sociales rumanos Trilulilu utiliza una barra de herramientas superior flotante en todo su sitio web. Esto se puede crear rápidamente usando un posición: fijo Propiedad en cualquier elemento de la barra superior. Pero esta sombra de cuadro adicional lleva el efecto a un nivel completamente nuevo.

#banner posición: fija; altura: 60px; ancho: 100%; arriba: 0; izquierda: 0; borde superior: 5px sólido # a1cb2f; fondo: #fff; -moz-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0.16); -webkit-box-shadow: 0 2px 3px 0px rgba (0, 0, 0, 0.16); caja-sombra: 0 2px 3px 0px rgba (0, 0, 0, 0.16); índice z: 999999;  #banner h1 line-height: 60px;

Notará que la propiedad box-shadow está configurada con una combinación de valores bastante simple. La sombra caerá debajo del cuadro y se desenfocará 3px en cada lado.

Podemos usar el rgba () Método para aplicar una ligera opacidad a la sombra, para que el elemento no aparezca demasiado oscuro. Es una adición sutil que seguramente atraerá la atención de sus visitantes..

Manifestación

2. Sub-navegación desplegable

Aquí hay otro método de sombra de caja creativa aplicado en un submenú desplegable escalar. Se puede ver un efecto similar en Emprendedor mientras se desplaza sobre cada uno de los enlaces de navegación principales principales. Definitivamente esto es un poco más difícil de configurar pero vale la pena la paciencia.

#bar display: block; altura: 45px; fondo: # 22385a; relleno superior: 5px; margen inferior: 150px; posición: relativa;  #bar ul margen: 0px 15px; Familia tipográfica: Candara, Calibri, "Segoe UI", Segoe, Arial, sans-serif;  #bar ul li background: # 22385a; bloqueo de pantalla; tamaño de letra: 1.2em; posición: relativa; flotador izquierdo;  #bar ul li a display: block; color: # fffff7; altura de línea: 45px; font-weight: negrita; relleno: 0px 10px; texto-decoración: ninguno; índice z: 9999;  #bar ul li a: hover, #bar ul li a.selected color: # 365977; fondo: #fff; borde superior izquierdo del radio: 3px; borde superior-derecho-radio: 3px; -webkit-border-top-left-radius: 3px; -webkit-border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px;  #bar ul .subnav display: block; izquierda: 14px; arriba: 48px; índice z: -1; ancho: 500px; posición: absoluta; altura: 90px; borde: 1px sólido # edf0f3; borde superior: 0; relleno: 10px 0 10px 10px; desbordamiento: oculto; -moz-border-radius-bottomleft: 3px; -moz-border-radius-bottomleft: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; borde inferior-derecho-radio: 3px; borde inferior-derecho-radio: 3px; -moz-box-shadow: 0px 2px 7px rgba (0,0,0,0.25); -webkit-box-shadow: 0px 2px 7px rgba (0,0,0,0.25); box-shadow: 0px 2px 7px rgba (0,0,0,0.25); -ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Fuerza = 3, Dirección = 180, Color =" # 333333 ")"; filtro: progid: DXImageTransform.Microsoft.Shadow (Fuerza = 3, Dirección = 180, Color = "# 333333");

Los enlaces de navegación se pueden diseñar para cambiar de color cuando se seleccionan o al pasar el mouse. También estoy agregando algunos bordes redondeados en los enlaces y en el cuadro de menú desplegable. Esto le da una sensación más agradable en lugar de bordes duros alrededor. También estoy haciendo un buen uso de la -ms-filtro y filtrar Propiedades que son propiedad exclusiva de Internet Explorer..

Si configura un sistema de navegación completo, podrá cambiar el conjunto de pantalla a ninguno y ocultar el menú una vez que se cargue la página. Luego, utilizando algo de jQuery, puede dirigir el evento .hover () y mostrar la barra de subnav con contenido actualizado.

Manifestación

3. Botón de sombra brillante

Este es posiblemente uno de mis estilos favoritos para crear solo por lo dinámico que aparece en la página. Si no puede decirlo, este es el pequeño botón azul que se encuentra en la página de inicio de YouTube después de iniciar sesión por primera vez.

azules color: #fff; ancho: 190px; altura: 35px; cursor: puntero; Familia tipográfica: Arial, Tahoma, sans-serif; tamaño de letra: 1.0em; font-weight: negrita; -moz-border-radius: 2px; -webkit-border-radius: 2px; radio del borde: 2px; ancho del borde: 1px; color de borde: # 0053a6 # 0053a6 # 000; color de fondo: # 6891e7; imagen de fondo: -moz-lineal-gradiente (arriba, # 4495e7 0, # 0053a6 100%); imagen de fondo: -ms-lineal-gradiente (arriba, # 4495e7 0, # 0053a6 100%); imagen de fondo: -o-lineal-gradiente (arriba, # 4495e7 0, # 0053a6 100%); imagen de fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, stop de color (0, # 4495e7), stop de color (100%, # 0053a6)); imagen de fondo: -webkit-linear-gradient (arriba, # 4495e7 0, # 0053a6 100%); imagen de fondo: gradiente lineal (hacia abajo, # 4495e7 0, # 0053a6 100%); text-shadow: 1px 1px 0 rgba (0, 0, 0, .6); -moz-box-shadow: recuadro 0 1px 0 rgba (256, 256, 256, .35); -ms-box-shadow: recuadro 0 1px 0 rgba (256, 256, 256, .35); -webkit-box-shadow: recuadro 0 1px 0 rgba (256, 256, 256, .35); box-shadow: recuadro 0 1px 0 rgba (256, 256, 256, .35); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 4495e7, EndColorStr = # 0053a6);  .blues: hover border-color: # 002d59 # 002d59 # 000; -moz-box-shadow: inserción 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -ms-box-shadow: inserción 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); -webkit-box-shadow: recuadro 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, 0.25); box-shadow: recuadro 0 1px 0 rgba (256, 256, 256, 0.55), 1px 1px 3px rgba (0, 0, 0, .25); filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 3a8cdf, EndColorStr = # 0053a6); imagen de fondo: -moz-lineal-gradiente (arriba, # 3a8cdf 0, # 0053a6 100%); imagen de fondo: -ms-lineal-gradiente (arriba, # 3a8cdf 0, # 0053a6 100%); imagen de fondo: -o-lineal-gradiente (arriba, # 3a8cdf 0, # 0053a6 100%); imagen de fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, stop de color (0, # 3a8cdf), stop de color (100%, # 0053a6)); imagen de fondo: -webkit-linear-gradient (arriba, # 3a8cdf 0, # 0053a6 100%); imagen de fondo: gradiente lineal (hacia abajo, # 3a8cdf 0, # 0053a6 100%);  .blues: active border-color: # 000 # 002d59 # 002d59; -moz-box-shadow: inserción 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -ms-box-shadow: recuadro 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; -webkit-box-shadow: recuadro 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; box-shadow: recuadro 0 1px 3px rgba (0,0,0,0.2), 0 1px 0 #fff; filter: progid: DXImageTransform.Microsoft.Gradient (GradientType = 0, StartColorStr = # 005ab4, EndColorStr = # 175ea6); imagen de fondo: -moz-lineal-gradiente (arriba, # 005ab4 0, # 175ea6 100%); imagen de fondo: -ms-lineal-gradiente (arriba, # 005ab4 0, # 175ea6 100%); imagen de fondo: -o-lineal-gradiente (arriba, # 005ab4 0, # 175ea6 100%); imagen de fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, stop de color (0, # 005ab4), stop de color (100%, # 175ea6)); imagen de fondo: -webkit-linear-gradient (arriba, # 005ab4 0, # 175ea6 100%); imagen de fondo: gradiente lineal (al final, # 005ab4 0, # 175ea6 100%);

El código completo del botón es mucho para ver, pero estamos intentando para soportar tantos navegadores como sea posible. Hay sombras de texto y sombras de cuadro con soporte complementario para MS Internet Explorer 7+. También estamos configurando el imagen de fondo Propiedad con gradientes de CSS3 sobre un gran número de prefijos específicos del proveedor.

Pero si te gusta este estilo de diseño entonces el Hover y estados activos también llamarán tu atención.. Básicamente, estamos actualizando el borde para incluir algunas sombras en el interior a medida que se empuja hacia abajo, al mismo tiempo que se actualiza el degradado de fondo para mostrar un poco más oscuro.

Ya que no hay imágenes en el botón, puede actualizar los valores hexadecimales y transformarlos para combinarlos prácticamente en cualquier esquema de color..

Manifestación

4. Menú desplegable de notificaciones

No soy un gran usuario de Facebook pero he notado algunas técnicas de UI a partir de sus rediseños. Este menú desplegable se puede comparar con las notificaciones o la ventana emergente de solicitudes de amistad que se encuentran en la página de inicio.

.flyout ancho: 310px; margen superior: 10px; tamaño de fuente: 11px; posición: relativa; Familia tipográfica: 'Lucida Grande', Tahoma, Verdana, Arial, sans-serif; color de fondo: blanco; relleno: 9px 11px; fondo: rgba (255, 255, 255, 0.9); borde: 1px sólido # c5c5c5; -webkit-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); -moz-box-shadow: 0 3px 8px rgba (0, 0, 0, .25); caja-sombra: 0 3px 8px rgba (0, 0, 0, .25); -webkit-border-radius: 3px; -moz-border-radius: 3px; radio del borde: 3px;  .flyout #tip background-image: url ('images / tip.png'); repetición de fondo: no repetición; tamaño de fondo: auto; altura: 11px; posición: absoluta; arriba: -11px; izquierda: 25px; ancho: 20px;  .flyout h2 text-transform: mayúsculas; color: # 666; tamaño de letra: 1.2em; parte inferior de relleno: 5px; margen inferior: 12px; borde inferior: 1px sólido #dcdbda;  .flyout p padding-bottom: 25px; tamaño de letra: 1.1em; color: # 222;

No hay mucho código nuevo para mostrar aquí. Estoy usando un pequeño .propina clase con un elemento de intervalo interno para agregar el triángulo de información sobre herramientas. Es posible crear triángulos CSS3 puros, pero este método no es fácil, como puedes imaginar. Si prefieres este método puede valer la pena hackear algo juntos. Pero las propiedades de rotación CSS3 no son compatibles en todas partes; Mientras tanto, las imágenes no requieren ningún método de reserva..

Manifestación

5. Apple Page Wrapper

Hay tantas sombras de cuadros de CSS3 impresionantes que puedes encontrar en el sitio web oficial de Apple. Este ejemplo a continuación es un contenedor de caja pequeña con algunos tramos de columna. Cuando revise el diseño de Apple, observará que muchas de sus páginas están compuestas por numerosas cajas de envoltorios..

.applewrap ancho: 100%; bloqueo de pantalla; altura: 150px; fondo: blanco; borde: 1px sólido; color de borde: # e5e5e5 #dbdbdb # d2d2d2; -webkit-border-radius: 4px; -moz-border-radius: 4px; radio del borde: 4px; -webkit-box-shadow: rgba (0, 0, 0, 0.3) 0 1px 3px; -moz-box-shadow: rgba (0,0,0,0.3) 0 1px 3px; cuadro de sombra: rgba (0, 0, 0, 0.3) 0 1px 3px;  .applewrap .col float: left; tamaño de caja: caja de borde; ancho: 250px; altura: 150px; relleno: 16px 7px 6px 22px; fuente: 12px / 18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; color: # 343434; borde derecho: 1px sólido #dadada;

Podría juntar una página similar dividida por cuadros de contenido de varios anchos y altos. Aunque he puesto algunas columnas en esta demostración, no es una técnica de formato necesaria de ninguna manera. La sombra de la caja encajará mejor en un fondo blanco / gris. Pero creo que exhibir sobre cualquier color claro se vería bastante bien.

Manifestación

6. Apple Content Box

Este otro estilo de cuadro de contenido en el sitio web de Apple se usa principalmente para diseños de columnas. Estos se encuentran principalmente en la parte inferior de la página mostrando ofertas y otra información relacionada. Es un estilo de diseño totalmente diferente con la sombra de la caja que se muestra en el interior de arriba a abajo.

.applebox ancho: auto; altura: 85px; tamaño de caja: caja de borde; fondo: # f5f5f5; relleno: 20px 20px 10px; margen: 10px 0 20px; borde: 1px sólido #ccc; radio del borde: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-radio-borde: 4px; -webkit-box-shadow: recuadro 0px 1px 1px rgba (0, 0, 0, .3); -moz-box-shadow: inserción 0px 1px 1px rgba (0, 0, 0, .3); cuadro-sombra: recuadro 0px 1px 1px rgba (0, 0, 0, .3);  .applebox .col ancho: 140px; flotador izquierdo; margen: 0 0 0 30px;

No creo que este código sea demasiado difícil de seguir y copiar en otro contenedor div. La única sombra de caja que estamos aplicando está usando recuadro Con los códigos de color rgba alfa-transparente. Así que, aunque tenemos la sombra paralela configurada en negro puro, solo estamos mostrando una opacidad del 30%..

Manifestación

7. Enlaces destacados

Este es probablemente mi estilo favorito de sombra de caja del sitio web actual de Apple. Debería encontrar un estilo de demostración en vivo de esta técnica en la página de iCloud con una serie de cuadros de enlaces flotantes..

.applefeature altura: 150px; margen: 8px; alineación vertical: superior; pantalla: bloque en línea;  .applefeature a display: block; ancho: 168px; altura: 140px; borde: 1px sólido #ccc; color: # 333; texto-decoración: ninguno; font-weight: negrita; línea de altura: 1.3em; fondo: # f7f7f7; -webkit-box-shadow: recuadro 0 1px 2px rgba (0, 0, 0, .3); -moz-box-shadow: inserción 0 1px 2px rgba (0, 0, 0, .3); cuadro de sombra: recuadro 0 1px 2px rgba (0, 0, 0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; radio del borde: 4px;  .applefeature a: hover background: #fafafa; fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, desde (#fff), hasta (# f7f7f7)); fondo: -moz-linear-gradient (100% 100% 90deg, # f7f7f7, #fff); -webkit-box-shadow: recuadro 0 1px 2px rgba (0,0,0, .3); -moz-box-shadow: recuadro 0 1px 2px rgba (0,0,0, .3); box-shadow: recuadro 0 1px 2px rgba (0,0,0, .3); -webkit-border-radius: 4px; -moz-border-radius: 4px; radio del borde: 4px;  .applefeature a img display: block; margen: 26px auto 4px;  .applefeature a h4 display: block; ancho: 160px; tamaño de letra: 1.3em; Familia tipográfica: Arial, Tahoma, sans-serif; color: # 646464; text-align: center;

Estos enlaces destacados se configuran en un ancho fijo e incluyen un icono distinto y texto en pantalla. El ejemplo de Apple utiliza una sombra de cuadro similar a la que vimos en el cuadro de contenido anterior. sin embargo La caja completa ahora puede ser activada como un enlace. que incluye tanto el :flotar y :activo estados Hay mucha flexibilidad con este cuadro de enlace y deberías intentar jugar con el código fuente.

Es posible acortar la altura / anchura y crear una lista de enlaces mucho más pequeña. Estos podrían ser un conjunto de capítulos o páginas en un artículo, o podría hacer un submenú limitado con iconos de enlace. Sinceramente, es un gran conjunto de nuevas técnicas CSS3 que demuestran cuánta potencia tienes como diseñador web..

Manifestación

8. Imágenes enmarcadas

He agregado un fondo gris a este ejemplo para que pueda ver los estilos de sombra de cuadro más claramente. Este cuadro es similar a las tomas de vista previa presentadas en wordpress.com, excepto que he agregado un poco más de profundidad al código fuente.

.wpframe background: #fff; radio del borde: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; relleno: 8px; -webkit-box-shadow: 1px 2px 1px # d1d1d1; -moz-box-shadow: 1px 2px 1px # d1d1d1; box-shadow: 1px 2px 1px # d1d1d1;

Dado que las imágenes tienen un pequeño relleno en ambos lados, este marco aparece como un borde blanco grande. Siempre puede actualizar el color de fondo, o incluso agregar un borde externo pequeño para separar la imagen del fondo. Pero este conjunto de estilos bastante simplista se puede maniobrar en varias técnicas de sombra de caja. Juegue con el código y vea cómo puede mejorar los diseños de imagen en su propio sitio web.

Manifestación

9. Campos de entrada que brillan intensamente

Obtuve esta idea después de visitar la página de inicio de sesión de Pinterest un par de veces. Sus estilos animados realmente muestran algunos ejemplos elocuentes de múltiples sombras de cuadros en línea, tanto exteriores como interiores.

.formwrap display: block; margen inferior: 15px;  .formwrap label display: inline-block; ancho: 80px; tamaño de fuente: 11px; font-weight: negrita; color: # 444; Familia tipográfica: Arial, Tahoma, sans-serif;  .formwrap .shadowfield posición: relativo; ancho: 250px; tamaño de fuente: 17px; Familia tipográfica: "Helvetica Neue", Arial, sans-serif; fuente-peso: normal; fondo: # f7f8f8; color: # 7c7c7c; línea de altura: 1.4; relleno: 6px 12px; esquema: ninguno; transición: todos los 0.2s segundos de facilidad de entrada; -webkit-transición: todos los 0.2s 0s de facilidad de entrada; -moz-transición: todos los 0.2s 0s de facilidad de entrada; borde: 1px sólido # ad9c9c; radio del borde: 6px 6px 6px 6px; cuadro de sombra: 0 1px rgba (34, 25, 25, 0.2), recuadro, 0 1px #fff;  .formwrap .shadowfield: focus border-color: # 930; fondo: #fff; color: # 5d5d5d; caja-sombra: recuadro 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -moz-box-shadow: inserción 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5); -webkit-box-shadow: recuadro 0 1px rgba (34, 25, 25, 0.2), 0 1px rgba (255, 255, 255, 0.6), 0 0 7px rgba (235, 82, 82, 0.5);

Aunque los estilos iniciales son muy atractivos me atraen los efectos de transición a medida que se enfoca en cada campo de entrada. Puede tabular entre ellos y ver la diferencia inmediata en tantas propiedades. La sombra de la caja brillante externa se aplica junto con una sombra de inserción actualizada. También el el color del texto se vuelve más claro a medida que se enfoca en una entrada particular, luego se desvanece a medida que se desenfoca.

Incluso copiar sobre uno de estos efectos mejoraría enormemente la experiencia de usuario de sus campos de formulario. Asegúrese de no ir demasiado lejos hasta el punto en que sus formularios sean apenas utilizables. Sin embargo, la mayoría de los visitantes disfrutarán de los agradables efectos estéticos que también fomentan la interacción y una mayor participación en su sitio web..

Manifestación

10. Elastic Shadow Buttons

Estos botones de sombra únicos están diseñados con una transición lenta durante los estados activo y activo. Puedes encontrar ejemplos similares en la página de inicio de Mozilla con sus grandes “Descargar Firefox” botón. Algunos de los sombra de la caja Las propiedades en realidad combinan tres sombras diferentes juntas en un solo comando.

.blu-btn display: inline-block; -moz-border-radius: .25em; radio del borde: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), recuadro 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), recuadro 0 -2px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), recuadro 0 -2px 0 0 rgba (0,0,0,0.2); color de fondo: # 276195; imagen de fondo: -moz-lineal-gradiente (# 3c88cc, # 276195); imagen de fondo: -ms-linear-gradient (# 3c88cc, # 276195); imagen de fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, stop de color (0%, # 3c88cc), stop de color (100%, # 276195)); imagen de fondo: -webkit-linear-gradient (# 3c88cc, # 276195); imagen de fondo: -o-lineal-gradiente (# 3c88cc, # 276195); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr = '# 276195', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 3c88cc', endColorstr =" # 276195 ", GradientType = 0)"; imagen de fondo: gradiente lineal (# 3c88cc, # 276195); borde: 0; cursor: puntero; color: #fff; texto-decoración: ninguno; text-align: center; tamaño de fuente: 16px; relleno: 0px 20px; altura: 40px; línea de altura: 40px; ancho mínimo: 100px; text-shadow: 0 1px 0 rgba (0,0,0,0.35); Familia tipográfica: Arial, Tahoma, sans-serif; -webkit-transición: todos los lineales .2s; -moz-transición: todos los lineales .2s; -o-transición: todos los lineales .2s; -ms-transición: todos los lineales .2s; transición: todo lineal .2s .blu-btn: flotar, .blu-btn: foco -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), recuadro 0 -2px 0 0 rgba (0,0,0,0.3), inserción 0 12px 20px 2px # 3089d8; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), recuadro 0 -2px 0 0 rgba (0,0,0,0.3), recuadro 0 12px 20px 2px # 3089d8; box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inserción 0 -2px 0 0 rgba (0,0,0,0.3), inserción 0 12px 20px 2px # 3089d8;  .blu-btn: activo -webkit-box-shadow: inserción 0 2px 0 0 rgba (0,0,0,0.2), inserción 0 12px 20px 6px rgba (0,0,0,0.2), inserción 0 0 2px 2px rgba (0,0,0,0.3); -moz-box-shadow: inserción 0 2px 0 0 rgba (0,0,0,0.2), inserción 0 12px 20px 6px rgba (0,0,0,0.2), inserción 0 0 2px 2px rgba (0,0, 0,0.3); box-shadow: inserción 0 2px 0 0 rgba (0,0,0,0.2), inserción 0 12px 20px 6px rgba (0,0,0,0.2), inserción 0 0 2px 2px rgba (0,0,0,0.3) );  .grn-btn display: inline-block; -moz-border-radius: .25em; radio del borde: .25em; -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), recuadro 0 -2px 0 0 rgba (0,0,0,0.2); -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), recuadro 0 -2px 0 0 rgba (0,0,0,0.2); box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), recuadro 0 -2px 0 0 rgba (0,0,0,0.2); color de fondo: # 659324; imagen de fondo: -moz-lineal-gradiente (# 81bc2e, # 659324); imagen de fondo: -ms-linear-gradient (# 81bc2e, # 659324); imagen de fondo: -webkit-gradient (lineal, superior izquierda, inferior izquierda, stop de color (0%, # 81bc2e), stop de color (100%, # 659324)); imagen de fondo: -webkit-linear-gradient (# 81bc2e, # 659324); imagen de fondo: -o-lineal-gradiente (# 81bc2e, # 659324); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr = '# 659324', GradientType = 0); -ms-filter: "progid: DXImageTransform.Microsoft.gradient (startColorstr = '# 81bc2e', endColorstr =" # 659324 ", GradientType = 0)"; imagen de fondo: gradiente lineal (# 81bc2e, # 659324); borde: 0; cursor: puntero; color: #fff; texto-decoración: ninguno; text-align: center; tamaño de fuente: 16px; relleno: 0px 20px; altura: 40px; línea de altura: 40px; ancho mínimo: 100px; text-shadow: 0 1px 0 rgba (0,0,0,0.35); Familia tipográfica: Arial, Tahoma, sans-serif; -webkit-transición: todos los lineales .2s; -moz-transición: todos los lineales .2s; -o-transición: todos los lineales .2s; -ms-transición: todos los lineales .2s; transición: todo lineal .2s;  .grn-btn: hover, .grn-btn: focus -webkit-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), recuadro 0 -2px 0 0 rgba (0,0,0 , 0.3), recuadro 0 12px 20px 2px # 85ca26; -moz-box-shadow: 0 2px 0 0 rgba (0,0,0,0.1), inserción 0 -2px 0 0 rgba (0,0,0,0.3), inserción 0 12px 20px 2px # 85ca26; caja-sombra: 0 2px 0 0 rgba (0,0,0,0.1), recuadro 0 -2px 0 0 rgba (0,0,0,0.3), recuadro 0 12px 20px 2px # 85ca26;  .grn-btn: activo -webkit-box-shadow: inserción 0 2px 0 0 rgba (0,0,0,0.2), inserción 0 12px 20px 6px rgba (0,0,0,0.2), inserción 0 0 2px 2px rgba (0,0,0,0.3); -moz-box-shadow: inserción 0 2px 0 0 rgba (0,0,0,0.2), inserción 0 12px 20px 6px rgba (0,0,0,0.2), inserción 0 0 2px 2px rgba (0,0, 0,0.3); box-shadow: inserción 0 2px 0 0 rgba (0,0,0,0.2), inserción 0 12px 20px 6px rgba (0,0,0,0.2), inserción 0 0 2px 2px rgba (0,0,0,0.3) );

Estoy usando transiciones completas durante 200 milisegundos en estado activo y botón activo. Lo maravilloso de estos estilos es que puede aplicarlos a casi cualquier elemento seleccionable. Botones, enlaces de anclaje, elementos de formulario o cualquier otra cosa que consideres apropiada, aunque estos estilos deben usarse de forma dispersa para no sobrecargar tu diseño..

Botones como estos a menudo se guardan mejor de la misma manera que Mozilla los usa. Adjunte estos estilos a su blog donde tenga botones para descargas gratuitas o algo similar. A los usuarios les encanta interactuar con interfaces únicas. y esto a menudo se traduce en un porcentaje mucho mayor para su calificación de clics.

Manifestación

Pensamientos finales

Espero que puedas sacar algunas grandes lecciones de esta colección de técnicas de sombra de caja. Hay muchas áreas diferentes en las que podría enfocarse incluyendo formularios, cuadros modales, botones, barras de herramientas e incluso diseños completos de sitios web.

Siéntase libre de implementar cualquiera de estos efectos de sombra en partes de su propio sitio web. Existen muchas otras técnicas, pero esta colección es perfecta tanto para principiantes como para desarrolladores avanzados. Además, si tiene alguna sugerencia o pregunta sobre el artículo, puede compartirlo con nosotros en el área de discusión de comentarios a continuación..