Efectos de texto en CSS

Color del Texto

La propiedad color en CSS te permite establecer el color de los elementos de texto. Puedes especificar el color del texto usando formatos como nombres de colores, valores hexadecimales, RGB y HSL.

Para establecer el color del texto, usa la propiedad color seguida del valor de color deseado.

p {
  color: blue;
}

Todos los elementos <p> tendrán un color de texto azul.

CSS proporciona muchos nombres de colores predefinidos que puedes usar, como red, green, blue y yellow. Para un control más preciso sobre los colores, puedes usar valores hexadecimales, RGB o HSL.

Los valores hexadecimales se representan con un # seguido de seis caracteres. Cada par de caracteres muestra la intensidad de los componentes rojo, verde y azul.

• #ff0000 representa rojo puro
• #00ff00 representa verde puro
• #0000ff representa azul puro

Los valores RGB se especifican usando la función rgb() con tres parámetros que representan los componentes rojo, verde y azul (cada uno va de 0 a 255).

• rgb(255, 0, 0) representa rojo puro
• rgb(0, 255, 0) representa verde puro
• rgb(0, 0, 255) representa azul puro

Los valores HSL se especifican usando la función hsl() que significa matiz (ángulo de 0 a 360 grados), saturación (porcentaje) y luminosidad (porcentaje).

• hsl(120, 100%, 50%) es para verde
• hsl(240, 100%, 50%) es para azul

Los colores de texto pueden ser heredados por los elementos hijos de sus elementos padres a menos que se sobrescriban explícitamente. La naturaleza en cascada de CSS también se aplica a los colores de texto donde las reglas más específicas tienen prioridad.

<div class="parent">
   <p>Este texto hereda el color de su padre.</p>
   <p class="child">Este texto tiene su propio color.</p>
</div>

.parent {
    color: green;
}

.child {
    color: blue;
}

El primer elemento <p> tendrá un texto verde heredado del <div> padre. El segundo elemento <p> con clase "child" tendrá un texto azul debido a la regla específica aplicada.

Alineación de Texto

La propiedad text-align en CSS te permite controlar la alineación horizontal del texto dentro de un elemento. Puedes alinear el texto a la izquierda, derecha, centro o justificarlo.

Para establecer la alineación del texto, usa la propiedad text-align seguida de uno de estos valores: left, right, center, o justify.

p {
  text-align: center;
}

• text-align: left; alinea el texto al lado izquierdo del elemento. Este es el valor predeterminado.
• text-align: right; alinea el texto al lado derecho del elemento.
• text-align: center; centra el texto dentro del elemento.
• text-align: justify; estira el texto para llenar todo el ancho del elemento, creando un espaciado uniforme entre las palabras.

También puedes establecer la dirección usando propiedades como direction y unicode-bidi. Estas son útiles para idiomas con diferentes direcciones de escritura como el árabe o el hebreo.

La propiedad direction establece la dirección mientras que la propiedad unicode-bidi maneja textos bidireccionales.

p {
  direction: rtl;
  unicode-bidi: bidi-override;
}

Combinando estas propiedades puedes controlar tanto la alineación horizontal como la dirección de tu contenido.

Decoración de Texto

La propiedad text-decoration en CSS te permite añadir líneas a tu texto, como subrayados, líneas superiores o tachados. Puedes controlar el estilo, color y grosor de estas decoraciones.

Para añadir una decoración a tu texto, usa la propiedad text-decoration seguida de uno o más de estos valores: underline, overline, o line-through.

p {
  text-decoration: underline;
}

h1 {
  text-decoration: overline;
}

a {
  text-decoration: line-through;
}

También puedes combinar múltiples decoraciones separando los valores con un espacio.

p {
  text-decoration: underline overline;
}

Para controlar aún más la apariencia de las decoraciones, puedes usar estas propiedades:

• text-decoration-line: Especifica el tipo de decoración (subrayado, línea superior, tachado).
• text-decoration-color: Establece el color de la decoración.
• text-decoration-style: Determina el estilo de la decoración (sólido, doble, punteado, discontinuo).

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

También puedes establecer el grosor usando text-decoration-thickness. Acepta valores de longitud o palabras clave como auto, from-font, o thick.

p {
  text-decoration-line: overline;
  text-decoration-thickness: 5px;
}

Transformación de Texto

La propiedad text-transform en CSS te permite cambiar la capitalización del texto. Puedes transformar el texto a mayúsculas, minúsculas o capitalizar la primera letra de cada palabra.

Para transformar el texto, usa la propiedad text-transform seguida de uno de estos valores: uppercase, lowercase, o capitalize.

h1 {
  text-transform: uppercase;
}

p {
  text-transform: lowercase;
}

.title {
  text-transform: capitalize;
}

<p>Este es un párrafo normal.</p>
<p class="uppercase">Este párrafo estará en mayúsculas.</p>
<p class="capitalize">este párrafo estará capitalizado.</p>

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

Las transformaciones de texto ayudan a mantener la consistencia en el estilo de capitalización para ciertos elementos como encabezados o botones sin tener que escribirlos manualmente en un caso específico.

La propiedad text-transform solo cambia cómo se ve el texto y no altera su contenido real. Los lectores de pantalla y otras tecnologías de asistencia aún lo leen en su caso original.

Espaciado de texto

CSS ofrece propiedades para controlar el espaciado y la posición del texto, incluyendo el espaciado entre letras, el espaciado entre palabras, la altura de línea y la alineación vertical.

Para ajustar el espacio entre caracteres, use la propiedad letter-spacing. Acepta valores de longitud, ya sean positivos o negativos.

p {
  letter-spacing: 2px;
}

.tight {
  letter-spacing: -0.5px;
}

Los valores positivos aumentan el espacio entre caracteres; los valores negativos lo disminuyen. Esto ayuda a mejorar la legibilidad o crear estilos tipográficos específicos.

Para controlar el espacio en blanco entre palabras, use la propiedad word-spacing. También acepta valores de longitud.

p {
  word-spacing: 10px;
}

.narrow {
  word-spacing: -2px;
}

Aumentar el espaciado entre palabras puede mejorar la legibilidad de textos más largos. Disminuirlo puede crear un aspecto más compacto.

La propiedad line-height establece la altura de cada línea de texto. Acepta valores de longitud, porcentajes o valores sin unidades.

p {
  line-height: 1.5;
}

.tall {
  line-height: 200%;
}

Ajustar la altura de línea puede mejorar la legibilidad al proporcionar suficiente espacio vertical entre líneas y afecta el ritmo visual general.

La propiedad vertical-align controla la alineación vertical de elementos en línea en relación entre sí o con la línea base de su contenedor. Los valores comunes incluyen baseline, top, middle, y bottom.

img {
  vertical-align: middle;
}

.subscript {
  vertical-align: sub;
}

La alineación vertical es útil para alinear elementos en línea como imágenes o iconos con el texto circundante.

Sombra de Texto

La propiedad text-shadow en CSS te permite crear efectos de sombra para elementos de texto. Puedes especificar el desplazamiento de la sombra, el radio de desenfoque y el color para lograr varios efectos visuales.

Para crear una sombra de texto, usa la propiedad text-shadow seguida de valores que representan el desplazamiento horizontal, el desplazamiento vertical, el radio de desenfoque y el color.

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

La propiedad text-shadow acepta múltiples valores separados por comas:

• Desplazamiento horizontal: Especifica la distancia horizontal de la sombra desde el texto. Los valores positivos mueven la sombra hacia la derecha; los valores negativos la mueven hacia la izquierda.
• Desplazamiento vertical: Especifica la distancia vertical de la sombra desde el texto. Los valores positivos la mueven hacia abajo; los valores negativos la mueven hacia arriba.
• Radio de desenfoque (opcional): Determina cuánto desenfoque se aplica a la sombra. Un valor mayor crea un efecto más suave y difuso.
• Color: Establece el color de la sombra usando nombres o valores hexadecimales/RGB/HSL.

p {
  text-shadow: -2px -2px 0 red, 2px 2px 0 blue;
}

Las sombras de texto pueden mejorar la legibilidad cuando se usan contra fondos con bajo contraste, pero úsalas con moderación ya que las sombras excesivas o de bajo contraste pueden dificultar la lectura para algunos usuarios.

h2 {
    text-shadow: 
        -3px -3px #ff0000,
         -6px -6px #00ff00,
         -9px -9 px #0000ff;
}

Desbordamiento de texto

CSS proporciona propiedades para manejar situaciones en las que el texto desborda su contenedor. Puedes controlar cómo se muestra el texto desbordado usando las propiedades overflow, white-space y text-overflow.

La propiedad overflow determina qué sucede cuando el contenido excede las dimensiones de su contenedor. Acepta valores como visible (predeterminado), hidden, scroll o auto.

.container {
  width: 200px;
  height: 100px;
  overflow: hidden;
}

El texto dentro del elemento .container se recortará y ocultará si se desborda.

La propiedad white-space controla cómo se manejan los espacios en blanco y los saltos de línea dentro de un elemento. El valor nowrap evita que el texto se ajuste, causando que se desborde si excede el ancho del contenedor.

p {
  white-space: nowrap;
}

El texto dentro de los elementos <p> no se ajustará a la siguiente línea, potencialmente desbordando el contenedor horizontalmente.

Para truncar el texto desbordado con puntos suspensivos (...), puedes usar la propiedad text-overflow en combinación con overflow y white-space.

.truncate {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

El texto dentro de los elementos con la clase .truncate se truncará con puntos suspensivos si se desborda del ancho de 200 píxeles.

Al configurar estas propiedades juntas (overflow: hidden, white-space: nowrap y text-overflow: ellipsis) creas una sola línea de texto que se trunca cuando se desborda.

Para crear contenedores de texto adaptables que se ajusten a diferentes tamaños de pantalla, puedes usar unidades relativas como porcentajes o unidades vh/vw para las dimensiones.

.responsive-container {
  width: 100%;
  max-height: 50vh;
  overflow: auto;
}

El elemento .responsive-container tendrá un ancho igual al de su padre y una altura máxima de la mitad de la altura de la ventana. Si el texto excede esta altura máxima, aparecerá una barra de desplazamiento.

Ajuste de Texto

CSS proporciona propiedades para controlar cómo se ajusta el texto dentro de un elemento, incluyendo white-space, word-wrap, word-break, overflow-wrap y hyphens.

La propiedad white-space determina cómo se manejan los espacios en blanco y los saltos de línea dentro de un elemento. Acepta valores como normal, nowrap, pre, pre-wrap y pre-line.

p {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

Los elementos <p> no ajustarán el texto a la siguiente línea, causando desbordamiento si el texto es más largo que el ancho del contenedor. Los elementos con la clase .pre preservarán los espacios en blanco y saltos de línea tal como aparecen en el código fuente.

Para controlar si las palabras largas deben romperse o desbordarse, use la propiedad word-wrap. Acepta valores como normal (predeterminado) o break-word.

p {
  word-wrap: break-word;
}

Las palabras largas dentro de los elementos <p> se romperán y ajustarán a la siguiente línea si desbordan el ancho del contenedor.

La propiedad word-break especifica cómo deben romperse las palabras al llegar al final de una línea. Acepta valores como 'normal', 'break-all' y 'keep-all'.

.url {
  word-break: break-all;
}

.keep {
  word-break: keep-all;
}

Los elementos con la clase .url romperán palabras y URLs en cualquier carácter para evitar desbordamiento. Los elementos con la clase .keep evitarán romper palabras entre letras, manteniendo las palabras completas juntas.

La propiedad 'overflow-wrap' (anteriormente conocida como 'word-wrap') determina si una palabra larga debe romperse o desbordarse cuando llega al borde del contenedor. Acepta valores como 'normal' (predeterminado) o 'anywhere'.

p { 
    overflow-wrap: anywhere; 
} 

Las palabras largas dentro de los elementos <p> pueden romperse en cualquier punto si es necesario para evitar desbordamiento.

Para aplicar guiones a texto ajustado, use la propiedad hyphens. Acepta valores como 'none' (predeterminado), 'manual' y 'auto'.

 p { 
    hyphens: auto;
} 

El texto ajustado dentro de los elementos <p> tendrá guiones insertados automáticamente en puntos apropiados si el idioma y el navegador lo admiten.

El uso cuidadoso de estas propiedades ayuda a mantener una experiencia de lectura óptima, considerando el idioma del contenido y los navegadores objetivo.

Efectos y Técnicas de Texto

CSS ofrece propiedades y técnicas que permiten crear efectos visuales en elementos de texto. Aquí se presentan algunas de estas técnicas, incluyendo la creación de gradientes y patrones en texto, la aplicación de contornos de texto, y el uso de máscaras y recortes de texto.

Para crear gradientes o aplicar patrones al texto, use la propiedad background-clip junto con la propiedad text-fill-color. La propiedad background-clip define hasta dónde debe extenderse el fondo dentro de un elemento. Al establecer su valor en text, el fondo se recortará según la forma del texto.

h1 {
  background-image: linear-gradient(to right, #ff0000, #0000ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

p {
  -webkit-text-stroke: 2px #000000;
  text-stroke: 2px #000000;
}

h1 {
  clip-path: polygon(0% 0%,100% 0%,100%80%,0%100%);
}

p {
  mask-image: url('mask.png');
  mask-size: cover;  
  mask-repeat: no-repeat;
}