CSS3 le permite ser creativo y experimentar con su diseño para crear páginas web hermosas y únicas. Un área de diseño con la que CSS le permite trabajar es la tipografía.

Puedes usar el Familia tipográfica y sombra de texto propiedades para crear efectos simples pero notables. Es posible que ya conozca las aplicaciones básicas de la sombra de texto en CSS. Sin embargo, puede crear una amplia gama de estilos con estas propiedades.

En este artículo, aprenderá una forma eficaz de crear diferentes efectos de sombra de texto utilizando HTML y CSS.

Introducción a HTML y CSS

Puede copiar y pegar estos ejemplos de código para obtener el efecto de sombra de texto que prefiera. Empiece por crear un index.html archivo y un style.css expediente. Estos son los únicos archivos que necesitará para probar los ejemplos, pero deberá cambiar ambos archivos para cada ejemplo.

index.html

 sombra # 01 


href = " https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap"
rel = "hoja de estilo"
/>
 sombra # 02 


href = " https://fonts.googleapis.com/css2?family=Monoton&display=swap"
rel = "hoja de estilo"
/>
 sombra # 03 


href = " https://fonts.googleapis.com/css2?family=Bungee+Shade&display=swap"
rel = "hoja de estilo"
/>
 sombra # 04 


href = " https://fonts.googleapis.com/css2?family=Rampart+One&display=swap"
rel = "hoja de estilo"
/>
 sombra # 05 


href = " https://fonts.googleapis.com/css2?family=Faster+One&display=swap"
rel = "hoja de estilo"
/>
 sombra # 06 


href = " https://fonts.googleapis.com/css2?family=Eater&display=swap"
rel = "hoja de estilo"
/>
 sombra # 07 


href = " https://fonts.googleapis.com/css2?family=Codystar&display=swap"
rel = "hoja de estilo"
/>

style.css

cuerpo {
transformación de texto: mayúsculas;
altura de línea: 1;
alineación de texto: centro;
tamaño de fuente: 5rem;
pantalla: cuadrícula;
brecha: 4rem;
}

Ahora, veamos 11 ejemplos de sombras de texto para que los pruebes.

Relacionado: Cómo cambiar el texto de su sitio web con la propiedad de familia de fuentes CSS

Místico

Mystic es un estilo vidrioso que da un efecto de transición fresco sin usar el transformar propiedad. Es un efecto súper simple, pero estéticamente agradable, para un sitio web audaz y orientado al crecimiento.

Producción

HTML

 Sombra # 01 
Místico

CSS

cuerpo {
color de fondo: # 5e5555;
}
.mystic {
familia de fuentes: 'Bowlby One', cursiva;
color: rgba (255, 255, 255, 0.596);
sombra de texto: 20px 0px 10px rgb (0, 0, 0);
}

Monoton

Este es un efecto de texto divertido que utiliza la fuente "Monoton". Puede jugar con el texto y el color de la sombra para que coincida con los colores primarios de su sitio web.

Producción

HTML

 Sombra # 02 
Monoton

CSS

.monoton {
familia de fuentes: 'Monoton', cursiva;
tamaño de fuente: 15rem;
color: rgb (255, 0, 0);
opacidad: 0,5;
sombra de texto: 0px -78px rgb (255, 196, 0);
}

Bungee

Este es un estilo genial con la fuente "Bungee Shade". Combinado con un fondo oscuro, produce un efecto crudo con una sensación de sospecha.

Producción

HTML

 sombra # 03 
Bungee

CSS

cuerpo {
color de fondo: # 222;
}
.bungee {
familia de fuentes: 'Bungee Shade', cursiva;
color: rgb (160, 12, 12);
opacidad: 0,9;
sombra de texto: -18px 18px 0 rgb (66, 45, 45);
}

Radioactivo

Puede utilizar este efecto para señales de alerta o peligro. Utiliza la fuente "Rampart One".

Producción

HTML

 sombra # 04 
Radioactivo

CSS

cuerpo {
color de fondo: # 27292d;
}
.radioactive {
familia de fuentes: 'Rampart One', cursiva;
color: rgb (97, 214, 43);
opacidad: 0,6;
sombra de texto: -18px -18px 20px rgb (87, 255, 9);
}

pique

Este efecto de texto en ejecución utiliza la fuente "Faster One", la sombra de texto propiedad, y una ::despuéspseudo-elemento con el mismo contenido que el texto. Esto crea un efecto de "duplicación".

Producción

HTML

 sombra # 05 
pique

CSS

cuerpo {
color de fondo: # 27292d;
}
.pique {
familia de fuentes: 'Faster One', cursiva;
tamaño de fuente: 10rem;
color: rgba (255, 0, 242, 0.322);
sombra de texto: -20px -108px 0px rgba (255, 255, 255, 0.445);
espaciado entre letras: 1rem;
posición: relativa;
}
.sprint:: after {
contenido: 'sprint';
posición: absoluta;
superior: 215px;
derecha: 300px;
}

Espinoso

Este espantoso efecto de texto espinoso utiliza la fuente "Eater". Puede intentar cambiar el sombra de texto hacia la parte inferior derecha en su lugar.

Producción

HTML

 sombra # 06 
Espinoso

CSS

.prickly {
familia de fuentes: 'Eater', cursiva;
sombra de texto: -18px -18px 2px # 777;
}

Codystar

La sombra del texto puede actuar como un contorno borroso pero visible del texto. Este efecto brillante hace maravillas con la fuente "Codystar".

Producción

HTML

 sombra # 06 
Codystar

CSS

.codystar {
familia de fuentes: 'Codystar', cursiva;
font-weight: negrita;
color: rgb (55, 58, 255);
sombra de texto: 1px 1px 10px rgb (16, 72, 255), 1px 1px 10px rgb (0, 195, 255);
}

Reino

Puede lograr una tipografía autorizada con este efecto de sombra. Usa el ::antes de pseudo-elemento y el transformar propiedad para inclinar la sombra.

Producción

HTML

 sombra # 08 
Reino

CSS

cuerpo {
color de fondo: # 5e5555;
}
.Reino {
color blanco;
familia de fuentes: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
tamaño de fuente: 10rem;
altura de línea: 1;
alineación de texto: centro;
}
.kingdom - shadow:: before {
color: # 000;
contenido: attr (texto-datos);
margen superior: 0.7rem;
posición: absoluta;
transformar: perspectiva (205px) rotateX (38deg) escala (0.84);
índice z: -1;
}

Descifrador

Este brillante y positivo sombra de texto El efecto transmite una personalidad de sitio web consciente y motivada. Puede agregarlo a su sitio web para producir un aspecto ahumado simple.

Producción

HTML

 sombra # 09 


Come 

Dormir 

Código 

Repetir

CSS

cuerpo {
color de fondo: # 5e5555;
}
div {
familia de fuentes: Verdana, Ginebra, Tahoma, sans-serif;
relleno: 40px;
margen: 0px automático;
font-weight: negrita;
altura de línea: 5.8rem;
alineación de texto: izquierda;
color: rgb (94, 94, 94);
} 
.coder-life {
sombra de texto: 5px 5px # ffff00;
filtro: sombra (-10px 10px 20px # fff000);
}

Elegante

Si te encanta el minimalismo, entonces este efecto de sombra de texto encaja perfectamente. Dado que utiliza un tamaño de fuente grande, redujimos la espaciado de letras y aplicó el sombra de texto propiedad para crear este efecto.

Producción

HTML

 sombra # 10 


s
h
r
a
D
D
h
a

CSS

.elegant {
familia de fuentes: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
tamaño de fuente: 10rem;
espaciado entre letras: -1rem;
color blanco;
sombra de texto: -18px 8px 18px # b4bbbb;
}

Juguetón

El contorno delgado y audaz hace que este texto sea atractivo y animado. Puedes jugar con el sombra de texto propiedad sin radio de desenfoque en diferentes posiciones. Las sombras de texto se aplican a todos los caracteres, incluidas las entidades HTML como ♥. Puedes usar un Cuadro de referencia de entidad de carácter para explorar más.

Producción

HTML

 sombra # 11 
La codificación es ♥

CSS

.playful {
familia de fuentes: 'Baloo Tamma', cursiva;
color: #fff;
espaciado entre letras: 0.2rem;
sombra de texto: -2px -2px 0px # 888,
4px 4px 0px # 888,
7px 7px 0px # 888;
}

Siga experimentando con efectos de sombra avanzados

Las sombras de texto son una forma fácil y eficaz de mejorar su diseño web y hacer que su sitio web sea visualmente atractivo. También puede experimentar con diferentes efectos de sombra. Puede obtener más información sobre los efectos de sombra paralela para continuar su viaje con CSS.

Naincy Mourya (15 artículos publicados)

Naincy se especializa en la creación de sitios web altamente receptivos y una estrategia de contenido eficiente junto con copias web. Ella es una escritora de tecnología independiente que está muy atenta a las tecnologías de tendencia.

Más de Naincy Mourya