| |
👉 Aprendiendo a agregar sombra a los textos, a través de la propiedad text-shadow. de esta manera, puedes aplicar nuevos estilos a tus sitios web. |
|---|
La sombra del texto te permite establecer una sombra del texto actual detrás de él, pero encima del fondo.
Es fácil de usar como un simple efecto de sombra elegante. Sin embargo, esto es quizás más útil cuando se pone texto en una imagen de fondo que puede tener demasiado contraste.
La sombra del texto se introdujo en CSS 2.0, pero no los implementa, por lo que se eliminó de CSS 2.1 y se coloco en CSS3.
Esta propiedad sirve para añadir efectos de sombra a un texto, lo cual permite generar diseños atractivos. La sintaxis a emplear es la siguiente:| selectorElemento {text-shadow: valorX valorY blurOpcional colorOpcional; } |
Los dos primeros valores especifican la longitud del desplazamiento de la sombra. El primer valor especifica la distancia horizontal y el segundo especifica la distancia vertical de la sombra. El tercer valor especifica el radio de desenfoque y el último valor describe el color de la sombra:
El uso de números positivos como los dos primeros valores termina colocando la sombra a la derecha del texto horizontalmente (primer valor) y colocando la sombra debajo del texto verticalmente (segundo valor).
El tercer valor, el radio de desenfoque, es un valor opcional que se puede especificar, pero no es necesario. Es la cantidad de píxeles que se estira el texto lo que causa un efecto borroso. Si no utiliza el tercer valor, se trata como si hubiera especificado un radio de desenfoque de cero.
Esta propiedad está disponible en todos los navegadores recientes, pero algunos más antiguos pueden no reconocerla.
| PROPIEDAD CSS text-shadow | |
| Función de la propiedad | Permite definir un efecto de sombra para el texto. |
| Valor por defecto | none |
| Aplicable a | Todos los elementos |
| Valores posibles para esta propiedad | none (no hay efecto de sombra) |
| valorX valorY blurOpcional colorOpcional (genera una sombra de acuerdo a los parámetros especificados; se permiten especificar 2 ó más sombras, separando su especificación mediante comas) | |
| inherit (se heredan las características del elemento padre). | |
| Ejemplos aprenderaprogramar.com |
#content1 { text-shadow: 2px 2px red;} .elementoJukeBox { text-shadow: -6px -6px 12px blue ;} |
Veamos algunos ejemplos:
See the Pen text shadow ejemplo 1 by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.
Al indicar la coordenada x como negativo, la sombra se enfocará hacia la izquierda en caso contrario de un valor positivo se enfocará a la derecha
See the Pen text shadow ejemplo 4 by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.
Si establecemos la coordenada y como negativa, la sombra se enfocara hacia arriba en caso contrario de un valor positivo se enfocara hacia abajo.See the Pen text shadow ejemplo 5 by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.
En este ejemplo veremos que no aplicamos blur a la sombra del texto, pero sí color:See the Pen text shadow ejemplo 2 by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.
See the Pen text shadow ejemplo 4 by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.
Como nota debemos saber que a nuestros textos podemos aplicarle más de una sombra para tener un efecto más atractivo en nuestros diseños por ejemplo veamos:See the Pen text shadow ejemplo 6 by Julio Giampiere Grados Caballero (@JulioGrados) on CodePen.
Estamos aplicando dos sombras, con diferentes colores, y darle un relieve distinto sobre la palabra, y no solo podemos aplicar dos sombras, si no las que necesitemos.
Crea un documento HTML con este contenido para probar esta propiedad y visualiza los resultados:
|
<html> <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8"> <style type="text/css"> *{font-family: arial;} h1 {padding:10px 20px;} </style> </head> <body> <h1 style="color: black; text-shadow: 2px 2px red;">aprenderaprogramar.com</h1> <h1 style="color: black; text-shadow: 2px 2px 4px red;">aprenderaprogramar.com</h1> <h1 style="color: black; text-shadow: 2px 2px 12px red;">aprenderaprogramar.com</h1> <h1 style="color: black; text-shadow: 2px 2px 12px red, -6px -6px blue ;">aprenderaprogramar.com</h1> <h1 style="color: black; text-shadow: 2px 2px 12px red, -6px -6px 12px blue ;">aprenderaprogramar.com</h1> </body> </html> |
En la imagen anterior observamos:
Fuentes:
https://devcode.la/tutoriales/text-shadow-css3/
https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=746:css-efecto-sombra-con-text-shadow-y-blur-text-overflow-clip-ellipsis-y-line-height-interlineado-cu01041d&catid=75&Itemid=203
Complementaria:
https://blog.mgpanel.org/post/manual-html-css-como-agregar-efectos-de-sombra-en-los-textos
Generadores online
https://html-css-js.com/c ♐
https://cssgenerator.org/ ♐
