Breaking

Post Top Ad

Your Ad Spot

viernes, 4 de octubre de 2019

12 efectos creativos creados usando CSS3 Box Shadows

En los últimos años, CSS3 ha realizado grandes mejoras y ha ganado una gran popularidad. La mayoría de los desarrolladores lo incluyen en sus sitios web para un mejor rendimiento. Además del desarrollo de un estilo único, s CSS3 ahora se está utilizando para desarrollar prototipos de interfaz interesantes. CSS3 box shadows es una característica única y potente del lenguaje que se puede usar para hacer diseños de alto impacto que se pueden usar en varios navegadores.

¿Qué es exactamente Box Shadow?

Las sombras de cuadro son una propiedad de CSS3 que se puede usar para la formación de efectos de sombra en componentes arbitrarios utilizados en el diseño de un sitio web. La sombra de la caja es capaz de tomar la forma del elemento con bordes bien definidos. La sombra básica del cuadro se compone de seis propiedades diferentes, es decir, recuadro, izquierda, arriba, desenfoque, tamaño y color. Los desarrolladores también pueden crear un efecto emergente o de capas usando el efecto de sombra del cuadro CSS3. Para hacerlo, use la propiedad de sombra de cuadro múltiple o la propiedad de sombra de texto en los elementos del sitio. La primera vez que se usa el efecto, aparecerá en la parte superior del elemento. Cuando se aplica el resto de los efectos, continuará apilándose gradualmente, dando al elemento una ventana emergente o algunos efectos bastante creativos que dependen de los diversos estilos dependiendo de cómo se apliquen. Al aplicar la sombra del cuadro CSS3 a un elemento, se detendrá cuando llegue al final del elemento. Esta característica es particularmente útil cuando se intenta crear un efecto de sombra sobre un fondo blanco o monocromático.

¿Como funciona?

Los comandos de sombra de cuadro generalmente deben escribirse en valores de longitud 2-4 con cada uno separado por una coma. Se pueden crear varios tipos de efectos junto con esquemas de color y efectos de inserción si se desea. Simplemente escriba los diversos valores que proporcionan los efectos horizontales, los efectos verticales y la distancia de desenfoque, respectivamente, y defina el color de la sombra que se cae escribiendo un valor de escritura después del valor de longitud 2-4.
El hecho de que estos efectos sean compatibles con la mayoría de los principales navegadores hace que sea aún más fácil trabajar con ellos. Echa un vistazo a todos los increíbles efectos usando CSS3 Box Shadows y dinos cuál es tu favorito.

1. Sombra

css3-box-shadows

2. CCS3 Batman de elemento único

css3-box-shadows

3. Sombra de texto CSS

css3-box-shadows

4. Rainbow Circle

css3-box-shadows

5. Botones de palanca blandos

css3-box-shadows

6. Icono de Apple Store

css3-box-shadows

7. Texto animado

css3-box-shadows

8. Nar Sang

css3-box-shadows

9. Contador de segundos

css3-box-shadows

10. Un elemento, múltiples Shadwos

css3-box-shadows

11. Botones Gradient Ghost

css3-box-shadows

12. Solo jugando con ShadowPainter

css3-box-shadows

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas