Superposición de cuadro de CSS básico

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *