strike-css

En esta entrada explicaremos como crear un truco sencillo con CSS: Consiste en tachar el texto mediante la etiqueta , pero con una imagen de fondo. Esta etiqueta se usa normalmente para la correción de palabras, aunque también puede ser usada para fines estéticos.

Un texto agrupado con la etiqueta se ve así:

Texto tachado.

Pero podemos darle estilo para sustituir ese tachado por una imagen, con CSS. Así se vería con CSS aplicado:

Texto tachado con CSS

Los pasos para lograr este efecto serían muy sencillos:

1. Se agrega este código CSS a nuestra hoja de estilos:

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

Por supuesto se debe reemplazar strike.png por la imagen que deseemos que “simule el tachado”.

2. El código HTML:

Habría que etiquetar cualquier texto con las etiquetas y , así:

Texto tachado

Apuntes a observar:

strike {…}. Todas las palabras que estén entre las etiquetas Y se les aplicarán los estilos definidos entre las llaves ( { y } ).

text-decoration:none; elimina la línea predeterminada que tacha el texto.

background:transparent url(strike.png) superpone la imagen de fondo que simula el tachado al texto. Por ejemplo: strikeiw4. Intenta ser original en este aspecto.

repeat-x : Con repeat-x no tendremos que usar una imagen larga para lograr nuestro efecto de tachado con imagen de fondo, ya que se encargará de repetirla horizontalmente. Eso sí, las puntas de la imagen de fondo deben coincidir, si no no se obtendrá el efecto.

left 55% : Alinea la imagen hacia la izquierda y el 55% lo sitúa un poco por debajo de la mitad.

Si deseamos volver a usar el tachado por defecto, podemos usar otras etiquetas que no estén sujetas a la clase definida anteriormente. Es decir, alguna de estas: mi texto o mi texto .

Cualquier duda o sugerencia podéis escribirla en los comentarios.

Vía | Blog Bazar | Foto por Mediateka