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.
- Este es un enlace plano subrayado sin efecto hover.
- Este es un enlace que cambia a subrayado.
- Este es un enlace en el que desaparece el subrayado.
- Este es un enlace que cambia de color.
- Este es un enlace que cambia de color y desaparece el subrayado.
- Este es un enlace con borde discontinuo abajo que cambia a continuo.
- Este es un enlace con borde continuo abajo que cambia a discontinuo.
- Este es un enlace sin subrayado que cambia de color.
- Este es un enlace que cambia su color de fondo.
- Este es un enlace con borde punteado abajo que cambia a continuo.
- Este es un enlace que cambia a multicolor.
- Este es un enlace que aparece con una línea superior.
- Este es un enlace que aparece subrayado y con una línea superior.
- Este es un enlace que aparece con un borde superior y otro inferior.
- Este es un enlace que aparece con un borde que lo rodea.
- Este es un enlace con cambio de color de texto y fondo.
- Este es un enlace con cambio de color mediante transición.
- Este es un enlace con cambio de color y fondo mediante transición.
- Este es un enlace cuyo estilo cambia a negrita.
- Este es un enlace que sale con efecto "tachado".
- Este es un enlace cuyo estilo cambia a cursiva.
- Este es un enlace con cambio de texto a pequeñas mayúsculas (small-caps).
- Este es un enlace que incorpora sombras de texto.
- Este es un enlace que aparece en una caja redondeada con color de fondo.
- Este es un enlace en el que aparece el destino.
- Este es un enlace con borde inferior discontinuo y cambios de color.
- Este es un enlace cuya separación entre caracteres cambia.
- Este es un enlace el que aparece un icono.
- Este es un enlace que toma forma de flecha.
- Este es un enlace que se acerca.
- 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://www.fileden.com/files/2009/9/13/2573667/iconos/external.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>.
(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://www.fileden.com/files/2009/9/13/2573667/iconos/external.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?
Excelente Oloman!
ResponderSuprimirSaludos :)
Coincido contigo Graciela, excelente entrada Oloman :)
SuprimirGracias, me apunto al 24.
ResponderSuprimirQue interesante!!! Muy buena estrada! Muy completa, para todos los gustos!
ResponderSuprimirMe encantó el de transiciones!!!
ResponderSuprimirGracias Oloman estoy modificando mi plantilla y esto me cae bien. Me gusto mucho el 24.
ResponderSuprimir¡Vaya recopilación!
ResponderSuprimirSaludos 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?.
ResponderSuprimirGracias de antemano.
El blog es http://luisbarcenagimenez.blogspot.com/
Lo he arreglado parcialmente reduciendo el padding.
SuprimirUn saludo.
Otra solución: Cambia el padding al a:hover y así sólo te dejará ese margen cuando se pase el puntero por encima.
SuprimirY 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.
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?.
SuprimirGracias.
Buscando un poco más encontré la información. (Está claro que necesito un curso). Creo que ahora me ha quedado mejor que antes.
SuprimirUn saludo y reitero mi agradecimiento.
No hay de qué... literalmente ;)
SuprimirExcelente amigo! Gracias +1
ResponderSuprimirpor dios! gracias man a falta de otra palabra.
ResponderSuprimirGraciasss, 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
ResponderSuprimirYa 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
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é.
SuprimirLa 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.
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.
SuprimirAdemá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
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.
SuprimirOtra 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 ;)
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
SuprimirVoy 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
el tema de cache que suele salir en pagespeed es incontrolable por nuestra parte, suelen ser de elementos externos que no podemos controlar...
SuprimirCarlos, muchas gracias por la aclaración
SuprimirOlomá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
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.
SuprimirY 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.
Excelente! Gracias por la información.
ResponderSuprimirque 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... :)
ResponderSuprimirvoy a mirar tu blog en IE 7... muha ha ha ha ha
ResponderSuprimirEres muy malo :) De todas formas creo que aún no viéndose igual de bien, el resultado es digno.
SuprimirMe encantaaa!!!!.Gracias!!!!!
ResponderSuprimir¡Muchas Gracias! Probaré unos cuantos para ver cual le queda mejor a mi blog.
ResponderSuprimirGracias me funco salu2!
ResponderSuprimirOloman 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?
ResponderSuprimirEn 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:
Suprimir.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.
Oloman, ¿Como puedo hacer para colocarselo a una imgen con enlace? saludos :)
ResponderSuprimiraaah, ¿Y, como hago para aplicarlo individualmente?
SuprimirLa 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.
SuprimirPara 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>
Justamente todo lo que necesitaba!!!, gracias por la ayuda :D Saludos
Suprimir¡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...)
ResponderSuprimirCreo entender lo que me dices pero cuando he visto algo parecido, estaba hecho con alguna librería JavaScript. Aquí he encontrado varios:
Suprimirhttp://www.intenseblog.com/design/8-amazing-javascript-image-zoom-scripts.html
Muchas gracias Oloman, le echaré un vistazo al material. ¡Muy amable!
SuprimirDisculpa 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.
ResponderSuprimirEn la parte CSS. En Blogger, entre las dos etiquetas SKIN.
SuprimirHola, 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.
ResponderSuprimirSi lo quieres aplicar a todos tus enlaces sólo tienes que copiar esto en tu parte CSS (antes del cierre del SKIN):
Suprimira { 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.
Ahora lo hago, muchisimas gracias :)
Suprimir