Foros del Web » Creando para Internet » CSS »

Mouse over en botones y div redondeado

Estas en el tema de Mouse over en botones y div redondeado en el foro de CSS en Foros del Web. hola!. me gustaria conseguir botones de este tipo: http://i32.tinypic.com/dy89cx.png ¿puedo definirlo con css facilmente? y ademas me pregunto como hacer efecto mouse over sin usar ...
  #1 (permalink)  
Antiguo 06/09/2009, 16:31
 
Fecha de Ingreso: febrero-2009
Mensajes: 202
Antigüedad: 8 años, 10 meses
Puntos: 3
Mouse over en botones y div redondeado

hola!.
me gustaria conseguir botones de este tipo:
http://i32.tinypic.com/dy89cx.png
¿puedo definirlo con css facilmente?

y ademas me pregunto como hacer efecto mouse over sin usar HTML, yo uso este code:
Código HTML:
<img src="URL" onmouseover="this.src='URL';" onmouseout="this.src='URL';" border="0"> 
pero el cambio de una imagen a otra es muy lento. en cambio en sitios como este:
http://jquery.com/ (ver boton a la derecha "download jquery") el cambio es automatico y segun veo no esta definido con html... me gustaria saber como hacerlo.

¡muchas gracias!
  #2 (permalink)  
Antiguo 06/09/2009, 17:16
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: Mouse over en botones y div redondeado

Hola Ozone:

Cita:
Iniciado por Ozone Ver Mensaje
hola!.
me gustaria conseguir botones de este tipo
http://ceslava.com/blog/esquinas-red...border-radius/

Puedes definirlo con css3 y esto implica que no todos los navegadores lo puedan renderizar.

Cita:
Iniciado por Ozone Ver Mensaje
como hacer efecto mouse over
utilizando la pseudoclase :hover

El modo tradicional de hacerlo es creando una lista no ordenada e incluyendo las imagenes como fondo de un item de esa lista

ESTRUCTURA en BODY
<ul>
<li>
<a href="#" id=""></a>
</li>
</ul>

ESTILOS en HEAD
li {
background-image: url(Large.gif);
width:ancho_de_tu_imagen_px;
height:alto_de_tu_imagen_px;
background-repeat:no-repeat;
list-style:none;
}
li:hover {
background-image: url(Large2.gif);
width:ancho_de_tu_imagen_px; ;
height:alto_de_tu_imagen_px; ;
background-repeat:no-repeat;
list-style:none;
}


Pero si analizas el ejemplo que citas verás que la solución que te pasé no es igual al método que utilizan en la página de JQuery, pues aquí usan Sprites CSS
Puedes hacerlo en un principio con el metodo que te pase y luego avanzar en el uso de sprites que es lo que se aconseja.

Aquí puedes aprender al respecto
http://www.pixelovers.com/css-sprite...to-web-i-37249

Saludos!
  #3 (permalink)  
Antiguo 06/09/2009, 17:33
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Mouse over en botones y div redondeado

mira esta aplicacion es sencillo
http://ponguapotublog.blogspot.com/2...o-con-css.html
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 10:26.