Bienvenido, invitado Ingresar o Registrarse
| | MARCADOR
| LENGUAJE:
 


marcador:
RSS 1.0     RSS 2.0

Vistas Totales: 2337 - Respuestas Totales: 4

PUBLICADO POR: ChaKaL on 05/08/2013 16:04:56


                                       ¿que son los efectos hover?

                                                            by

                                             3N1GM4


los efectos hover son alteraciones en el aspecto de un elemento al pasar el cursor sobre ellos.

tal y como nuestra amiga patri puso un codigo para poner una imagen de fondo en los links al pasar el cursor sobre ellos eso es un efecto hover en css.

pero solamente eso podemos hacer? claro que no.

podemos hacer muchas mas cosas y no solamente con los enlaces si no que podemos darles efectos hover a cualquier elemento de la pagina

podemos cambiar su color, tamaño, colocar una imagen de fondo, y en el caso de las fuentes cambiar su estilo, pero aun podemos hacer muchas mas cosas y gracias a los nuevos estandares del nuevo css3 ahora podemos hacer cosas que antes solo podiamos imaginar tales como  rotar, redondear bordes, moverlo, escalar su tamaño y muchas otras cosas

veamos unos ejemplos de efectos hover




como pueden ver en la primera imagen  el color de la cabezera es gris y al pasar el cursor encima cambia el color a un verde lima acabamos de hacer un efecto hover y con el simple codigo de abajo



.mainmenu5:hover {

    background-color:#3bd611;

}

 como se daran cuenta  la unica diferencia es que adelante del nombre de la etiqueta o del indentificado o del nombre de la clase separandolos con dos puntos colocamos  el nombre de la orden "hover"  con lo cual provocamos un evento al pasar  el cursor sobre dicho elemento facil no ?

si quisieramos en lugar de cambiar  el color hacer que aparesca una imagen simplemente cambiariamos la orden background-color  por la orden background-image como en la siguiente imagen y colocar la url de la imagen que quiere que aparesca yo puse una que coloco patri que me gusto mucho gracias patri 



mainmenu5:hover {

    background-image:url(http://www.imagenzone.net/gifs-animados/Clima/Rayos/Rayo-06.gif);

}



ahora veamos algunas de las nuevas propiedades de css3 tal como  box-shadow la cual nos permite crear una sombra alrededor de una caja. aqui tengo que aclarar algo importante...aunque los nuevos estandares de css3 ya son soportados por los navegadores mas modernos algunas versiones antiguas o ciertas nuevas reglas del css3 nesesitan un prefijo para poder ser visualizados correctamente en cada navegador a continuacion pondre los prefijos de los navegadores mas usados y a continuacion  la imagen de la propiedad box-shadow.

-moz-      (mozilla firefox)

-webkit-   (chrome y safari)

-ms-       ( internet explorer)

-o-        (opera)




.mainmenu5:hover{

-moz-box-shadow: 0px 0px 40px #3bd611; 

-webkit-box-shadow: 0px 0px 40px #3bd611; 

box-shadow: 0px 0px 40px #3bd611;

}


como se pueden dar cuenta en la imagen la propiedad box-shadow nos crea un resplandor y como veran igual no use todos los prefijos solamente el de mozilla  y el de safari y chrome no siempre es nesesario poner todos los prefijos pero si no estamos seguros de cuando usarlos es bueno que visitemos la pagina de  la w3  http://www.w3schools.com/css3/  alli seleccionamos nuestro idioma para poder entenderlo y nos  dice cuales navegadores soportan  cierta propiedad o cual navegador nesesita un prefijo para funcionar correctamente


¿podemos usar mas de una propiedad para el efecto hover?

claro que podemos usar mas de una propiedad  por ejemplo si queremos que al pasar el cursor cambie de color y ademas tener un efecto de resplandor  como en la siguiente imagen el codigo seria el siguiente



.mainmenu5:hover {

    background-color:#3bd611;

    -moz-box-shadow: 0px 0px 40px #3bd611; 

-webkit-box-shadow: 0px 0px 40px #3bd611; 

box-shadow: 0px 0px 40px #3bd611;


}


otro  ejemplo de efecto hover usando varias propiedades seria la siguiente


img:hover{

box-shadow: 0px 0px 30px #FF0000;

-moz-box-shadow: 0px 0px 30px  #FF0000; 

-webkit-box-shadow: 0px 0px 30px  #FF0000; 

transform:scale(1.5,1.5);

-webkit-transform:scale(1.5,1.5);

-moz-transform:scale(1.5,1.5);

-o-transform:scale(1.5,1.5);

-ms-transform:scale(1.5,1.5);

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

}

como pueden ver en esta ocacion use tres propiedades el resplandor (box-shadow) el efecto lupa para agrandar la imagen (transform:scale) y los bordes redondeados (border-radius)

como pueden ver se pueden hacer varios efectos con la propiedad hover y con los nuevos estandares de css3 y con un poco de imaginacion se pueden hacer cosas realmente sorprendentes por ultimo dejare una ultima imagen  y el codigo para hacer girar completamente un elemento en este caso la cabezera usando  la propiedad @keyframe y hover  la propiedad keyframe es una propiedad que nos ayuda a crear animaciones en css3 y con la propiedad hover desencadenamos dicha animacion  al pasar el cursor sobre el espero les sea de ayuda hasta la proxima




@-webkit-keyframes roll {  

 from { -webkit-transform: rotate (0deg) }

 to   { -webkit-transform: rotate(360deg) }

}

@-moz-keyframes roll {  

 from { -moz-transform: rotate (0deg) }

 to   { -moz-transform: rotate (360deg) }

}

@keyframes roll {

 from { transform: rotate (0deg) }

 to   { transform: rotate (360deg) }

}

.mainmenu5:hover {

 -moz-animation-name: roll;

 -moz-animation-duration: 5s;

 -moz-animation-iteration-count: 1;

 -webkit-animation-name: roll;

 -webkit-animation-duration: 5s;

 -webkit-animation-iteration-count: 1;



}






PUBLICADO POR: Crucigrama on 05/08/2013 21:52:50


Chakalito, una vez mas te luciste 

Hay una parte que no comprendo bien y es cuando hablas de los prefijos 

"como se pueden dar cuenta en la imagen la propiedad box-shadow nos crea un resplandor y como veran igual no use todos los prefijos solamente el de mozilla  y el de safari y chrome no siempre es nesesario poner todos los prefijos pero si no estamos seguros de cuando usarlos es bueno que visitemos la pagina de  la w3  http://www.w3schools.com/css3/  alli seleccionamos nuestro idioma para poder entenderlo y nos  dice cuales navegadores soportan  cierta propiedad o cual navegador nesesita un prefijo para funcionar correctamente"


mi pregunta es.....  no es suficiente con copiar y pegar en la cajita de los Css  el efecto, hay que descargar a nuestro pc lo que mencionas como " prefijos "

 espero puedas despejar mis dudas

Gracias de ante mano  


Nota: dejo este link como aporte de lso colores 

http://html-color-codes.info/codigos-de-colores-hexadecimales/





--------------------------------------------------------------
Volver Arriba




PUBLICADO POR: ChaKaL on 05/08/2013 22:23:49


no es nesesario descargar nada es puro codigo los prefijos son solamente codigos que se ponen antes del codigo para que cada navegador lo pueda interpretar

se supone que hasta el 2014 deben estar ya listos completamente los nuevos estandares pero por mientras debemos colocar esos prefijos en algunas ordenes del nuevo standar

pongamos un ejemplo el efecto para los bordes redondeado debe ser asi


border-radius:10px;


pero al no estar estandarizado  como una orden para todos los navegadores  algunas veces debemos usar los prefijos como en el siguiente ejemplo


-webkit-border-radius:10px


como se dan cuenta lo unico que agruegue fue el prefijo -webkit- que coresponde al safari y chrome

de esa manera estan los demas prefijos para los navegadores mas usados 

-moz-      (mozilla firefox)

-webkit-   (chrome y safari)

-ms-       ( internet explorer)

-o-        (opera)

por eso mencione que no todas las nuevas propiedades nesesitan usar  prefijo algunos navegadores ya lo soportan de forma nativa pero si no estamos seguros la pagina anterior nos sirve de guia  espero a ver aclarado 

Volver Arriba




PUBLICADO POR: Crucigrama on 05/08/2013 23:05:39


Gracias Chakalito ... siempre tan gentil,  ahora si comprendi todo 





--------------------------------------------------------------
Volver Arriba




PUBLICADO POR: ChaKaL on 06/03/2013 14:28:31


veo que lo pudistes resolver patri con un poquito de paciencia saluditos 

Volver Arriba
10/17/2017



*** Redplanetachat ***
redplanetachat