Aplicando los estilos.
Veamos que significa cada una de estas propiedades y como se pueden aplicar:
- text-decoration: Aplica una decoración a un bloque de texto, sus posibles propiedades son: none, underline, overline, line-through, blink.
- text-transform: Aplica una transformación a un bloque de texto, sus posibles propiedades son: none, capitalize, uppercase, lowercase.
Analicemos el siguiente ejemplo donde aplicamos ambas propiedades para generar un efecto en el texto, vamos a transformarlo todo en mayúsculas y adicionalmente le colocaremos una línea en medio para lograr un efecto de tachado:
<!DOCTYPE HTML> <html> <head> <title>Example</title> <style> p { border: medium double black; background-color: lightgrey; text-decoration: line-through; text-transform: uppercase; } </style> </head> <body> <p> There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the time we add the countless types of apples, oranges, and other well-known fruit, we are faced with thousands of choices. One of the most interesting aspects of fruit is the variety available in each country. I live near London, in an area which is known for its apples. </p> </body> </html>
Ahora veamos lo que nos muestra el navegador, si notamos el código sabemos que nuestro texto es una combinación de mayúsculas y minúsculas y el resultado es diferente gracias a text-transform.
Crear sombras en el texto
Este efecto es bastante popular ya que haciendo una buena combinación podemos lograr una sensación de profundidad, estamos hablando de text-shadow, que no hace más que agregarle sombra a un bloque de texto y sus propiedades son: <h-shadow>, <v-shadow>, <blur>, <color>, estas funcionan de la misma forma que las sombras de los elementos HTML.
Recordemos que las propiedades h-shadow funciona para la sombra horizontal, v-shadow para la vertical, blur nos da la difusión de la sombra y color para los efectos de color de la misma.
Sin más preámbulos pasemos a un ejemplo utilizando estas opciones:
<!DOCTYPE HTML> <html> <head> <title>Example</title> <style> h1 { text-shadow: 0.1em .1em 1px lightgrey; } p { text-shadow: 5px 5px 20px black; } </style> </head> <body> <h1>Thoughts about Fruit</h1> <p> There are lots of different kinds of fruit - there are over 500 varieties of banana alone. By the time we add the countless types of apples, oranges, and other well-known fruit, we are faced with thousands of choices. </p> </body> </html>
Este código nos da de resultado en el navegador lo siguiente:
Como observamos pudimos crear dos tipos de sombras para los diferentes textos, solo cambiando las propiedades del atributo text-shadow.
Con esto finalizamos el tutorial, ya podemos ser capaces de modificar nuestro texto, podemos lograr muchas combinaciones, de forma que nuestras páginas cobren más vida y de esta manera lograr textos enriquecidos, como siempre debemos practicar hasta que ya no necesitemos ver la guía para utilizar lo que hemos aprendido hoy.