14 de febrero de 2017 Marc Coiduras

Tutorial HTML5 Window toggle event

Buenas amigos, el artículo de hoy tratará sobre un tutorial HTML5 de cómo hacer fácilmente un Window toggle event.

Tutorial HTML5

Este tutorial es muy sencillo y no vamos a necesitar nada más que nuestro editor de archivos de texto favorito y 10 min. de tiempo.

  • Vamos a crear un archivo HTML5 con su estructura básica.
  • Añadiremos el código de la caja contenedora.
  • Y por último, añadiremos el código de los estilos CSS.

¿Empezamos?

Creando archivo HTML

Lo primero que vamos a hacer en este tutorial html5, es crear en nuestro escritorio de Windows un nuevo archivo de texto.

Cuando escribamos el nombre del archivo, por ejemplo, “toggle_tuto” tenemos que asegurarnos de cambiar la extensión .txt por .html.

Ahora abrimos el archivo con nuestro editor de texto para crear la estructura HTML y añadimos el siguiente código:

<!DOCTYPE html>
<html>
<head>
<title>Window Toggle Event</title>

</head>
<body>

</body>
</html>

Bien con esto ya tenemos listo nuestro archivo HTML, puedes comprobarlo abriendo el archivo con tu navegador.

Colocando código HTML del toggle event

Es el momento de añadir el código HTML del evento toggle en nuestro archivo.

Para ello vamos a añadir el siguiente código después de la etiqueta <body>:

<div style="height: 240px; padding-top: 1.2rem">
<div class="window">
<input type="checkbox" id="punch" class="toggle">
  <label for="punch">Clic para evento</label>
  <div>
    <img src="https://www.marccoiduras.com/html5-css3.png" style="max-width:100%;height:auto" alt="Chewbacca">
  </div>
</div>
</div>

Si volvemos a nuestro navegador y actualizamos la página, veremos que ya aparece algo, pero ¡está hecho un desastre!

Para arreglarlo vamos a tener que añadir código CSS para darle un estilo a las etiquetas <div>, <input> y <label>.

Colocando código CSS para los estilos

Volvemos a nuestro archivo .html y añadimos el siguiente código después de la etiqueta <head>:

<style>
div.window { 
  color: white;
  width: 220px;
  padding: .42rem;
  border-radius: 5px;
  background: #E0E0E0;
  margin: 1rem;
  text-align: center;
  font-family: BlueHighway, Arial Black, sans-serif;
  margin: 0 auto; 
}
div.window label { 
  display: block;
  background: #3399ff;
  font-size: larger;
  border-radius: 5px;
  padding: .6rem;
  transition: .4s all linear; 
}
div.window label:hover { 
  cursor: pointer; background: #311; 
}
input.toggle ~ div { 
  height: 0px; margin: .2rem;
  overflow: hidden;
  transition: .6s all cubic-bezier(0.730, -0.485, 0.145, 1.620)
}
input.toggle:checked ~ div { height: 180px; }
input.toggle:checked + label { background: red; }
input.toggle { display: none; }
</style>

Para cambiar los colores de la caja y el botón, te recomiendo la página con los colores RGB de rapidtables.

Y con esto ya tenemos nuestro archivo terminado el tutorial html5, vuelve a tu navegador y actualiza la página para ver cómo ya funciona todo correctamente.

A continuación dejo un ejemplo del código:

Espero que este tutorial te haya servido de ayuda.

Tagged: , , descripción de la firma
Si te ha gustado el artículo puedes compartirlo usando los siguientes botones:
Zona Web
Google+
Reddit
Si te ha gustado el artículo puedes compartirlo usando los siguientes botones:
Zona movil

About the Author

Marc Coiduras Hola, mi nombre es Marc Coiduras y soy diseñador web, localizado en Valencia, España.

Deja un comentario

CONTACTA CONMIGO PARA CUALQUIER COSA

Te doy la bienvenida a ponerte en contacto conmigo para obtener más información
sobre cualquiera de mis productos o servicios.