Si estás buscando mejorar la apariencia de tus textos en tu sitio web, entonces los efectos de texto CSS3 son la herramienta perfecta para ti. Con estos efectos podrás darle un toque de clase y elegancia a tus letras y hacer que tu contenido sea aún más atractivo para tus lectores. En este artículo de TIEngranaje te enseñaremos todo lo que necesitas saber sobre los efectos de texto CSS3 y cómo puedes aplicarlos en tu sitio web. ¡Sigue leyendo para aprender más!
CSS3 brinda flexibilidad adicional a los desarrolladores web cuando trabajan con texto. Por ejemplo, con CSS3, ahora es fácil aplicar sombras a tu texto o manejar el ajuste de palabras y el desbordamiento de texto Con respecto a las sombras, esto elimina la necesidad de crear una imagen separada que contenga el texto y la sombra, como lo haría al usar un software de edición de imágenes popular.
La propiedad de sombra de texto
La propiedad utilizada para aplicar una sombra al texto seleccionado es text-shadow. El text-shadow La propiedad es compatible con todos los navegadores principales, excepto Internet Explorer.
Sintaxis de sombra de texto
La propiedad text-shadow aplica sombra al texto. La propiedad text-shadow no tiene ningún valor predeterminado asignado.
text-shadow: h-shadow v-shadow blur color;| Valor | Descripción |
|---|---|
h-shadow |
Un valor requerido para la posición de la sombra horizontal. Los valores negativos son aceptables |
v-shadow |
Un valor requerido para la posición de la sombra vertical. Los valores negativos son aceptables |
blur |
Valor opcional para la distancia de desenfoque |
color |
Valor opcional para el color de la sombra. |
Ejemplo
Debe tener en cuenta que el text-shadow La propiedad admite una o más sombras adjuntas al texto. Al adjuntar más de una sombra, separe el conjunto de valores con una coma.
<!DOCTYPE html>
<html>
<head>
<style>
#myText {
font-size: 4em;
text-shadow:3px 3px gray;
}
</style>
</head>
<body>
<span id="myText">Text Shadow</span>
</body>
</html>La propiedad de ajuste de palabras
El word-wrap La propiedad permite que las palabras largas se puedan dividir y pasar a la siguiente línea. Esta propiedad permite dos valores; normal o break-word. El word-wrap La propiedad es compatible con todos los navegadores principales.
Sintaxis de ajuste de palabras
El word-wrap La propiedad permite que las palabras largas se puedan dividir y pasar a la siguiente línea. El valor predeterminado es normal.
word-wrap: break-word|normal;| Valor | Descripción |
|---|---|
break-word |
Permite que palabras que normalmente no se pueden dividir se envuelvan |
normal |
Dividir palabras solo en los puntos de quiebre permitidos |
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
#myText {
width:11em;
border:1px solid #7f7f7f;
word-wrap:break-word;
}
</style>
</head>
<body>
<p id="myText">
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.
The long word will break and wrap to the next line.
</p>
</body>
</html>La propiedad de desbordamiento de texto
Puede haber casos en los que necesite recortar el texto del elemento, como cuando se desborda el cuadro del elemento. Cuando esto ocurre, desea dejar una pista visual al usuario de que se ha recortado el texto. El text-overflow La propiedad es compatible con todos los navegadores principales.
Sintaxis de desbordamiento de texto
El text-overflow La propiedad especifica lo que debería suceder cuando el texto desborda el elemento que lo contiene. El valor predeterminado es clip.
text-overflow: clip|ellipsis|string;| Valor | Descripción |
|---|---|
Clip |
Recorta el texto |
Ellipsis |
Mostrar puntos suspensivos (“…”) para representar texto recortado |
String |
Cadena para representar texto recortado |
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
p {
width:300px;
border:1px solid #7f7f7f;
white-space:nowrap;
overflow:hidden;
}
</style>
</head>
<body>
<p style="text-overflow:clip;" >
This is some long text that will not fit in the box. The text should be clipped.
</p>
<p style="text-overflow:ellipsis;" >
This is some long text that will not fit in the box. You should see an ellipsis.
</p>
</body>
</html>