Efecto de sombra en CSS
- Página anterior Gradiente radial de CSS
- Página siguiente box-shadow de CSS
¡Cree efectos de sombra con CSS!
Efecto de sombra en CSS
Al usar CSS, puede agregar sombras a los textos y elementos.
En nuestro tutorial, aprenderá las siguientes propiedades:
text-shadowbox-shadow
Sombra de texto en CSS
CSS text-shadow La propiedad agrega una sombra al texto.
La forma más sencilla es especificar solo la sombra horizontal (2px) y la sombra vertical (2px):
Efecto de sombra de texto!
Ejemplo
h1 {
text-shadow: 2px 2px;
{}
A continuación, agregue un color a la sombra:
Efecto de sombra de texto!
Ejemplo
h1 {
text-shadow: 2px 2px red;
{}
Luego, agregue un efecto de desdibujado a la sombra:
Efecto de sombra de texto!
Ejemplo
h1 {
text-shadow: 2px 2px 5px red;
{}
El siguiente ejemplo muestra el texto en blanco con sombra negra:
Efecto de sombra de texto!
Ejemplo
h1 {
color: blanco;
text-shadow: 2px 2px 4px #000000;
{}
El siguiente ejemplo muestra el efecto de sombra de neón rojo:
Efecto de sombra de texto!
Ejemplo
h1 {
text-shadow: 0 0 3px #FF0000;
{}
Múltiples sombras
Si desea agregar múltiples sombras al texto, puede agregar una lista de sombras separadas por comas.
El siguiente ejemplo muestra el efecto de sombra de neón rojo y azul:
Efecto de sombra de texto!
Ejemplo
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
{}
El siguiente ejemplo muestra un texto blanco con sombras negras, azules y oscuras:
Efecto de sombra de texto!
Ejemplo
h1 {
color: blanco;
text-shadow: 1px 1px 2px negro, 0 0 25px azul, 0 0 5px oscuroazul;
{}
También puede usar la propiedad text-shadow para crear un borde puro alrededor del texto (sin sombra):
Borde alrededor del texto!
Ejemplo
h1 {
color: amarillo;
text-shadow: -1px 0 negro, 0 1px negro, 1px 0 negro, 0 -1px negro;
{}
- Página anterior Gradiente radial de CSS
- Página siguiente box-shadow de CSS
