Foros del Web » Creando para Internet » CSS »

Efecto de "aura" en elementos de menú

Estas en el tema de Efecto de "aura" en elementos de menú en el foro de CSS en Foros del Web. Hola amigos, el caso es que vi en una página dicho efecto, y según parece usa javascript. Básicamente lo que hace es que parece que ...
  #1 (permalink)  
Antiguo 15/06/2010, 05:21
 
Fecha de Ingreso: diciembre-2009
Mensajes: 27
Antigüedad: 8 años
Puntos: 0
Efecto de "aura" en elementos de menú

Hola amigos, el caso es que vi en una página dicho efecto, y según parece usa javascript. Básicamente lo que hace es que parece que el botón brilla al pasar el ratón por encima. Alguien tiene idea de si es posible hacer con css?. He mirado dentro de los foros y en la red, pero no encuentro nada parecido. Más que nada necesito saber a grandes rasgos cómo se hace este tipo de efecto, para ser más específico en las busquedas.
Un saludo!!!
  #2 (permalink)  
Antiguo 15/06/2010, 16:01
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Efecto de "aura" en elementos de menú

Me imagino que lo que quieres es un :hover: http://librosweb.es/css_avanzado/cap...active_y_focus

Saludos
__________________
Grupo Telegram Docker en Español
  #3 (permalink)  
Antiguo 15/06/2010, 16:08
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Efecto de "aura" en elementos de menú

Saludos!

No tiene mucho que ver directamente con lo que pides, ya que Carlangueitor te ha contestado correctamente. Lo que te recomiendo es, cuando tengas problemas con algun tipo de menú o cuando quieras ver como se hacen ciertos efectos con CSS, pases por http://araudi.net, un sitio dedicado a efectos con CSS.

Hasta Luego!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #4 (permalink)  
Antiguo 16/06/2010, 02:12
 
Fecha de Ingreso: diciembre-2009
Mensajes: 27
Antigüedad: 8 años
Puntos: 0
Respuesta: Efecto de "aura" en elementos de menú

Vale muchisimas gracias por las respuestas. Estudiare los links que me habeis mandado y ya os cuento.
Un saludo!
  #5 (permalink)  
Antiguo 16/06/2010, 09:53
 
Fecha de Ingreso: diciembre-2009
Mensajes: 27
Antigüedad: 8 años
Puntos: 0
Respuesta: Efecto de "aura" en elementos de menú

Hola, ya he leido bien los scripts que me comentasteis, la verdad es que el enlace a los ejemplos de css me ha venido muy bien para aplicar mas adelante, pero no he encontrado el efecto que exactamente necesito. Me refiero a un aura, rodeando el texto, que hace que parezca que esta brillando. Según he estado leyendo en este mismo foro, parece que en css está dificil la cosa. Alguno sabe si es posible de verdad ese efecto con css?. Es necesario tirar de javascript?
Un saludo!!!
  #6 (permalink)  
Antiguo 16/06/2010, 11:10
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Efecto de "aura" en elementos de menú

Saludos!

Seguramente el efecto que viste, fue una etiqueta <a> que tenía una imagen al pasar el cursor por encima. Recuerda que con la propiedad a:hover, puedes hacer que una imagen se sobreponga a la imagen de fondo al pasar el cursor por el enlace. Sinceramente, no he visto que JavaScript haga tal cosa (Y si lo hiciera, seguiría siendo mejor hacerlo con imágenes y CSS Sprites)

Hasta Luego!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #7 (permalink)  
Antiguo 17/06/2010, 09:14
 
Fecha de Ingreso: diciembre-2009
Mensajes: 27
Antigüedad: 8 años
Puntos: 0
Respuesta: Efecto de "aura" en elementos de menú

Pero entonces, si uso una imagen, el div donde la ponga, en este caso un <li>, tendra que tener una dimension fija, no?. Otra duda es si tendria que aplicar transparencia a esa imagen para que el efecto desapareciera al pasar el raton por encima.(ese fue el efecto que vi yo, lo que pasa es que la pagina al descargarla, no se descargo entera ya que habia partes aspx, pero por lo que pude ver creo que implementaba algo de javascript.).
  #8 (permalink)  
Antiguo 17/06/2010, 11:02
 
Fecha de Ingreso: diciembre-2009
Mensajes: 27
Antigüedad: 8 años
Puntos: 0
Respuesta: Efecto de "aura" en elementos de menú

Hola otra vez, leyendo el código de la página en cuestión, he observado, que efectivamente, el efecto de aura lo hace cargando dos gifs, para cada uno de los estados(mouseover y mouseout). Navegando en la red, he encontrado esta página que a lo mejor le puede servir a alguien mas: http://www.grsites.com/generate/generator/?parentresultid=6882387. Es un generador de botones, el cual es capaz de generarte un boton usando javascript y usando dos gif. Ahora mi pregunta es la siguiente: ¿Puedo en lugar de llamar al código directamente desde el <a>(un link), usar los dos gifs para cada uno de los estados en css?, es decir, uno para la funcion en nornal y el otro para la hover?.
Un saludo!!!
  #9 (permalink)  
Antiguo 17/06/2010, 17:31
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Efecto de "aura" en elementos de menú

Saludos!

Mira, sinceramente con CSS puedes hacer todo lo que quieras, hasta donde tu imaginación lo permita. Para hacer algo como lo que pides, se me ocurre un codigo rapido (Digo rapido porque estoy algo atareado por aca...)

Código CSS:
Ver original
  1. a {
  2. display: block;
  3. width: 100px;
  4. height: 100px;
  5. background: url(img.jpg);
  6. }
  7. a:hover {
  8. background: url(imghover.jpg);
  9. }

Siendo img.jpg la imagen normal y imghover.jpg la imagen que aparecerá cuando te pongas sobre el enlace.

Te recomiendo que visites este sitio y aprendas un poco mas sobre las La pseudo clases
Hasta Luego!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #10 (permalink)  
Antiguo 25/06/2010, 09:44
 
Fecha de Ingreso: diciembre-2009
Mensajes: 27
Antigüedad: 8 años
Puntos: 0
Respuesta: Efecto de "aura" en elementos de menú

Gracias por las respuestas, al final lo he resuelto creando dos imágenes diferentes en fireworks(ficheros png) y usando una en el menu cuando está quieto, y la que lleva el brillo cuando se pone el ratón pór encima(hover). En iexplore he corregido el error de las transparencias simplemente poniendole alrededor el mismo color que se supone que tendria si mostrara correctamente la transparencia. Lo comento por si a alguien le pasa en un futuro, ya que el hack para poder usar pngs transparentes en ie a mi no me ha funcionado(y he probado 3 distintos)
Un saludo!

Etiquetas: efecto, elementos
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:23.