CSS está lleno de opciones para mejorar la apariencia de sus sitios web; las sombras de texto y cuadro son buenos ejemplos. Ofrecen resultados similares a las sombras que se encuentran en el software de edición de imágenes como Photoshop.
Pero, ¿cómo funcionan las sombras CSS? Vamos a sumergirnos.
Cómo usar CSS Box Shadow
Puede aplicar una sombra de cuadro CSS con una sola línea de CSS que contenga un rango de hasta seis valores. El orden de los valores es crucial para que funcione la sombra del cuadro CSS, y se ve así:
box-shadow: offset-x offset-y desenfoque recuadro de color extendido;Echemos un vistazo a cada uno de los valores en orden.
Posición de la sombra del cuadro CSS
Los valores offset-x y offset-y controlan la posición de la sombra del cuadro. El valor de offset-x representa la posición horizontal de la sombra, mientras que offset-y es el desplazamiento vertical.
caja-sombra: 10px 10px;Los valores positivos dan como resultado una sombra debajo y a la derecha del elemento.
También puede usar valores negativos para h-offset y v-offset:
sombra de cuadro: -10px -10px;Un desplazamiento h negativo mueve la sombra hacia la izquierda, mientras que un desplazamiento v negativo la mueve hacia arriba:
Desenfoque de sombra de cuadro CSS
Como puede ver, agregar el desplazamiento h y el desplazamiento v a su sombra crea una sombra sólida sin ningún desvanecimiento. El valor de desenfoque difumina la sombra de tu cuadro CSS y surte efecto si proporcionas un tercer valor:
sombra de cuadro: 10px 10px 20px;Cuanto mayor sea el número que agregue al valor de desenfoque, más borrosa será la sombra de su cuadro CSS. Este valor no puede ser negativo.
Extensión de sombra de cuadro CSS
El valor de dispersión le permite cambiar el tamaño de su sombra sin alterar su posición.
caja-sombra: 10px 10px 20px 30px;Un valor de dispersión positivo hará que la sombra del cuadro CSS sea más grande, mientras que un valor negativo la hará más pequeña.
Color de sombra de caja CSS
Las sombras del cuadro CSS tienen por defecto el color del texto del elemento, pero puedes anularlo agregando un color:
sombra de la caja: 10píxeles 10píxeles 20píxeles 10píxeles #0000ff;El color que utilice debe estar en un formato de color legal CSS, como un código hexadecimal, un código RGB o un color predefinido. Puede aprender sobre códigos hexadecimales y otras opciones de color legales CSS antes de comenzar con sus sombras.
Recuadro de sombra de cuadro CSS
Las sombras de los cuadros CSS caen por defecto fuera de su elemento asignado. Al agregar un recuadro a la propiedad box-shadow, puede mostrar la sombra en el interior del elemento.
sombra de la caja: 10píxeles 10píxeles 20píxeles 10píxeles recuadro #0000ff;Este es un valor de texto predefinido; simplemente agréguelo o elimínelo para establecer el valor.
Cómo usar la sombra de texto CSS
Las sombras de texto CSS son como sombras de cuadro, aunque tienen menos valores para modificar. La sintaxis de una sombra de texto CSS se ve así:
text-shadow: offset-x offset-y blur-radius color;Pero, ¿cómo funcionan estos valores?
Posición de la sombra del texto CSS
Los desplazamientos de sombra de texto CSS funcionan de manera muy similar a los mismos valores de sombra de cuadro:
sombra de texto: 10px 10px;Los valores positivos posicionarán la sombra debajo y a la derecha del texto.
Los valores negativos hacen lo contrario, colocando la sombra arriba y a la izquierda del texto.
sombra de texto: -10px -10px;Puede mezclar valores negativos y positivos para posicionar su sombra de texto CSS perfectamente.
Radio de desenfoque de sombra de texto CSS
El radio de desenfoque de la sombra del texto CSS le permite desenfocar la sombra detrás de su texto.
sombra de texto: 10px 10px 10px; El valor predeterminado para este valor es 0 (sin desenfoque).
Color de sombra de texto CSS
De forma predeterminada, las sombras del texto CSS coinciden con el color del texto. Puede cambiar el color de su texto agregándolo al final de la propiedad de sombra de texto CSS.
sombra de texto: 10píxeles 10píxeles 10píxeles #0000ff;Al igual que los colores de sombra de cuadro CSS, debe usar un color legal CSS para esto.
Ejemplos de diseño de cajas CSS y sombras de texto
Puede comenzar a experimentar con el uso de cuadros CSS y sombras de texto una vez que comprenda los conceptos básicos. Las ideas a continuación deberían inspirarlo a idear sus propias formas creativas de usar estas propiedades CSS.
Bordes de dos colores con dos sombras de cuadro CSS
Puede agregar más de una sombra de cuadro o sombra de texto a un elemento HTML. Siempre que tengan comas entre ellos, puede agregar nuevas sombras a una sola propiedad.
sombra de la caja: 30píxeles 30píxeles#0000ff, -30px-30px 0píxeles#00ff00;Este borde de dos colores es un buen ejemplo de esto. Dos sombras de cuadro CSS con posiciones opuestas y sin desenfoque/spread producen un borde creativo excelente.
Sombras de texto CSS duales para un efecto dramático
De manera similar a la idea anterior, puede agregar y colocar múltiples sombras de texto para obtener resultados interesantes.
sombra de texto: 35px 20px 4px gris oscuro, -35px -20px 4px gris oscuro;Este ejemplo muestra una línea de texto con una sombra arriba y una sombra debajo, las cuales tienen valores de color basados en texto.
Fondos multicolores con sombras de cuadro CSS insertadas
CSS es lo suficientemente potente como para crear activos únicos e interesantes sin ningún archivo externo. Usar una sombra de cuadro CSS insertada como fondo es un gran ejemplo de esto.
sombra de la caja: 20píxeles 10píxeles 10píxeles 40píxeles #000000 recuadro, -50px -30px 8px 60px recuadro gris, 30px 20px 6px 90px recuadro gris claro;Este cuadro tiene un fondo blanco, junto con tres sombras insertadas en diferentes colores. Las sombras se superponen entre sí para crear un fondo único.
Mejorar aún más este efecto es una simple cuestión de agregando un elegante degradado de fondo CSS a tu elemento.
Sombras de cuadro CSS y sombras de texto para diseño web creativo
Las sombras de cuadro y texto CSS son fáciles de usar una vez que sabes cómo trabajar con ellas. Ahora tiene las herramientas que necesita para comenzar a trabajar en sus propios diseños, pero debe seguir investigando CSS para mejorar sus habilidades.
