Efecto "Strike" para tachar imagenes con CSS

04 marzo 2010

Efecto "Strike" para tachar imagenes con CSS

    13 comentarios
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


    13 comentarios :

    1. Digooagosto 29, 2010 10:55 a. m.

      copiador esto estaba en el escaparate de rosa
      no sabes hacer nada por ti mismo y no pones creditos, copiador!!

      eres un blogger falso.

      ResponderEliminar
    2. Anthonyagosto 29, 2010 11:25 a. m.

      Si si! Lo que tu digas.!

      ResponderEliminar
    3. Digooagosto 29, 2010 1:06 p. m.

      si no es lo que yo diga, lo triste es que no tienes ni una sola visita

      ResponderEliminar
    4. Anthonyagosto 29, 2010 3:39 p. m.

      Por que tu ves mis estadisticas! ja!

      ResponderEliminar
    5. elSant0agosto 29, 2010 6:58 p. m.

      Bueno, me veo obligado a contestar a Digoo:

      1. Vistas y comentarios no es lo mismo. Yo visito a menudo este blog y comento menos a menudo :P

      2. Encontrar contenido duplicado en internet es normal cuando se trata de tutoriales. Internet es inmensa y es prácticamente imposible la exclusividad de cosas así. Lo importante es compartir y ayudar, y cada uno lo hace como puede.

      3. Salta a la vista que FrikiBloggeo es el fruto de muchas horas de trabajo y eso debe respetarse. Además, cuando hace falta una ayudita siempre hay alguien dispuesto.

      PD (para Anthony): En lo referente a dejar los créditos indicando de donde sacaste el material no es mala idea (más cuando se trata de lugares de interés como El Escaparate ;) ).

      Salu2, elSant0

      ResponderEliminar
    6. Anthonyagosto 29, 2010 7:04 p. m.

      Gracias santo! gracias x tu apoyo pero este tuto no lo saque del escaparate. por eso, no me puese a discutir con digoo! Gracias

      ResponderEliminar
    7. Digooagosto 29, 2010 8:07 p. m.

      por dios anthoni, hasta la fecha te delata. no quiero criticarte pero en tu forma de expresarte nos haces ver de lo que realmente consigues el éxito: copiar.

      "El Santo", no estoy en contra tuya. Internet es para compartir, por supuesto. ¿Pero no crees que el autor, que permanece ante el escritorio durante largas horas para terminar un artículo que desgraciadamente no recibirá el suficiente reconocimiento dado que otro usuario lo a plagiado merece al menos un enlace de referencia?

      No quiero meterme con nadie, tan solo me gusta respetar las obras que otros ofrecen y evitar que actos como este se produzcan. No me creo nadie importante pero estoy seguro de que puedo diferenciar muy bien el conocimiento de alguien en una materia como es el HTML o simplemente blogger por medio de sus explicaciones.

      Tan solo debes fijarte en la plantilla... ¿Es un diseño propio o común?

      Saludos y suerte con la ayuda de FrikiBloggeo.

      ResponderEliminar
    8. Anthonyagosto 29, 2010 8:22 p. m.

      Amigo, en cuanto al diseño de mi blog, esta no era su apariencia originalmente OK! durante todo este tiempo,el blog ha tenido un cambio total en cuanto a su diseño que si yo le mostrara el diseño original de esta plantilla te quedarias loco al ver tantos cambios. Incluso, no creo que tu puedas lograr hacer una plantilla tan linda y profesional como esta (Digo profesional por que muchas personas me lo comentan). Si este blog no es de tu gusto, tan solo deja de entrar, nadie te esta obligando, ya! cualquier persona o webmaster que leyera tu comentario, te lo censuraria. Pero yo creo en la libertad de pensamiento y de expresion, asi que di todo lo que quieras, a mi me vale! Bueno chao.

      Salud!

      ResponderEliminar
    9. Anthonyagosto 29, 2010 8:27 p. m.

      ah se me olvidaba! Por que debe ser que cuando tu entras a ciudad blogger, oloblogger o cualquier otro blog de ayuda tiene un diseño propio. Aprenda a vizualisar y ponle entonces diseño propio a tu web

      ResponderEliminar
    10. Digooagosto 29, 2010 10:05 p. m.

      No quiero ser pesimista Anthony pero tu comentario no me convence. ¿Qué edad tienes? Repito, tu forma de expresión carece de sentido en los comentarios con respecto a mis palabras.

      Me gustaría ver un diseño realizado por tí mismo, me gustaría saber si realmente sabrías programar en HTML, entender algo de CSS, programar en PHP, Mysql o algo de codificación ANSI.

      Es triste ver como alguien de tan corta edad cree poseer altos conocimientos en lo que al mundo de la programación se refiere.

      Soy informático y creo que mis palabras pierden sentido al ser leídas por alguien como tú.

      Me disculpo y termino con esta conversación. No te molestaré núnca más pero te daré un consejo: prueba a estudiar, a comprender el verdadero lenguaje y después enseña a los demás. No te bases en lo que otros publican ya que solo difundirás algo que no es de tu propia cosecha. Es inútil ofrecer ayuda sin estar verdaderamente seguro del contenido de la consulta.

      P.D. Espero que entiendas mi comentario pues de algo servirá que cambies.

      ResponderEliminar
    11. Anthonyagosto 29, 2010 10:16 p. m.

      Bueno, hermano! No me importa que lo convenza o no. Esa aqui no es mi mision. De igual manera, quiero destacar que aqui yo no trato de explicar ni hacerle entender a los usuarios lo que es PHP, o Mysql, usted podra ser programador, informatico, como usted lo quiera llamar, eso no me incumbe, y me molesta que trates de adivinar cosas sobre mi que no sabes, tu no sabes ni que edad tengo ni cuantas visitas tiene mi blog, y tienes razon, yo no he estudiado ni el lenguaje HTML ni el CSS, pero aunque usted no lo crea, con tan "corta edad" como dice usted, entiendo perfectamente de que trata. Asi que tu no puedes venir a subestimar el aprendizaje de otros solo por que llevas esto de manera profesional. Si usted le pregunta a Rosa, del escaparate, has estudiado el lenguaje de blogs? Te va a decir Soy Aficcionada. He chateado un par de veces con rosa, y eso me dijo. Soy aficcionada, pero analizando los codigos pude llegar a entenderlos en tanto tiempo. Entonces? Por que tienes que llegar tu aqui a hablar mal de un blog tratando de adivinar como va todo!... primero, te sugiero, investigar bien las cosas, por que hablas de que este tuto lo saque del escaparate pero no fue asi. Usted puede decir lo que quiera. A mi me tiene sin cuidado. Y dices que no quieres ser pesimista, mas es lo que demuestras. Gracias por tus palabras

      ResponderEliminar
    12. Etanonimojulio 20, 2012 2:16 p. m.

      No sé que edad tienes, pero si eres menor o un joven te felicito por tratar de aprender y compartir estos conocimientos, en vez de estar haciendo maldades por ahí ó simplemente perdiendo el tiempo. No te desanimes por personas que en vez de hacer lo mismo sólo critican. En el futuro tal vez te necesiten a ti....
      Sigue adelante y éxitos!!!!

      ResponderEliminar
    13. hugo reyesagosto 21, 2012 11:57 p. m.

      Anthony tal como dice Etanonimo es mucho mejor lo que haces que estar con warez, películas o porno (refiriéndome al internet) u otras en tu vida. ¿Y si copias? ¡y que chinga! la red es tan inmensa que vale mas que este en 1000 blogs este articulo que nos beneficia a muchos, que encontrar en 1000000000 de blogs la película nueva de batman con el mismo enlace. Diggo a palabras no se mantiene nadie, te invito a que nos compartas tus desarrollos y dar credibilidad a lo que comentas..

      ResponderEliminar

    Suscribirse a: Enviar comentarios ( Atom )