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.x23845.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.



  • Marc Coiduras

    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
    Tagged: , ,
    Artículos relacionados
    Buenas amigos, que tal el fin de semana? Revisando mi baúl, me di cuenta de
    Se que la idea de crear un sitio web puede ser aterradora, especialmente cuando no
    Pero no basta con estar arriba, en los resultados de Google. Hay que resaltar sobre
    Muy buenas amigos, hoy he estado haciendo unas modificaciones para añadir una sugerencia en los

    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.