04 marzo 2010

Efecto "Strike" para tachar imagenes con CSS

 
La verdad, es que no suelo tachar imágenes en este blog, pero visitando blogs, vi que algunos si tachaban palabras y hasta grandes oraciones con las etiquetas <strike></strike>, logre notar algo que en verdad me parece muy aburrido, y es la forma en la que Blogger tiene predefinida para tachar las imágenes, algo muy común y poco atractivo. Esta es la forma predefinida, aburrida, ¿Cierto?, pero esto puede cambiar.

El tag <strike> sirve para tachar objetos de un documento que se han corregido, pero la verdad, es que hoy en día se utiliza mas con fines fonéticos. Ahora, si eres de los que suele utilizar este truco, solo sigue las instrucciones.

[1] CSS para tachar el texto.

Ve hasta la edición HTML de tu blog, y antes de ]]></b:skin>, añade el siguiente código.

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


Debes sustituir la linea roja en el codigo por la imagen de tachado, aqui te dejo algunas.













[2] Implementacion del truco en los post.

Simplemente encierra el texto que deseas tachar entre la etiquetas <strike></strike>

Ejemplo

<strike>AQUI VA EL TEXTO QUE DESEAS TACHAR</strike>

[3] Explicacion del codigo CSS, para su entendimiento y personalizacion.


  • strike {...} define que se aplicará a todas las palabras que estén entre las etiquetas y 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.
  • 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

  • NOTA: Aun despues de haber implementado ya el código en tu plantilla, puedes seguir usando la linea predefinida mediante las etiquetas
    <s></s> o <span style="text-decoration:line-through"> y </span>

    Enlaces para compartir en tu blog o pagina web.



    " />


    Widget por Friki Bloggeo