Tachado con imagen

Es un efecto muy lindo que publicó hace tiempo Blog Bazar, en realidad fue una de sus primeras y últimas entradas, ya que el blog lleva tiempo sin ser actualizado.

Habíamos visto en una entrada anterior, como conseguir "tachar" un texto en nuestro blog usando la etiqueta <strike>

La idea que Blog Bazar nos presenta, es esta misma pero usando una imagen para lograr un efecto aún más original.

Tachado


[1] Aplicamos este código colocandolo en nuestra plantilla antes de </head>

<style type='text/css'>
strike {text-decoration:none; background:transparent url(url_de_la_imagen) repeat-x left 55%}
</style>

[2] Para usarlo en el blog, sencillamente tenemos que incluir el texto que queremos mostrar tachado, entre las etiquetas <strike> y </strike>
Si vamos a usarlo en las entradas, lo haremos desde la pestaña de Edición de HTML del editor.


Nota: Aunque el texto que vamos a tachar sea una frase e incluso más largo, no habrá problema ya que la imagen se repetirá hasta completar el ancho del texto incluido entre esas etiquetas (strike).

Tachando frases


Aquí tenéis las imágenes que Blog Bazar comparte con todos nosotros:

linea
linea-azul
linea-roja
linea-verde
linea-garabato
linea-garabatillo

0 comentarios:

Publicar un comentario