30+1 maneras de resaltar un enlace con hover | Oloblogger Estas son sólo algunas de las maneras en las que puedes cambiar el aspecto de los enlaces cuando pas...

23 de febrero de 2012

30+1 maneras de resaltar un enlace con hover

31 efectos al hacer hover
Estas son sólo algunas de las maneras en las que puedes cambiar el aspecto de los enlaces cuando pasas el puntero por encima de ellos. Es lo que se conoce como hover.

La cosa es sencilla pues se trata simplemente de dar un estilo a la etiqueta a y otro que introduzca algún cambio visible para la pseudoclase que lleva el nombre del efecto (a:hover).

Se pueden utilizar prácticamente todas las propiedades CSS, pero si incorporamos las pseudoclases, los selectores de clases y algún que otro truquillo, las posibilidades son casi infinitas, así que seguro que a vosotros se os ocurren muchas más. Se ven muy rápido, así que no os perdáis las últimas. Tras la demo, los códigos utilizados.

  1. Este es un enlace plano subrayado sin efecto hover.
  2. Este es un enlace que cambia a subrayado.
  3. Este es un enlace en el que desaparece el subrayado.
  4. Este es un enlace que cambia de color.
  5. Este es un enlace que cambia de color y desaparece el subrayado.
  6. Este es un enlace con borde discontinuo abajo que cambia a continuo.
  7. Este es un enlace con borde continuo abajo que cambia a discontinuo.
  8. Este es un enlace sin subrayado que cambia de color.
  9. Este es un enlace que cambia su color de fondo.
  10. Este es un enlace con borde punteado abajo que cambia a continuo.
  11. Este es un enlace que cambia a multicolor.
  12. Este es un enlace que aparece con una línea superior.
  13. Este es un enlace que aparece subrayado y con una línea superior.
  14. Este es un enlace que aparece con un borde superior y otro inferior.
  15. Este es un enlace que aparece con un borde que lo rodea.
  16. Este es un enlace con cambio de color de texto y fondo.
  17. Este es un enlace con cambio de color mediante transición.
  18. Este es un enlace con cambio de color y fondo mediante transición.
  19. Este es un enlace cuyo estilo cambia a negrita.
  20. Este es un enlace que sale con efecto "tachado".
  21. Este es un enlace cuyo estilo cambia a cursiva.
  22. Este es un enlace con cambio de texto a pequeñas mayúsculas (small-caps).
  23. Este es un enlace que incorpora sombras de texto.
  24. Este es un enlace que aparece en una caja redondeada con color de fondo.
  25. Este es un enlace en el que aparece el destino.
  26. Este es un enlace con borde inferior discontinuo y cambios de color.
  27. Este es un enlace cuya separación entre caracteres cambia.
  28. Este es un enlace el que aparece un icono.
  29. Este es un enlace que toma forma de flecha.
  30. Este es un enlace que se acerca.
  31. Este es un enlace con mensaje emergente¿A qué esperas para ver esto?.


(1) a { color: darkblue; text-decoration:underline; }
(1) a:hover { color: darkblue; }

(2) a { text-decoration: none; }
(2) a:hover { text-decoration: underline; }

(3) a { text-decoration: underline; }
(3) a:hover { text-decoration: none; }

(4) a { text-decoration:underline; }
(4) a:hover { color: #E06C1F; }

(5) a { text-decoration:underline; }
(5) a:hover { text-decoration: none; color: #E06C1F; }

(6) a { text-decoration: none; border-bottom: dashed 1px; }
(6) a:hover { border-bottom: solid 1px; }

(7) a { text-decoration: none; border-bottom: solid 1px; }
(7) a:hover { border-bottom: dashed 1px; }

(8) a { text-decoration: none; }
(8) a:hover { color: #e06c1f; }

(9) a { text-decoration: none; padding: 1px 3px; }
(9) a:hover { background: #ccc; }

(10) a { text-decoration: none; border-bottom: solid 1px; }
(10) a:hover { border-bottom: dotted 1px; }

(10) a { text-decoration: none; border-bottom: dotted 1px; }
(10) a:hover { border-bottom: solid 1px; }

(11) a { text-decoration: none; }
(11) a:hover { -webkit-background-clip: text; color: white; -webkit-text-fill-color: transparent; background-image: -webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363)); background-image: -webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image: -o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); }

(12) a { text-decoration: none; }
(12) a:hover { text-decoration: overline; }

(13) a { text-decoration: none; }
(13) a:hover { text-decoration: overline underline; }

(14) a { text-decoration: none; }
(14) a:hover { border-bottom: solid 1px; border-top: solid 1px; }

(15) a { text-decoration: none; border: solid 1px transparent; padding: 1px; }
(15) a:hover { border: solid 1px; }

(16) a { text-decoration: none; background: #ccc; padding: 1px 3px; }
(16) a:hover { background: #e06c1f; color: white; }

(17) a { text-decoration: underline; -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; }
(17) a:hover { color: #e06c1f; }

(18) a { text-decoration:none; background: #ccc; padding: 1px 3px; -webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; }
(18) a:hover { background: #e06c1f; color: white; webkit-transition: color .4s linear; -moz-transition: color .4s linear; -ms-transition: color .4s linear; -o-transition: color .4s linear; transition: color .4s linear; }

(19) a { text-decoration: none; }
(19) a:hover { font-weight: bold; }

(20) a { text-decoration: none; }
(20) a:hover { text-decoration: line-through; }

(21) a { text-decoration: none; }
(21) a:hover { font-style: italic; }

(22) a { text-decoration: none; }
(22) a:hover { font-variant: small-caps; }

(23) a { text-decoration: none; }
(23) a:hover { text-shadow: 2px 2px 2px #aaa; }

(24) a { text-decoration: none; border-radius: 10px; padding: 2px 5px 5px 5px; }
(24) a:hover { background: #ccc; }

(25) a { text-decoration: none; }
(25) a:hover:after { content: " (" attr(href) ") "; }

(26) a { text-decoration: underline; background: #ccc; text-decoration: none; padding: 1px 3px; border-bottom: dashed 1px #777; }
(26) a:hover { background: #e06c1f; color: white; border-bottom: dashed 1px white; }

(27) a { text-decoration: none; }
(27) a:hover { letter-spacing: 1px; }

(28) a { text-decoration: none; }
(28) a:hover:before { content: url("http://img2.blogblog.com/img/icon18_edit_allbkg.gif"); }

(29) a { text-decoration: none; padding: 1px 3px; }
(29) a:hover { background: #ccc; position: relative; font-style: italic; }
(29) a:hover:after { content: " "; position: absolute; height: 0px; width: 0px; border-color: transparent transparent transparent #ccc; border-style: solid; border-width: 15px; }

(30) a { text-decoration: none; padding: 1px 3px; display: inline-block; -webkit-transition: all 1s linear; -moz-transition: all 1s linear; -ms-transition: all 1s linear; -o-transition: all 1.4s linear; transition: all 1s linear; }
(30) a:hover { background: #ccc; color: white; box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.4); -webkit-transform: scale(1.5,1.5); -moz-transform: scale(1.5,1.5); -ms-transform: scale(1.5,1.5); -o-transform: scale(1.5,1.5); transform: scale(1.5,1.5); -webkit-transition: all .8s linear; -moz-transition: all .8s linear; -ms-transition: all .8s linear; -o-transition: all .8s linear; transition: all .8s linear; }

(31) a { text-decoration: none; position: relative; }
(31) a span { text-decoration: none; width: 100px; height: auto; line-height: 20px; padding: 10px; font-size: 14px; color: #719DAB; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #fff; background: rgba(255,255,255,0.9); border-radius: 5px; pointer-events: none; position: absolute; left: 0; bottom: 200px; opacity: 0; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
(31) a:hover span { opacity: 0.9; left: 50%; bottom: 10px; color: #000000; }
(31-HTML) Este es un <a href="javascript:void();">enlace con mensaje emergente<span>¿A qué esperas para ver esto?</span></a>.

La idea de esta entrada esta (casi) vilmente copiada de este Dablett.

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

79 comentarios :

  1. Excelente Oloman!

    Saludos :)

    ResponderEliminar
    Respuestas
    1. Coincido contigo Graciela, excelente entrada Oloman :)

      Eliminar
  2. Que interesante!!! Muy buena estrada! Muy completa, para todos los gustos!

    ResponderEliminar
  3. Me encantó el de transiciones!!!

    ResponderEliminar
  4. Gracias Oloman estoy modificando mi plantilla y esto me cae bien. Me gusto mucho el 24.

    ResponderEliminar
  5. Saludos Oloman, he hecho una combinación del 24 y el 30 y me ha espaciado demasiado las etiquetas y demás. ¿Cómo puedo solucionarlo?.
    Gracias de antemano.
    El blog es http://luisbarcenagimenez.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Lo he arreglado parcialmente reduciendo el padding.
      Un saludo.

      Eliminar
    2. Otra solución: Cambia el padding al a:hover y así sólo te dejará ese margen cuando se pase el puntero por encima.

      Y una opinión. Creo que deberías limitar el uso de ese efecto sólo a cierto tipo de enlaces. No sabría decirte a qué cosas en concreto, pero que TODO lo lleve me parece algo exagerado. Repito, es una opinión; cada cual tiene sus gustos.

      Eliminar
    3. Saludos nuevamente Oloman, coincido contigo en que me ha quedado demasiado recargado por no decir horroroso. ¿Cómo hago para que solo la NUBE DE ETIQUETAS lleve este efecto?.
      Gracias.

      Eliminar
    4. Buscando un poco más encontré la información. (Está claro que necesito un curso). Creo que ahora me ha quedado mejor que antes.
      Un saludo y reitero mi agradecimiento.

      Eliminar
    5. No hay de qué... literalmente ;)

      Eliminar
  6. Excelente amigo! Gracias +1

    ResponderEliminar
  7. por dios! gracias man a falta de otra palabra.

    ResponderEliminar
  8. Graciasss, me he llevado el 23 para mi nube de etiquetas, ya tenía puesto un cambio de color y ahora le he añadido sombras que quedan genial

    Ya que estoy por aquí aprovecho para preguntarte algo, he estado mirando en Page Speed de Google el tiempo de carga de mi blog y me salen varias cosas para cambiar entre ellas me dice:
    "El período de validez de los siguientes recursos que se pueden almacenar en caché es muy breve. En el futuro, especifique un período de caducidad de al menos una semana para los siguientes recursos"
    He mirado por Internet y, aunque, más o menos se a lo que se refiere, no acabo de saber lo que tengo que hacer y tampoco se si es muy importante hacer eso para que mi blog tarde menos en cargar, por si sirve de algo mi navegador Mozilla Firefox

    Un saludo y gracias de nuevo

    ResponderEliminar
    Respuestas
    1. No sabía a qué te referías, pero ya que estaba he analizado mi página y lo he visto. No controlo el tema pero más o menos te explico lo que sé.

      La caché es la "foto fija" que guardan los navegadores sobre ciertos elementos de tu sitio para cargarlos más rápido la siguiente vez que los visitas. Esa foto se actualiza cada cierto tiempo (si no lo fuerzas de otra manera) para que no veas siempre una información desactualizada.

      Por lo que vi, esa herramienta muestra algunos gadgets que tienen programada la actualización cada cierto tiempo (de 10 minutos a 12 horas en mi caso) y te sugiere que amplies ese tiempo para que la página se cargue más rápido. Si por ejemplo todos tuvieran 24 horas, la carga de esa página en concreto sería muy rápida dentro del mismo día en segunda o posteriores visitas.

      Sin embargo, no sé como se hace eso y por otra parte, tampoco creo que sea muy frecuente que vuelvas a la misma página varias veces al día y mucho menos que si lo haces, no sea para ver qué novedades tienes. En este último caso, yo prefiero como usuario que se actualice y que no me muestre siempre lo mismo.

      Ya digo que no lo tengo claro, pero no debo estar muy alejado de la realidad. Si alguien lo sabe que lo explique, por favor.

      Eliminar
    2. Siiii, más o menos eso lo que yo pensaba, así que visto lo visto, digamos que eso serviría simplemente para ver mi blog más rápido cuando YO entro en él,ya que entro varias veces, no para el resto de mis visitas que entran más esporádicamente.
      Además, al ser un blog de cocina y poner varias fotos es normal que tarde algo más en cargar que un blog que no tiene imágEnes, yo creo que me estoy obsesionando un poco con acelerar la carga de mi blog, hasta he escrito una entrada para que l@s que me visitan habitualmente me digan si entran fácilmente o no, jejeje

      Como dices tú, si alguien más nos puede explicar mejor todo ésto, aquí estamos, somos todo orejas, todo lo que sea aprender viene muy bien

      Gracias otra vez, anda que me paso la vida dando las gracias, jajajaja

      Eliminar
    3. De todas formas se me ocurren algunas cosas para tu página en concreto que ese analizador no tiene en cuenta. Por ejemplo podrías mostrar menos entradas en tu página principal. Piensa que si una sola entrada tarda, la página de inicio tardará tantas veces más como entradas muestres. Bueno esto no es exactamente así, pero casi.

      Otra cosa sería no utilizar gifs animados, ya que dentro de los distintos formatos que existen, suelen ser los que más peso (Kb) tienen.

      También reduciría el uso de imágenes de "adorno". Por ejemplo el "sed felices", la impresora, la de "comentarios aquí", la chinita en la barra lateral... Posiblemente no es la imagen que ilustra el post la que más tarda, sino todas las demás.

      Por último, antes de subir una imagen grande (para post) comprueba en un editor de imágenes si puedes reducir de manera significativa su tamaño (+15%, por ejemplo).

      Echa un vistazo a esta entrada, prueba esa herramienta y fíjate en las cosas que tienen la barra más larga. Esas son las que más tiempo ocupan. Luego analiza cuales puedes mejorar/suprimir teniendo en cuenta que varias pequeñas pueden hacer un monto importante.

      De todas formas esto es sólo si quieres dar prioridad a la carga sobre otras cosas. Si tu prefieres dejar cierta imagen porque te gusta, aún a pesar de que eso ralentice un poco la carga, entonces sin problemas ;)

      Eliminar
    4. Esa herramienta ya la conozco y alguna otra más, lo que me fastidia es que, casi todas son en inglés y no me aclaro, tengo que estudiar idiomas, jejejeje, de todas maneras, ya he quitado 3 entradas de la página principal del blog y, las imágenes ya las reduzco antes de ponerlas y además, les he bajado un poco la resolución, con lo cuál pesan menos, eso ya lo hago desde hace tiempo, aún así, está claro que tienen un tamaño considerable
      Voy a pensar lo de quitar algún gif que eso si que pesa bastante

      La gente que me está escribiendo hoy me están diciendo, la mayoría, que entran bien a mi blog

      Y, por otra parte, como un día me dijo una amiga, "el blog tiene que gustarle al o la dueñ@ del mismo", eso es cierto y, a mi, me gusta mi blog,aunque, seguramente que quitaré algo más,por ejemplo, lo de comentarios aquí que no se ni para que lo puse, jejejeje.

      Oloman, de nuevo y de corazón, gracias por tu tiempo y por tus consejos que son muy bien recibidos

      Eliminar
    5. el tema de cache que suele salir en pagespeed es incontrolable por nuestra parte, suelen ser de elementos externos que no podemos controlar...

      Eliminar
    6. Carlos, muchas gracias por la aclaración

      Olomán, te cuento lo que he hecho en mi blog, te hice caso y quité lo de Comentarios aquí.
      Con la impresora y lo de sed felices, lo que he hecho ha sido ponerlo de manera que solo se vea cuando se abren las entradas, con lo cuál, en la página de inicio del bog no salen, , solo con esas tres cosas quitadas, ya he ganado unos cuantos segundos de carga en el blog y eso que , después de darle vueltas, he dejado 8 entradas en la página principal más que nada por una cuestión de estética, me gusta que la sidebar y el main-wrapper estén más o menos a la par el zona de abajo del blog , con todo y con eso ya te comento que he bajado el tiempo de carga, de momento ya me vale

      Un abrazo y gracias

      Eliminar
    7. Muy bien Ana. Lo que has hecho se ha notado un montón. La primera vez que entré se aburría uno esperando el final de la carga y ahora el tiempo es mucho menor.

      Y lo que dice Pizcos se me olvidó. Efectivamente, la mayoría de mejoras en caché que PageSpeed propone, se refieren a gadgets externos que no podemos controlar, como por ejemplo el botón de Twitter.

      Eliminar
  9. Excelente! Gracias por la información.

    ResponderEliminar
  10. que buena estética ha adquirido tu blog!! y muy práctica esa lista para pasársela a la diseñadora para que los tenga en cuenta... :)

    ResponderEliminar
  11. voy a mirar tu blog en IE 7... muha ha ha ha ha

    ResponderEliminar
    Respuestas
    1. Eres muy malo :) De todas formas creo que aún no viéndose igual de bien, el resultado es digno.

      Eliminar
  12. Me encantaaa!!!!.Gracias!!!!!

    ResponderEliminar
  13. ¡Muchas Gracias! Probaré unos cuantos para ver cual le queda mejor a mi blog.

    ResponderEliminar
  14. Oloman y que pasa si uno no solo desea decorar las letras que componen el enlace sino todo el renglon en el que esta copiada la letra?

    ResponderEliminar
    Respuestas
    1. En ese caso, lo que tienes es que usar una clase específica porque la etiqueta >a ya no te serviría. Esa es sólo para enlaces. Por ejemplo:

      .resaltar { color: darkblue; text-decoration:underline; }
      .resaltar:hover { color: darkblue; }

      Y el HTML sería:

      <span class="resaltar" >Parte del texto a resaltar con hover</span> y el resto del texto que no se resaltaría.

      Eliminar
  15. Oloman, ¿Como puedo hacer para colocarselo a una imgen con enlace? saludos :)

    ResponderEliminar
    Respuestas
    1. aaah, ¿Y, como hago para aplicarlo individualmente?

      Eliminar
    2. La mayoría de estos efectos son para enlaces de texto y no son aplicables a imágenes. Sin embargo hay un par que sí, como por ejemplo este.

      Para aplicarlos sólo a algunos enlaces, añade delante de cada grupo un nombre de clase. Por ejemplo:
      .speciallink a { color: darkblue; text-decoration:underline; }
      .speciallink a:hover { color: darkblue; }

      Luego "marcas" los enlaces concretos que quieran que aparezcan con ese estilo con el nombre de la clase que utilizaste:

      <span class="speciallink"><a href="url.com" >ENLACE</a></span>

      Eliminar
    3. Justamente todo lo que necesitaba!!!, gracias por la ayuda :D Saludos

      Eliminar
  16. ¡Hola Oloman! Me preguntaba si se podría hacer una especie de #31 pero que el cuadro que aparece siga el puntero al moverlo por el enlace. Y lo mismo pero para una imagen (supongo que utilizando un tolltip, como has dicho) para hacer una especie de lupa por ejemplo, o mostrar información de la imagen. Lo he visto en algún blog de Wordpress pero no tengo ni idea de como hacerlo. ¡Un saludo desde Canarias! (Perdón por borrar el anterior...)

    ResponderEliminar
    Respuestas
    1. Creo entender lo que me dices pero cuando he visto algo parecido, estaba hecho con alguna librería JavaScript. Aquí he encontrado varios:
      http://www.intenseblog.com/design/8-amazing-javascript-image-zoom-scripts.html

      Eliminar
    2. Muchas gracias Oloman, le echaré un vistazo al material. ¡Muy amable!

      Eliminar
  17. Disculpa amigo no conocía "hover" pero me gusto mucho tu post, en verdad me parece de mucha utilidad, pero ¿En que parte van los codigos? dentro del <b:skin o dentro de la etiqueta <a ?? Muchas gracias desde ya :D un saludo.

    ResponderEliminar
    Respuestas
    1. En la parte CSS. En Blogger, entre las dos etiquetas SKIN.

      Eliminar
  18. Hola, disculpa, pero no entiendo como hacer para colocar el efecto. Yo quiero el 20, pero la verdad no se donde ubicarlo, alguien me puede ayudar? gracias.

    ResponderEliminar
    Respuestas
    1. Si lo quieres aplicar a todos tus enlaces sólo tienes que copiar esto en tu parte CSS (antes del cierre del SKIN):
      a { text-decoration: none; }
      a:hover { text-decoration: line-through; }

      Lo más seguro es que en tu plantilla ya tengas estilos definidos para ese a y ese a:hover. Si es así, lo que tienes que hacer es sustituirlos por estos.

      Eliminar
    2. Ahora lo hago, muchisimas gracias :)

      Eliminar
  19. Hola nuevamente! Tengo un problema con mi blog de asesoramientconsorcios, por un lado, quiero aumentar el tiempo de visita en mi blog y ya implementé lo de "entradas relacionadas" pero se me complica agregar enlacen en las entradas a otras entradas. Me conviene cambiar el menú de "Artículos" y hacerlo por cateogrías para luego en las entradas hacer referencia a otras, dentro del texto? Es un lío, no? Otra cosa, no me funciona lo de "comentarios recientes" e implementé tu solución en otro post pero duró un par de días y después, volvió a no verse. Espero me puedas aconsejar! Saludos!

    ResponderEliminar
    Respuestas
    1. ¿"Enlaces en las entradas a otras entradas"? Pues no sé qué quieres decir con eso.

      Sobre los comentarios recientes, lo más fácil es añadir un gadget tipo feed y añadir esta dirección: http://asesoramientoconsorcios.blogspot.com/feeds/comments/default

      Eliminar
    2. He visto, por ejemplo, en Ciudad Blogger, que en las entradas resalta algunas palabras que hacen referencia a otras entradas y de esa manera, te invita a leer ese artículo referido al tema de la entrada, para completar la información o hacer un paso previo. Se comprende?

      Eliminar
    3. Eso son simples enlaces. Supongo que como este que pongo aquí mismo. No sé, pensaba que sabrías hacerlos, pero si no es así, en ese mismo enlace puedes ver cómo se hacen. Si no es eso, entonces sigo sin entenderte.

      Eliminar
  20. kiero agregar el enlace 9 a las entradas populares pero no me sale. como puedo hacerlo?

    ResponderEliminar
  21. Prueba con una de estas dos clases (y el correpondiente :hover):

    .popular-posts a // .PopularPosts a

    ResponderEliminar
    Respuestas
    1. oloman me funciona pero solo si solo se lo aplico a todo el blog. pero cuando solo se lo quiero aplicar a las entradas populares no me funciona :/ incluso probe con .popular-posts a {
      y tampoco funciono.

      Eliminar
    2. No es .popular-posts a, sino .PopularPosts a. Las mayúsculas y los guiones cuentan como cosas distintas.

      Eliminar
  22. ¡Magnífico!
    Precisamente buscaba eliminar de mis enlaces el subrayado en el hover. ¿Puede sustituirse alguno de estos estilos por el que trae por defecto?
    Gracias.

    ResponderEliminar
  23. Ah, maldición, no había sustituido por el que trae. =) Muchas gracias.

    ResponderEliminar
  24. Holas :3
    una duda, yo quiero aplicar el efecto hover en imagenes... para que suban un poquito... como resaltandolas, no se si me explique xD... como en algunos marcadores sociales que al pasar por ellos se suben un poquito de la linea donde estan :3 he probado algunos pero no me funcionan :/

    ResponderEliminar
  25. Creo que esto te funcionará:
    img {margin-top: 5px;}
    img:hover {position: relative; top: -5px;}

    ResponderEliminar
  26. Hola, vengo con otra duda :3 ... ahm, le coloque al hover el borde dashed (el de rayitas descontinuadas), y queda bonito en los links pero... tambien le salen en las imagenes :/ como se lo quito a las imagenes? gracias :3

    ResponderEliminar
    Respuestas
    1. Disculpa pero no me funciona... bueno solo lo hace con las imagenes subidas a blogspot... pero mi problema esk tengo enlaces, el menu y redes sociales con imagenes que subi a tinypic y dropbox y a estas les sigue saliendo el borde del enlace... alguna otra solución?? a por cierto, donde tengo "Publicado por" desapareció mi nick D: y no le hice nada a esa parte del footer, antier si se veia :C ...

      Gracias por responder .w.

      Eliminar
    2. Disculpa que haya doble post xD... pero ya resolvi lo de mi nick en publicado por... esk utilice otro truco tuyo que metia la etiqueta span... y en mi nick estaba la etiqueta... cosa que eliminaba el estilo, solo basto con cambiar el nombre de la etiqueta en el otro truco y vuala *o* ya tengo mi nombre... aunque lo de los links aun no lo resuelvo :C

      Eliminar
    3. No importan dónde tengas alojadas las imágenes siempre que tengan las extensiones normales: .jpg, .gif, .png, etc.

      Sigue en el otro post si continúas con los problemas, pero dame algún detalle más que me pueda servir de pista en ese caso.

      Eliminar
  27. pero esk... los links no llevan a las imagenes, por ejemplo, uso una imagen y le pongo el enlace a mi facebook, osea, no termina en ninguna extención de imagen... con ese truco solo le quita el borde a las imagenes de blogspot :/ mira te dejo mi blog y lo chekas -> http://lesliemishigan.blogspot.mx/

    Gracias por responderme ^^

    ResponderEliminar
  28. también apliqué la propiedad z-index en algunos elementos... eso podría estar delimitanto propiedades? ... se lo apliqué a las entradas, los elementos del lado derecho e izquierdo tambien, recuerdo que si no les ponia esa propiedad, por ejemplo, los enlaces no eran válidos o no servían, tuve que aplicar eso para que sirvieran...

    ResponderEliminar
    Respuestas
    1. He visto algunas páginas de tu blog y no he encontrado ninguna con ese tipo de enlaces. Pásame una dirección que tenga alguno.

      Eliminar
  29. Se pueden copiar los codigos de estos ejemplos para una web propia???

    ResponderEliminar
    Respuestas
    1. Si es para usarlos tú, sin problemas y si lo que quieres decir es que te gustaría replicar parte de este artículo en tu sitio, pues también sin problemas. Lo único es que en el segundo caso, se agradecería un enlace como referencia ;)

      Eliminar
  30. Quiero usar el #31 pero no tengo idea de como hacerlo funcionar, creo que lo coloque en el sitio menos indicado. ¿Alguna ayuda?

    ResponderEliminar
  31. Los dos primeros marcados como (31) van en la parte CSS (plantilla) y el que pone (31 HTML) es el código que habría que escribir en una entrada o en un gadget para que fuera visible el efecto.

    ResponderEliminar
    Respuestas
    1. Hola
      Ya se que este post es viejo pero capaz alguien me puede ayudar!!!
      necesito saber como hago para que el (31) funcione en todos los browsers(Chrome, explorer,Zafari,etc.)

      Muchas gracias!!!

      Eliminar
    2. Si ves este mismo post en esos navegadores, creo que todos los efectos funcionan ¿no?

      Eliminar
  32. hola amigo quiero colocar el numero 2 a mi post pero no se como colocarlo , porfavor ayudame , excelente post

    ResponderEliminar
    Respuestas
    1. Rec Droide, simplemente tienes que añadir esas dos líneas de código a tu plantilla, en la parte CSS, esto es, entre las dos etiquetas SKIN. Mejor al final para que no tengas que buscar las que seguramente ya tendrás para definir el estilo de los enlaces.

      Eliminar
  33. Hola Oloman,
    ¿Como puedo aplicar cualquiera de estos efectos solo a los enlaces que aparecen en lo artículos? Sin que afecte a los títulos de los artículos en el home ni a los enlaces que aparecen en los witgets. Es para blog con Wordpress y theme Customizr. Gracias

    ResponderEliminar
    Respuestas
    1. En las plantillas de Blogger sería cambiando la "a" por ".post-body a" y así sólo atacamos los enlaces del cuerpo de las entradas, pero no sé qué clases utiliza esa plantilla que dices. Si me pasas un enlace a un blog que esté en marcha con ella probablemente podré concretar más.

      Eliminar
  34. Hola me interesa mucho el codigo 31 pero lo pongo en el blog y no me funciona me podria dar alguna solucion por favor.

    ResponderEliminar
    Respuestas
    1. Hola. Si pones el CSS que se indica luego sólo es cuestión de que tus enlaces tengan la forma:
      Este es un <a href="javascript:void();">enlace con mensaje emergente<span>¿A qué esperas para ver esto?</span></a>

      Aunque por lo que he visto al principio de tu blog, quizás te interese más este otro artículo.

      Eliminar
  35. ¡Hola! El post es antiguo pero espero que alguien conteste; ¿se puede cambiar el color de la sombra del enlace 23 para hacerla un poquito más clara? Muchas gracias de antemano ☺

    ResponderEliminar
    Respuestas
    1. Erika, en esta parte, cambia el color de la sombra (#aaa) por el que quieras:
      a:hover { text-shadow: 2px 2px 2px #aaa; }

      Eliminar