Estilizar la etiqueta strike con CSS

Esto es un truco rápido y sencillo. Se me ocurrió ayer y lo publico porque nunca he visto algo similar en la web. Es extraño que nadie lo pensara. El tag <strike> o <s> sirve para tachar un texto, cruzar una línea por el centro de la palabra. Aunque originalmente su utilidad es la de indicar que se ha corregido algo del documento, hoy en día suele usarse con fines estéticos. Así es como se ve normalmente...

Texto tachado con HTML

Mi idea es utilizar CSS para tachar el texto. Así se vería luego de aplicar este truco:

Texto tachado con CSS

Sigue estas instrucciones...


1) CSS para tachar el texto


Simplemente hay que agregar a la hoja de estilos del blog estas líneas en cualquier parte entre <style> y </style>:

strike, s {text-decoration:none; background:transparent url(strike.png) repeat-x left 55%;}

Y, por supuesto, reemplazar strike.png por la URL de la imagen que queremos que aparezca de fondo.


2) Implementación del truco en los posts


Simplemente encierra el texto que quieres tachar entre las etiquetas <strike> y </strike> (siempre en el modo de edición de HTML) o <s> y </s>.


3) Explicación del código y Personalización


  • strike {...} define que se aplicará a todas las palabras que estén entre las etiquetas <strike> y </strike> los estilos definidos entre las llaves ( { y } ).
  • text-decoration:none; quita la línea predefinida que cruza el texto.
  • background:transparent url(strike.png) agrega una imagen de fondo. En el ejemplo de arriba usé esta: pero no hay límites en cuanto a la creatividad; cualquier imagen podría dar un buen efecto.
  • repeat-x hace que la imagen se repita horizontalmente, para que no tengamos que usar una imagen muy larga. Lógicamente, es necesario que las puntas coincidan para lograr un efecto de continuidad.
  • left 55% posiciona la imagen con respecto a la palabra: "left" la alinea a la izquierda, que es donde comienza la palabra, y "55%" la sitúa un poco por debajo de la mitad. Usé 55% en lugar de 50% porque la mitad se toma desde la altura de las mayúsculas y no quedaría en el centro de las palabras escritas en minúsculas.

4) Imágenes alternativas


Dejo algunas variantes que preparé para que uses libremente, de acuerdo al color de tu texto y el efecto que quieras lograr:

  • Negra:
  • Azul:
  • Roja:
  • Verde:
  • Grande:
  • Mediana:
(hacer click sobre la imagen, copiar la dirección de la barra superior del navegador y pegarla reemplazando strike.png en el código CSS)

Nota: aún después de aplicar el truco, es posible seguir usando la línea común mediante <span style="text-decoration:line-through;"> y </span>.

Además de tus dudas y comentarios, me gustaría ver cómo lo implementaste, y si hay alguna sugerencia o imágenes que quieras regalar, también son bienvenidas.

0 comentarios:

Publicar un comentario