Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a SaaS. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Los paneles Fuera del lienzo se ubican fuera de la ventana gráfica y se deslizan hacia adentro cuando se activan. Hay varias posiciones para abrir los menús fuera del lienzo, es decir, se puede abrir desde la izquierda, derecha, arriba o abajo, superponer nuestro contenido, empujar nuestro contenido y puede trabajar con elementos pegajosos. Estos son patrones móviles receptivos, utilizados principalmente para pantallas móviles. Esto también se puede usar como una barra lateral en pantallas medianas y de escritorio.
Las transiciones fuera del lienzo son de 2 tipos, es decir, empujar y superponer. En el caso de la transición de empuje, el panel empuja el contenido en la pantalla, mientras que en el caso de superposición, el panel se superpone al contenido de la página.
Clase de transiciones fuera del lienzo de CSS básico:
- off-canvas: esta clase crea un contenedor fuera del lienzo.
- off-canvas position-* : Esta clase se utiliza para posicionar fuera del lienzo especificando la posición particular.
- off-canvas-content: Esta es una clase contenedora, que se usa para contener el contenido principal de la página.
Atributos de las transiciones fuera del lienzo de Foundation CSS:
- data-transition=”overlap” : este atributo se puede usar para abrir la superposición y superponer el contenido de la página.
- data-transition=”push” : este atributo se puede usar para empujar para abrir la barra lateral y también para empujar el contenido de la página. Este es el atributo utilizado, por defecto.
- data-off-canvas : este atributo debe agregarse al contenedor fuera del lienzo para que funcione correctamente.
Sintaxis:
<div class="off-canvas" data-off-canvas data-transition="overlap/push">
Content
</div>
<div class="off-canvas-content" data-off-canvas-content>
Content
</div>
Ejemplo 1: Este es un ejemplo básico que ilustra la Transición Push realizada con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Off-canvas Transitions</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> </head> <body> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Foundation CSS Off-canvas Transitions</h3> <b>Push transition</b> <br> <button type="button" class="button" data-toggle="offCanvasPush">Push </button> <div class="grid-x grid-margin-x"> <div class="cell small-6"> <div class="off-canvas-wrapper"> <div class="off-canvas-absolute position-left" id="offCanvasPush" data-off-canvas data-transition="push"> <p>I am inside left off-canvas</p> </div> <div class="off-canvas-content" style="min-height: 300px;" data-off-canvas-content> <p> the one-stop solution is GeeksforGeeks DSA Self-Paced Course with Lifetime Access is a complete package for you to learn and master all the Data Structures & Algorithms concepts from scratch and that too at your own pace! </p> </div> </div> </div> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Ejemplo 2: Este es un ejemplo básico que ilustra la transición superpuesta realizada con Foundation CSS.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Foundation CSS Off-canvas Transitions</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> <link rel="stylesheet" href= "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" /> <script src= "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"> </script> <script src= "https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js"> </script> </head> <body> <h1 style="color: green;">GeeksforGeeks</h1> <h3>Foundation CSS Off-canvas Transitions</h3> <b>Overlap transition</b> <br> <button type="button" class="button" data-toggle="offCanvasPush">Overlap </button> <div class="grid-x grid-margin-x"> <div class="cell small-6"> <div class="off-canvas-wrapper"> <div class="off-canvas-absolute position-left" id="offCanvasPush" data-off-canvas data-transition="overlap"> <p>I am inside left off-canvas</p> </div> <div class="off-canvas-content" style="min-height: 300px;" data-off-canvas-content> <p> the one-stop solution is GeeksforGeeks DSA Self-Paced Course with Lifetime Access is a complete package for you to learn and master all the Data Structures & Algorithms concepts from scratch and that too at your own pace! </p> </div> </div> </div> </div> <script> $(document).foundation(); </script> </body> </html>
Producción:
Referencia: https://get.foundation/sites/docs/off-canvas.html#off-canvas-transitions
Publicación traducida automáticamente
Artículo escrito por tpraneeth2001 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA