Últimos temas
» [SKIN] Hello? how are you
por Unity Vie Ene 06, 2017 11:55 pm

» Pack 1 de html (personaje + firma)
por Rose Jue Ene 05, 2017 5:19 pm

» [FIRMA] Mikagura Suite
por Natty Mar Dic 27, 2016 9:57 am

» [SKIN] Attack No Titan
por Flowman Jue Dic 15, 2016 8:51 pm

» Owari no seraph's
por Cool Skelleton_95 Mar Nov 15, 2016 2:04 pm

» Simple flutter
por Amaranth Miér Oct 26, 2016 8:54 am

» Duda sobre sorteo de skin
por SS Jue Sep 15, 2016 8:22 pm

» [MOVIL] [ FA ] Haikyuu
por Sarisha Mar Ago 30, 2016 6:07 am

» Pedido grafico
por DangerStRichard Dom Ago 28, 2016 7:09 pm


{TUTORIAL HTML} ¿Hovers? ¡Qué problema! (1)

Ver el tema anterior Ver el tema siguiente Ir abajo

{TUTORIAL HTML} ¿Hovers? ¡Qué problema! (1)

Mensaje por Mikae el Jue Jul 09, 2015 9:59 am

¿Hovers? ¡Qué problema!
Nombre del tutorial: Hovers feos (?)
Dificultad: Intermedia
Tiempo de lectura: 15 minutos.
Creador del tutorial: Mikae
Si está dedicado a alguien en particular: Todo aquel que lo lea.

Bases y Recordatorios

Últimamente he visto unos cuantos tutoriales sobre el hover, pero noto que solo ponen el código e indican que editar ¡Se acabó eso! Acá les enseñaré que códigos editar y complementar, pero para esto es necesario saber un poco de como armar los divs, y manejar el css.

Primero creamos dos cajas, la primera será la tapa de encima y la segunda será lo que se mostrará a pasar el div. Yo en este caso utilizaré el css y html, con la propiedad class.
Código:
<div class=”Cajaencima”> <div class=”CajaDebajo”>Estoy oculto</div></div>


Con esto quiero explicar lo básico que se añade para crear un hover, el uso de transition y opacity es muy importante, puedes jugar con ellos de muchas formas,.Aunque también se puede aplicar transform, o margin, que hará que se desplace para un lado u otro, eso lo veremos en el  siguiente tutorial.


Manos a la obra

En el css lo acomodamos como deseamos. Ahora que tenemos nuestras cajas elaboradas, comenzaremos con lo básico, que consta en pasar el cursor por las cajas.  
Editaremos primero el div primero, de encima. A este solo le añadimos las propiedades que sean de la primera cara. No se le añadirá nada en especial. Ya que solo es nuestra tapa. En mi caso yo añadí width, que determina el largo, height que determina el alto y background el color del relleno.
Código:
.CajaEncima { width: 100px; height: 100px; background: #000; border: 5px solid #e1e1e1; }

Ahora pasare a editar la CajaDebajo, trabajaremos y aplicaremos para lo necesario que será el tiempo de transición, la opacidad.
Código:
.CajaDebajo { background-color: #FFF; height: 100px; width: 100px;}

Transition: Se aplica la lentitud por segundos que se abre el efecto deseado. Sintaxis:  transition: all 0.8s ease-out 0s; Los primeros 0.8s son el tiempo de entrada, y los 0s segundos serían el tiempo de desaparecer el hover.

Opacity: Se aplica para la opacidad como ya todos saben es la transparencia según un número. Su sintaxis es: opacity: 0; 0 hace que se vea transparente sin verse, 1 puede hacer que se vea lo suficiente visible.

Bien, a la CajaDebajo aplicaré transition, con el tiempo que desee, y por último la opacity obligatoriamente tienes que ser 0 ya que queremos esta caja oculta y que no sea visible.
Código:
.CajaDebajo { transition: all 0.8s ease-out 0s; background-color: #FFF; height: 100px; opacity: 0;width: 100px;}

Bien, ya casi acabamos, ahora añadiremos el muy visto :hover, esto ayuda a que al pasar el cursor por los elementos de un efecto. La CajaDebajo la duplicamos (el css) y eliminamos las propiedades, dejándolo así, Ahí lo añadiremos al lado del nombre de la caja el :hover
Código:
.CajaDebajo:hover {  }
Ahí se añadirá lo que va a sobresalir de la caja o lo que va a aparecer.
En ese caso añadimos opacity: 1; pueden variar como 0.3 , 0.7 etc. Menos 0, ya que si no a caja no sería visible. Es lo único que añadiremos por ahora, para hacer el efecto básico.
Código:
.CajaDebajo:hover { opacity: 1; }


mikae © 2016
avatar
Mikae

Mensajes : 275

Ver perfil de usuario

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

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