Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Este método sistemático garantiza que nuestros patrones sean estables e interoperables entre sí. Su enfoque de CSS está influenciado por los principios de CSS orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
La superposición de Primer CSS Box se usa para crear el efecto de superposición en Primer CSS utilizando la clase Box-overlay junto con los elementos <detalles> y <detalles-diálogo> . Si queremos un fondo transparente oscuro , se usa la clase detalles superpuestos oscuros . La superposición de caja está disponible en tres anchos, como se muestra a continuación.
Primer CSS Box superposición Clases:
- Superposición de cuadro: esta clase se utiliza para crear la superposición de cuadro de 440 px de ancho.
- Box-overlay–narrow: esta clase se utiliza para crear la superposición de cuadro de 320 px de ancho.
- Box-overlay–wide: esta clase se utiliza para crear la superposición de cuadro de 640 px de ancho.
- detalles-superposición-oscuro: esta clase se usa para hacer que el fondo oscuro sea transparente.
Sintaxis:
<details class="details-reset details-overlay">
<summary class="btn" aria-haspopup="dialog">
...
</summary>
<details-dialog class="Box Box--overlay d-flex flex-column">
...
</details-dialog>
</details>
Ejemplo 1: Este ejemplo demuestra la implementación de la superposición de Primer CSS Box.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Box overlay </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Box overlay </h3> <br> <details class= "details-reset details-overlay details-overlay-dark"> <summary class="btn" aria-haspopup="dialog"> Open Box overlay </summary> <details-dialog class= "Box Box--overlay d-flex flex-column"> <div class="Box-header"> <h3 class="Box-title"> GeeksforGeeks </h3> </div> </details-dialog> </details> </div> </body> </html>
Producción:
Ejemplo 2: Este ejemplo demuestra la implementación de la superposición de Primer CSS Box.
HTML
<!DOCTYPE html> <html> <head> <title> Primer CSS Box overlay </title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3> Primer CSS Box overlay </h3> <br> <details class= "details-reset details-overlay details-overlay-dark"> <summary class="btn" aria-haspopup="dialog"> Open Box overlay </summary> <details-dialog class= "Box Box--overlay d-flex flex-column"> <div class="Box-header"> <h3 class="Box-title"> GeeksforGeeks </h3> </div> <div class="overflow-auto"> <div class="Box-body overflow-auto"> <p>A Computer Science portal for geeks.</p> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> </div> </details-dialog> </details> </div> </body> </html>
Producción:
Referencia: https://primer.style/css/components/box-overlay
Publicación traducida automáticamente
Artículo escrito por singh_teekam y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA