En lo relativo al diseño web, el atractivo visual de los contenidos desempeña un papel fundamental a la hora de captar y retener la atención de tu audiencia. Un aspecto del diseño que puede influir significativamente en la estética general y la legibilidad de tu sitio web es el estilo del texto.
El estilo del texto va más allá de elegir una fuente y un color de fuente. Implica combinar cuidadosamente varias propiedades CSS para conseguir el efecto deseado, como utilizar contornos de texto para que tu texto sea visualmente llamativo.
En este artículo, nos adentramos en el arte de estilizar el contorno de los textos utilizando CSS y exploramos cómo funciona junto con las distintas opciones que puedes utilizar.
Entender los Textos Web
El texto web es el texto que se muestra en una página web. Las fuentes desempeñan un papel vital a la hora de mostrar texto en la web. Estas fuentes son esencialmente gráficos basados en vectores, lo que significa que los datos en píxeles no las limitan y pueden representarse en varios tamaños manteniendo su nitidez y claridad.
Un aspecto fascinante de que las fuentes sean gráficos basados en vectores es la capacidad de aplicar trazos o contornos alrededor de caracteres individuales. Al igual que puedes dibujar un trazo alrededor de una forma en programas vectoriales como Adobe Illustrator, CSS proporciona los medios para conseguir el mismo efecto en el texto web.
2 Métodos para Añadir un Contorno de Texto con CSS
Cuando se trata de añadir un efecto de contorno a tu texto utilizando CSS, hay dos métodos que puedes emplear. Exploremos y veamos las desventajas de estos métodos y cómo utilizarlos.
1. Utilizar la Propiedad text-stroke
text-stroke es una propiedad CSS que puedes utilizar para añadir un contorno a tus textos. Te permite especificar los contornos width y color. Esta propiedad sólo es compatible con los navegadores basados en WebKit, y para que puedas utilizarla, debes añadir el prefijo -webkit-.
Por ejemplo, vamos a añadir un contorno a un texto de encabezamiento h1: «Welcome to Kinsta»:
<h1>Welcome to Kinsta</h1>Así se utilizará la propiedad text-stroke con el prefijo -webkit-:
h1 {
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: black;
}-webkit-text-stroke-width y -webkit-text-stroke-color especifican los trazos width y color, respectivamente. Establece el width en 3px y el color en black.
Estas dos propiedades anteriores pueden combinarse con la propiedad abreviada -webkit-text-stroke, que especifica simultáneamente el trazo color y width.
h1 {
-webkit-text-stroke: 3px black;
}Esto dará el mismo resultado.
Soporte para la Propiedad text-stroke
Según caniuse, no hay soporte para la propiedad text-stroke en el navegador Internet Explorer.
Si utilizas la propiedad text-stroke para establecer el contorno de tus textos y un usuario hace uso de un navegador no compatible, es posible que dicho texto no sea visible si su color coincide con el color de fondo.
Para solucionarlo, puedes utilizar la propiedad -webkit-text-fill-color para establecer un color para el texto y establecer un color de reserva con la propiedad color:
h1 {
color: black;
-webkit-text-fill-color: white; /* Will override color (regardless of order) */
-webkit-text-stroke: 3px black;
}Cuando un navegador no soporta la propiedad text-stroke, utiliza el color establecido por la propiedad color.
Otra opción será confirmar que el navegador admite la propiedad -webkit-text-stroke antes de añadir el estilo.
@supports (-webkit-text-stroke: 3px black) {
h1 {
-webkit-text-fill-color: white;
-webkit-text-stroke: 3px black;
}
}2. Utilizar la Propiedad text-shadow
Si no quieres ocuparte de las diferencias de soporte, puedes utilizar la propiedad text-shadow, que tiene soporte para todas las versiones más recientes de los navegadores más populares.
Para la propiedad text-shadow, utilizaremos cuatro sombras, cada una en la parte superior derecha, superior izquierda, inferior izquierda e inferior derecha.
h1 {
color: #fff;
text-shadow:
3px 3px 0 #000,
-3px 3px 0 #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}En este ejemplo, utilizamos cuatro sombras para crear un efecto de contorno de texto. Cada sombra tiene un desplazamiento de 3 píxeles respecto al texto, y el color se establece en negro (#000). Este efecto es similar al generado por el primer método.
Aplicando sombras a las cuatro esquinas del texto, conseguimos un contorno bien definido. Siéntete libre de ajustar los desplazamientos de píxel, los colores de las sombras o los colores del texto para adaptarlos a tus preferencias específicas de diseño.
Este método te ofrece una ventaja añadida, ya que puedes ajustar las sombras horizontales y verticales según lo que convenga al texto. También puedes añadir un pequeño radio de desenfoque:
h1 {
color: #fff;
text-shadow:
3px 3px 2px #000,
-3px 3px 2px #000,
-3px -3px 0 #000,
3px -3px 0 #000;
}
Una limitación del uso de sombras de texto es que puedes encontrarte con un efecto de trazo discontinuo cuando la longitud de la sombra supera 1 píxel (lo verás si lo comparas con el método text-stroke ).
Combinación de las Propiedades text-stroke y text-shadow
Puedes combinar ambas propiedades para conseguir un efecto visualmente impactante que combine un contorno de texto perfecto con un sutil desenfoque y los efectos adicionales que ofrece la propiedad text-shadow. Esta combinación permite un enfoque versátil y personalizable para mejorar el aspecto de tu texto.
h1 {
-webkit-text-stroke: 1px black;
color: white;
text-shadow:
3px 3px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
También puedes prescindir de tener que añadir sombras individuales a cada esquina y aplicar una sombra general con un trazo:
#heading-1{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 1px 4px #23430C;
}
#heading-2{
color: white;
-webkit-text-stroke: 1px #F8F8F8;
text-shadow: 0px 2px 4px red;
}
#heading-3{
color: #333;
-webkit-text-stroke: 1px #282828;
text-shadow: 0px 4px 4px #282828;
}
Resumen
Tanto las propiedades text-stroke como text-shadow ofrecen valiosas opciones para añadir contornos a tu texto. La elección entre ellas depende de la compatibilidad del navegador, de los efectos deseados y del nivel de control que necesites para tu diseño.
Experimenta con diferentes técnicas y encuentra el mejor enfoque para crear contornos de texto visualmente atractivos y cautivadores. Puedes combinar las prestaciones de alojamiento de Kinsta con tu proyecto completo para conseguir una presencia online atractiva.
¡Comparte tu experiencia! ¿Has utilizado algún otro enfoque que no se haya tratado en este artículo? Háznoslo saber en los comentarios.
Deja una respuesta