Texto tachado (riscado) usando imagem

Meus internéticos queridos leitores, já postei aqui sobre texto tachado riscado usando a tag <strike> </strike>. Agora,apresento uma forma diferente, e super fácil, de conseguir este mesmo efeito, só que usando uma imagem.

O efeito que se obtém consegue é igual ao visto neste trecho pequeno parágrafo de texto. Super bacana legal, né verdade?

Pois bem, isso é muito fácil de conseguir. São apenas 2 passos. Vamos a eles?!...

Passo 1: Logado no Painel do Blogger, vá a LAYOUT > Editar HTML (Não marque Expandir modelos de widgets) e insira o código abaixo, logo antes da tag </head> e salve suas alterações:

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

Não esqueça de substituir o texto em LARANJA, pelo url da imagem escolhida.

Passo 2: Agora, toda vez que você quiser "riscar/tachar" um texto, basta usar a tag <strike> </strike>, colocando a palavra ou o bloco de texto a ser "riscado/tachado" entre a abertura (<strike>) e o fechamento </strike> da tag.

<strike>Escreva seu texto AQUI, dentro da Tag!</strike>

Seu texto será apresentado desta forma:

Escreva seu texto AQUI, dentro da Tag!

Note, porém, uma outra diferença: No post anterior, dizíamos que tanto faz usar a tag <strike> </strike> como, simplesmente, <s> </s>! Neste caso, usando-se a imagem, ele só será exibido desta forma com a tag completa (<strike> </strike>). Por qual motivo, juro, eu ainda não compreendi!

Assim, após a inserção do código de estilo (Text/CSS) você poderá usar ambos os estilos: SEM IMAGEM, usando simplesmes <s> </s> ou COM IMAGEM, usando a tag completa (<strike> </strike>), conforme você pode ver neste post.

Para facilitar sua vida, caso decida usar este efeito, utilize as imagens (em diversas cores e estilos) abaixo. Basta copiar o url da imagem  que quiser, conforme o layout de seu template, o substituir no estilo CSS (em laranja, acima):








Você poderá, ainda, criar suas próprias imagens, a seu gosto. Um tamanho razoável é 100 x 5 pixéis. Como ela se repete, qualquer que for o tamanho do bloco de texto, este será devidamente tachado!

Este efeito foi postado, há muito tempo, pelo Blog Bazar e repostado pelo excelente EL ESCAPARATE DE ROSA, que recomendo, fortemente, uma leitura!

Pronto! Fácil, não?!...

---

GOSTOU DESTE ARTIGO? ENTÃO ASSINE O RSS FEEDS DO BLOG. É GRÁTIS!
Ficaria, também, muito honrado com um COMENTÁRIO seu sobre este Post.

---