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 Tachado](http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SkJwsuq-TnI/AAAAAAAAG8A/ABFI7JL5ItY/s400/tachado.jpg)
[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 Tachando frases](http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SkJw_R2nEyI/AAAAAAAAG8I/Bqg_Umy91p8/s400/tachado2.jpg)
Aquí tenéis las imágenes que Blog Bazar comparte con todos nosotros:
![linea linea](http://3.bp.blogspot.com/_8PJ-pgoBhWQ/SkJydEcuPLI/AAAAAAAAG8Q/jWtO4lR_akg/s400/linea.png)
![linea-azul linea-azul](http://4.bp.blogspot.com/_8PJ-pgoBhWQ/SkJyiFJ_XqI/AAAAAAAAG8Y/vk0fnT0WSBY/s320/lineaazul.png)
![linea-roja linea-roja](http://1.bp.blogspot.com/_8PJ-pgoBhWQ/SkJylQjbkVI/AAAAAAAAG8g/tD85uGltb8M/s320/linearoja.png)
![linea-verde linea-verde](http://4.bp.blogspot.com/_8PJ-pgoBhWQ/SkJyoKG_RqI/AAAAAAAAG8o/_w3w172DrEE/s320/lineaverde.png)
![linea-garabato linea-garabato](http://4.bp.blogspot.com/_8PJ-pgoBhWQ/SkJysyn40gI/AAAAAAAAG8w/wgFVO6AVZzM/s320/garabato.png)
![linea-garabatillo linea-garabatillo](http://2.bp.blogspot.com/_8PJ-pgoBhWQ/SkJywbawFKI/AAAAAAAAG84/kOtVSuegzUs/s320/garabatillo.png)
0 comentarios:
Publicar un comentario