Transformación de texto

La propiedad text-transform se utiliza para especificar letras mayúsculas y minúsculas en un texto. Se puede usar para convertir todo en letras mayúsculas o minúsculas, o poner en mayúscula la primera letra de cada palabra.

Ejm

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

Espaciado de texto CSS

En este capítulo aprenderá acerca de las siguientes propiedades:

  • text-indent
  • letter-spacing
  • line-height
  • word-spacing
  • white-space

La propiedad text-indent se usa para especificar la sangría de la primera línea de un texto.

Ejm

{
  text-indent: 50px;
}

La propiedad letter-spacing se utiliza para especificar el espacio entre los caracteres de un texto. El siguiente ejemplo demuestra cómo aumentar o disminuir el espacio entre caracteres.

Ejm

h1 {
  letter-spacing: 5px;
}

h2 {
  letter-spacing: -2px;
}

La propiedad line-height se usa para especificar el espacio entre líneas.

Ejm

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}

La propiedad word-spacing se utiliza para especificar el espacio entre las palabras de un texto. El siguiente ejemplo demuestra cómo aumentar o disminuir el espacio entre palabras.

Ejm

p.one {
  word-spacing: 10px;
}

p.two {
  word-spacing: -2px;
}

La propiedad white-space especifica cómo se maneja el espacio en blanco dentro de un elemento. Este ejemplo demuestra cómo deshabilitar el ajuste de texto dentro de un elemento.

Ejm

<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>

<h1>Using white-space</h1>

<p>
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
</p>

<p>Try to remove the white-space property to see the difference!</p>

</body>
</html>

text-shadow

La propiedad text-shadow agrega sombra al texto. En su uso más simple, solo especificas la sombra horizontal (2px) y la sombra vertical (2px).

Ejm

h1 {
  text-shadow: 2px 2px;
}

Ahora vamos a añadir un color a la sombra, veamos un ejm.

Ejm

h1 {
  text-shadow: 2px 2px red;
}

Luego, agregamos un efecto de desenfoque (5px) a la sombra:

h1 {
  text-shadow: 2px 2px 5px red;
}

Otro ejm

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}