Últimos temas
» firmitaparadave
Sáb Jul 09, 2016 10:21 pm por Admin

» foro de prueba
Miér Mar 09, 2016 5:49 pm por Admin

» header carrusel
Miér Mar 09, 2016 12:36 am por Admin

» Tablillas!!!
Vie Ene 22, 2016 4:12 pm por Devisser Groen

» hoveeeeeeeeer
Lun Ene 11, 2016 12:17 am por Admin

» Codigos!!!!!
Lun Ene 04, 2016 4:24 pm por Devisser Groen

» Tu primer tema
Jue Dic 17, 2015 4:32 pm por Admin


hoveeeeeeeeer

Ver el tema anterior Ver el tema siguiente Ir abajo

hoveeeeeeeeer

Mensaje por Admin el Dom Ene 10, 2016 9:43 pm

Para empezar, necesitamos, por supuesto, una imagen. Yo voy a usar esta, porque es la que tengo más a la mano en este momento. Ahora sí, ¡empezamos!
1. Aunque puedes poner la imagen con la baliza img, es más fácil manejarla si está como fondo en una capa. Así que eso es lo primero que haces

Es muy importante, repito, MUY importante, que le pongan un class o un id a ese div. Sé que puede parecer muy básico, pero prefiero explicar de más a explicar de menos. Así que debe quedar más o menos así:
CODE: SELECCIONAR TODO

En el CSS agregas el ancho y el alto de tu imagen con las propiedades width y height. También es deseable que si, por ejemplo, quieres que el contenido aparezca deslizándose, le pongas un position:relative; y un overflow:hidden;. El segundo es para que nada que se salga de los bordes del gif se muestre.

¡Recuerda! El CSS de tu tablilla lo puedes poner, arriba de la tablilla entre las siguientes etiquetas:
CODE: SELECCIONAR TODO


2. Muy bien, ahora sigamos. Dentro de ese div con fondo de imagen vas a crear un div más, que es el que va aparecer y desaparecer cuando pases el mouse por encima.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut egestas dui. Mauris ac luctus metus. Curabitur ornare facilisis ligula non iaculis. Duis ac purus ut nunc semper porta

A ese fondo, de momento, le pueden poner las características que ustedes quieran, color de fondo, texto, bordes, sin bordes, etc. Sólo recuerden que su tamaño NO debe exceder, de preferencia, al otro div.

3. ¡Ahora así! A hacer el hover. Para hacer un hover existe un pseudo selector en CSS que se llama así y se pone adelante de la clase del div sobre el cual, al hacer hover, se hará el cambio. En nuestro caso, debe quedar así:
CODE: SELECCIONAR TODO
.divDeLaImagen:hover .elOtroDiv{}
Yo haré el hover más sencillo, que es con el atributo opacity. Por ello, al CSS del div del texto le pondré un opacity:0.0; y, cuando haga el hover, opacity:1.0;.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut egestas dui. Mauris ac luctus metus. Curabitur ornare facilisis ligula non iaculis. Duis ac purus ut nunc semper porta

¡Voila!

ATENCIÓN: Es imposible hacer un hover si el div no tiene un nombre, no se puede hacer dentro del atirbuto style del HTML. Se tiene que hacer dentro de las balizas head, y style, o en caso de que tengan un foro, pues en el CSS del foro.

Ahora, ¿no sienten que le falta algo? Pues yo sí, y bastante... ¡la transition! Bueno, pues para eso sólo le tienen que agregar al CSS lo siguiente:
CODE: SELECCIONAR TODO
transition: propiedades-que-se-van-a-animar tiempo tipo-de-transición;
En mi caso, uso algo así:
CODE: SELECCIONAR TODO
transition: all 0.6s ease-in-out;-webkit-transition: all 0.6s ease-in-out;-moz-transition: all 0.6s ease-in-out;-o-transition: all 0.6s ease-in-out;
Eso lo agregan en donde pongan el hover y ocurre algo así:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut egestas dui. Mauris ac luctus meus. Curabitur ornare facilisis ligula non iaculis. Duis ac purus ut nunc semper porta


Y ahora sí, voilá! ¡Magia!

Ejem, sí, falta algo. Se si fijan, como bien hizo Cal'syee allá abajo, cuando quitan el mouse, el efecto vuelve a ser de golpe. ¿Cómo arreglamos esto para que también tenga transición? Bueno, el código que les puse arriba de las transitions también lo ponen sobre el CSS de la capa del texto que NO tiene el hover. Y pasaría algo así:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut egestas dui. Mauris ac luctus meus. Curabitur ornare facilisis ligula non iaculis. Duis ac purus ut nunc semper porta


Ahora, hacerlo con opacity no es la única manera de hacer un hover. Pueden hacer escalando el div a 0 y, cuando se hace el hover, ponerlo en su escala original, lo que ocasionará que aparezca agrandándose desde el centro. También pueden cambiar su position con las propiedades top, left, right y bottom para que aparezca deslizándose, por ejemplo, pueden hacerlo que se rote mientras se mueve... ¡Las posibilidades son casi infinitas!

Bueno, si quieren ampliar sus conocimientos, los remito a una de las mejores páginas para aprender CSS, justamente los que se dedican a hacer los estándares: w3schools.
1. Transformaciones CSS en 2D
2. Transformaciones de CSS en 3D
3. Transiciones en CSS3
Lo mejor de esa página es que te deja experimentar, te dice en qué navegadores funciona y te da ejemplos.

Ahora, si quieres saber más de hovers, te recomiendo que visites otros tutoriales de por aquí mismo:
1. Transiciones de s-cnsy
2. Acordeones de Kharma
Bueno, ¡esto ha sido todo! Si tienes dudas, por favor exponlas debajo o por MP. ¡Estaré encantada de ayudar!

Miss Poulain
Mensajes : 22

Fecha de inscripción : 17/12/2015

Ver perfil de usuario http://paraforosdeprueba22.activoforo.com
avatar
Admin

Volver arriba Ir abajo

Re: hoveeeeeeeeer

Mensaje por Admin el Dom Ene 10, 2016 9:49 pm

Con las transiciones se pueden realizar una gran variedad de cambios en uno o varios elementos al mismo o diferentes tiempos. Para activar una transición se pueden utilizar diferentes propiedades como :hover, :focus, :active, entre otras. Sin embargo, estás son las más conocidas y fáciles de usar (y de las que todos sabemos ocupar en esta instancia)

Para controlar la transición se necesita la propiedad transition. Nunca debes olvidar esto, ya que sin esta propiedad, las transiciones nunca se llevarían a cabo.

Las transiciones como la gran mayoría de los elementos en el CSS3, también posee unas subpropiedades:

transition-property: Especifica las propiedades a las que se le aplicará la transición. Hay que tener en cuenta que si agregas esta subpropiedad, solo las que aparezcan aquí tendrán la transición, las demás simplemente ocurrirán como de costumbre (de forma instántanea), para saber qué propiedades admiten transición, puedes mirar más abajo donde las señalamos.
transition-duration: Estipula la duración que tendrá cada transición, puedes colocar un valor absoluto para todas o uno para cada una. Este valor puede ser establecido en segundos (s) o en milisegundos (ms).
transition-timing-function: Utiliza el valor establecido para establecer la sincronización y el efecto de la transición en un elemento. Trabaja sobre la curva cúbica de Bézier y la velocidad de la transición puede variar. Incluyen las propiedades de linear, ease-in, ease-out y ease-in-out.
transition-delay: Permite establecer el tiempo de espera entre la propiedad y la transición. También se aplican propiedades del tiempo como segundos (s) o milisegundos (ms).

NOTA: No todas las subpropiedades son necesarias para realizar una transición.

Ahora bien, seguramente deseas saber de que estoy hablando, ¿no? He aquí un ejemplo de un elemento con transición y un elemento sin ella.




Supongo que ya saben cuál es el que tiene una transición y cuál no, ¿verdad?

Esto fue simplemente lo qué hice:

1. Cree un elemento llamado eje1 (utilice la etiqueta style para introducir CSS en el tema).
2. Le di un width y un height de tamaño 100PX ambos. Además de que le di un color de fondo con la subpropiedad background.
3. A la etiqueta le di una transición y subpropiedades: transition-delay: 0.6s; transition: 0.8s all ease-in-out; transition-duration: 0.8s
4. Le añadí un hover a la misma etiqueta y también añadí las mismas subpropiedades de la transición a parte de un border-radius: 100%. La razón por la cuál también lo hice tanto en el elemento base como en el hover es para que cuando el elemento vuelva a su forma inicial, también tenga una transición.

código de la transición escribió:
.eje1{width: 100px; height: 100px; background: #0099cc; transition-delay: 0.6s; transition: 0.8s all ease-in-out; transition-duration: 0.8s;} .eje1:hover {border-radius: 100%; transition-delay: 0.6s; transition: 0.8s all ease-in-out; transition-duration: 0.8s;}

¿Suena muy fácil hasta aquí, no? Realmente lo es.

Las transiciones poseen una gran variedad de efectos y no se limitan únicamente al que les mostré allá arriba y pueden ser aplicadas en casi todas las propiedades. Sin embargo, es de vital importancia recordar que no todas las propiedades son suceptibles de transiciones.

Las propiedades más comunes que aceptan las transiciones son:

SPOILER:
background-color
background-position
border-color
border-width
border-spacing
bottom
clip
color
crop
font-size
font-weight
height
left
letter-spacing
line-height
margin
max-height
max-width
min-height
min-width
opacity
outline-color
outline-offset
outline-width
padding
right
text-indent
text-shadow
top
transform
vertical-align
visibility
width
word-spacing
z-index

Un ejemplo claro del uso de transiciones es AQUÍ. Es una tablilla propia que diseñé para el libre uso del foro.

Otros ejemplos pueden encontrarlos en las galerías de Skye: AQUÍ, Cal'syee: AQUÍ, Kharma: AQUÍ.

Así podrán apreciar los diferentes usos de las transiciones. Pueden agregar en conjunto otro tipo de propiedades como transform, position (absolute y relative con sus propios valores de top, left, right, bottom), para darles una variedad de efectos.

Transiciones en textos:

I kissed a girl and I like it


Transiciones de movimiento:



─ Logré que se desplazara de un lugar a otro agregando la propiedad position: relative y left: 0 en el elemento base. Luego, añadí en el hover lo mismo, modificando el valor del left (le coloqué 180px), sumándole las propiedades de la transición y con eso logré el efecto de desplazamiento.

Un ejemplo de otras clases de transiciones en la propiedad transform:





Te preguntarás... ¿qué he hecho? Muy sencillo.

He aquí paso por paso de lo que hice.

1. Creé un nuevo elemento llamado .eje3
2. Usé las propiedades de width, height y background para darle forma y usé una imagen extraída de tumblr. Más concretamente un avatar de Gemma Arterton (no es mío, sino de fassylover) y también le proporcioné un boder: 10px solid de color negro y un border-radius al 50%.
3. Le agregué la propiedad transform con la subpropiedad rotate a (0deg) y además, la transición: transition-duration en 0.8s.
4. Le agregué el hover, añadiendo nuevamente la propiedad transform en rotate a (360deg ─una vuelta completa de 360 grados). También le agregué un filtro gris para que al dar el giro, se tornara de ese color (al 100% en con todas las compatibilidades para los navegadores).
5. Realice las correspondientes balizas y listo.

código exacto del círculo escribió:
.eje3 {width: 120px; height: 120px; border: 10px solid #000; border-radius: 50%; transform: rotate(0deg); transition-duration: 0.8s;} .eje3:hover {transform: rotate(360deg); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%);}
Mensajes : 22

Fecha de inscripción : 17/12/2015

Ver perfil de usuario http://paraforosdeprueba22.activoforo.com
avatar
Admin

Volver arriba Ir abajo

Re: hoveeeeeeeeer

Mensaje por Admin el Dom Ene 10, 2016 10:25 pm

¡No me destapes!


Última edición por Admin el Dom Ene 10, 2016 11:12 pm, editado 1 vez
Mensajes : 22

Fecha de inscripción : 17/12/2015

Ver perfil de usuario http://paraforosdeprueba22.activoforo.com
avatar
Admin

Volver arriba Ir abajo

Re: hoveeeeeeeeer

Mensaje por Admin el Dom Ene 10, 2016 10:25 pm

Pasa el cursor por aquí
¡Hey! ¡No me mires!
Mensajes : 22

Fecha de inscripción : 17/12/2015

Ver perfil de usuario http://paraforosdeprueba22.activoforo.com
avatar
Admin

Volver arriba Ir abajo

Re: hoveeeeeeeeer

Mensaje por Admin el Dom Ene 10, 2016 10:26 pm

¡Quiero ese cursor sobre mi!
Que vergüenza...

Mensajes : 22

Fecha de inscripción : 17/12/2015

Ver perfil de usuario http://paraforosdeprueba22.activoforo.com
avatar
Admin

Volver arriba Ir abajo

Re: hoveeeeeeeeer

Mensaje por Admin el Dom Ene 10, 2016 10:27 pm

¡Quiero ese cursor sobre mi!
Que vergüenza...

Mensajes : 22

Fecha de inscripción : 17/12/2015

Ver perfil de usuario http://paraforosdeprueba22.activoforo.com
avatar
Admin

Volver arriba Ir abajo

Re: hoveeeeeeeeer

Mensaje por Admin el Dom Ene 10, 2016 10:34 pm

Pasa el cursor por aquí
¡Hey! ¡No me mires!
Mensajes : 22

Fecha de inscripción : 17/12/2015

Ver perfil de usuario http://paraforosdeprueba22.activoforo.com
avatar
Admin

Volver arriba Ir abajo

Re: hoveeeeeeeeer

Mensaje por Admin el Dom Ene 10, 2016 10:45 pm

¡No me destapes!
Mensajes : 22

Fecha de inscripción : 17/12/2015

Ver perfil de usuario http://paraforosdeprueba22.activoforo.com
avatar
Admin

Volver arriba Ir abajo

Re: hoveeeeeeeeer

Mensaje por Admin el Dom Ene 10, 2016 11:56 pm


 

   
Jimmy Eat World

   
que ves que ves cuando me ves cuando la mentira es la verdad

 

Mensajes : 22

Fecha de inscripción : 17/12/2015

Ver perfil de usuario http://paraforosdeprueba22.activoforo.com
avatar
Admin

Volver arriba Ir abajo

Re: hoveeeeeeeeer

Mensaje por Admin el Lun Ene 11, 2016 12:17 am


250px

porque si porque si porque si porque en esta vida no quiero pasar mas de un día entero sin ti



Mensajes : 22

Fecha de inscripción : 17/12/2015

Ver perfil de usuario http://paraforosdeprueba22.activoforo.com
avatar
Admin

Volver arriba Ir abajo

Re: hoveeeeeeeeer

Mensaje por Contenido patrocinado

Contenido patrocinado

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba


 
Permisos de este foro:
No puedes responder a temas en este foro.