Ver la versión completa : Halluda con CSS
buba-ho-tep
21/02/2013, 00:00
Hola,
estoy atascado por un tontería con mi pagina web. Quiero hacer que cuando pase el ratón por los enlaces que tenga estos se eleven un poco por encima.
Alguien sabe que linea de código es por favor? He probado con translation en el a:hover y no me funciona. :confused:
josepzin
21/02/2013, 00:31
Position:relative; top:-10px;
buba-ho-tep
21/02/2013, 07:22
Position:relative; top:-10px;
Es eso pero no queda bien el efecto pero gracias de todos modos.
josepzin
21/02/2013, 08:26
Lo que tu quieres es la "transición suave" ¿verdad?
Tienes que decirle en el estado "normal" que es una transition y mas cosas, por ejemplo: transition: all 300ms ease-out 20ms;
Aqui tienes un ejemplo, aunque con un monton de movidas segun el explorador: http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=CSS3TransicionesAnimaciones
Yo usaría solo las Default:
/* Default */
transition-property: all;
transition-duration: 300ms;
transition-timing-function: ease-out;
transition-delay: 20ms;
buba-ho-tep
21/02/2013, 17:23
Merci. Cuando llegue a casa lo miraré aunque creo que se desplazará toda la pestaña y yo solo quiero el enlace de texto.
Monguer Guaper
21/02/2013, 18:14
Puedes crear un fiddle con tu codigo?
http://jsfiddle.net/
Escribes ahí el html y el css y vemos más en detalle como poder halludarte.
buba-ho-tep
21/02/2013, 18:30
http://jsfiddle.net/Dellamorte/2sjT5/
Aquí están las pestañas de los menús. Son una lista desordenada makeada con css. Me gustaria que el texto subiera hacia arriba con el :mover
Monguer Guaper
21/02/2013, 18:43
http://jsfiddle.net/2sjT5/1/
A ver si es esto lo que buscas, básicamente es lo que te había dicho josezpin.
Además te he limpiado un poco el css con cosas que no deberían estar por ahí.
-----Actualizado-----
No obstante te hago una recomendación personal, y es hacer que el link ocupe toda la pestaña en lugar de que solo el texto sea clickeable. Si quieres al llegar a casa te pongo un ejemplo.
buba-ho-tep
21/02/2013, 18:45
http://jsfiddle.net/2sjT5/1/
A ver si es esto lo que buscas, básicamente es lo que te había dicho josezpin.
Además te he limpiado un poco el css con cosas que no deberían estar por ahí.
-----Actualizado-----
No obstante te hago una recomendación personal, y es hacer que el link ocupe toda la pestaña en lugar de que solo el texto sea clickeable. Si quieres al llegar a casa te pongo un ejemplo.
Sí. Es eso. La parte que has eliminado es para que cuando pase el ratón cambie la pestaña de rojo a blanco. Algo que, misteriosamente, no se ha reflejado.
Monguer Guaper
21/02/2013, 18:53
Sí. Es eso. La parte que has eliminado es para que cuando pase el ratón cambie la pestaña de rojo a blanco. Algo que, misteriosamente, no se ha reflejado.
Ah perdona, como no funcionaba lo quite.
Ahora te lo añado. El problema es que estabas cambiando el color de fondo del texto, no el de la pestaña, por eso no te estaba funcionando.
buba-ho-tep
21/02/2013, 19:07
Ah perdona, como no funcionaba lo quite.
Ahora te lo añado. El problema es que estabas cambiando el color de fondo del texto, no el de la pestaña, por eso no te estaba funcionando.
Te lo agradezco. Tampoco me funciona una cabecera en Flash que he hecho. He importado el swf desde el Dreamweaver y no se me carga en ningún navegador... [Ahhh]
josepzin
21/02/2013, 19:13
Tampoco me funciona una cabecera en Flash que he hecho. He importado el swf desde el Dreamweaver y no se me carga en ningún navegador... [Ahhh]
Si puedes, evita usar Flash para la web, a menos que sea imprescindible!
Monguer Guaper
21/02/2013, 19:16
Prueba a ver si esto es lo que quieres.
http://jsfiddle.net/2sjT5/8/
Me he tomado la libertad de hacer que toda la pestaña sea clickeable y he ordenado un poco el css.
enkonsierto
21/02/2013, 19:19
Me he permitido cambiar las esquinas redondeadas de las pestañas, que me parece que los dos lados de arriba son los que deben ir redondeados.
Me he fijado que usas valores de posición absolutos que no te están sirviendo de nada, no sé si es cosa del dreamweaver, pero se pueden quitar perfectamente.
buba-ho-tep
21/02/2013, 19:21
Si puedes, evita usar Flash para la web, a menos que sea imprescindible!
Lo es y no puedo verlo. No sé qué pasa...
Prueba a ver si esto es lo que quieres.
http://jsfiddle.net/2sjT5/8/
Me he tomado la libertad de hacer que toda la pestaña sea clickeable y he ordenado un poco el css.
Perfecto. Queda muy chulo. Ahora le pondre un padding para separar las pestañas y ya está. Muchas gracias!!
Monguer Guaper
21/02/2013, 19:56
Me he permitido cambiar las esquinas redondeadas de las pestañas, que me parece que los dos lados de arriba son los que deben ir redondeados.
Me he fijado que usas valores de posición absolutos que no te están sirviendo de nada, no sé si es cosa del dreamweaver, pero se pueden quitar perfectamente.
No me está funcionando el fiddle, asi que lo pego en css desk.
Como me aburro he seguido toqueteando esto. Asi quedaría como dice enkonsierto, y además he tocado un poco las sombras y la fuente para que sea todo un poco más legible
http://cssdesk.com/BMnKQ
-----Actualizado-----
Venga, y este último y ya lo dejo :D
http://cssdesk.com/3aF8v
buba-ho-tep
21/02/2013, 20:11
No entiendo muy bien la función del span. Sé que peco de ignorante pero no me lo han enseñado y nunca lo he usado.
Sabeis alguna pagina en la que ver/aprender algo de diseño elegante con html5+css3?
Monguer Guaper
21/02/2013, 20:16
No entiendo muy bien la función del span. Sé que peco de ignorante pero no me lo han enseñado y nunca lo he usado.
El span simplemente sirve para delimitar un trozo de texto y asi poder asignar un estilo diferente.
Lo he puesto porque como ahora el link (<a>) ocupa toda la pestaña, si desplazas el link con el hover se movería toda la pestaña hacia arriba (y creo haber entendido que no quieres eso)
Sin embargo si metemos solo el texto dentro de un span, podemos mover el span hacia arriba sin que se mueva el link que lo envuelve.
Animo con el css, al principio es un infierno enterarte de por que pasan las cosas y de en que elemento es mejor poner cada atributo, pero en cuanto le coges el truco es muy divertido :D
josepzin
21/02/2013, 20:44
Animo con el css, al principio es un infierno enterarte de por que pasan las cosas y de en que elemento es mejor poner cada atributo, pero en cuanto le coges el truco es muy divertido :D
+1 y totalmente de acuerdo!
-----Actualizado-----
Por cierto, yo paso totalmente de poner esas movidas tipo " -webkit", uso directamente border-radius o box-shadow
buba-ho-tep
21/02/2013, 20:48
¿Sabéis de algún motivo por el cual no se pueda ver un archivo Flash swf?
He tenido que hacer un montaje cutre de ultima hora con photoshop para no quedarme sin cabecera...
-----Actualizado-----
El span simplemente sirve para delimitar un trozo de texto y asi poder asignar un estilo diferente.
Lo he puesto porque como ahora el link (<a>) ocupa toda la pestaña, si desplazas el link con el hover se movería toda la pestaña hacia arriba (y creo haber entendido que no quieres eso)
Sin embargo si metemos solo el texto dentro de un span, podemos mover el span hacia arriba sin que se mueva el link que lo envuelve.
Animo con el css, al principio es un infierno enterarte de por que pasan las cosas y de en que elemento es mejor poner cada atributo, pero en cuanto le coges el truco es muy divertido :D
Mola mucho y es muy viciante, la verdad.
josepzin
21/02/2013, 20:51
Para mostrar los SWF yo uso esto:
* Flash (http://jquery.lukelutman.com/plugins/flash)
* A jQuery plugin for embedding Flash movies.
Monguer Guaper
21/02/2013, 21:00
No te va el flash en ningún navegador?
buba-ho-tep
21/02/2013, 21:18
No te va el flash en ningún navegador?
No y me está sacando de quicio. Al final lo quitaré.
josepzin
21/02/2013, 21:28
No y me está sacando de quicio. Al final lo quitaré.
Si es para un cliente, dile que "está optimizado para tabletas, ipads y moviles" :D :D
buba-ho-tep
21/02/2013, 21:36
Si es para un cliente, dile que "está optimizado para tabletas, ipads y moviles" :D :D
jajajajaja Pues sí.
Puedes crear un fiddle con tu codigo?
http://jsfiddle.net/
Escribes ahí el html y el css y vemos más en detalle como poder halludarte.
Gracias.
No lo conocia y creo que le voy a dar muchisimo uso
Monguer Guaper
22/02/2013, 08:28
Gracias.
No lo conocia y creo que le voy a dar muchisimo uso
Si solo lo quieres para css y html es mejor cssdesk, porque puedes ver los cambios en tiempo real.
Pero si necesitas javascript, pues el jsfiddle es la caña :D
Powered by vBulletin® Version 4.2.5 Copyright © 2025 vBulletin Solutions Inc. All rights reserved.