Primer CSS Sombra de caja mediana

Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean 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 orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.

La utilidad Box shadows se utiliza para dar un efecto de sombra al elemento contenedor. Los estilos box-shadow se utilizan para prestar atención al contenido. Los estilos Primer CSS Medium Box Shadow se utilizan principalmente para mostrar el contenido editorial que debe aparecer elevado. Por ejemplo, tarjetas o elementos de la interfaz de usuario que contienen información importante.

Clases de Primer CSS Medium Box Shadow utilizadas:

  • .color-shadow-medium: esta clase se utiliza para mostrar el contenido de sombra de cuadro medio.

Sintaxis:

<div class="color-shadow-medium">
      ...
</div>

Ejemplo 1: Este ejemplo describe cómo usar la utilidad Primer CSS Medium Box Shadow.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Medium Box Shadow</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <div class="p-3">
        <h1 class="color-fg-success">
            GeeksforGeeks
        </h1>
  
        <h3>Primer CSS Medium Box Shadow</h3>
  
        <div class="color-shadow-medium p-5">
            A Computer Science portal for geeks. It 
            contains well written, well thought and 
            well explained computer science and 
            programming articles,
        </div>
    </div>
</body>
  
</html>

Producción:

Primer CSS Sombra de caja mediana 

Ejemplo 2: Este ejemplo describe cómo usar la utilidad Primer CSS Medium Box Shadow.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Primer CSS Medium Box Shadow</title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <div class="p-3">
        <h1 class="color-fg-success">
            GeeksforGeeks
        </h1>
  
        <h3>Primer CSS Medium Box Shadow</h3>
  
        <div class="col-4">
            <div class="Box color-shadow-medium">
                <div class="Box-row d-flex flex-justify-center">
                    <h1 class="color-fg-success">
                        GeeksforGeeks
                    </h1>
                </div>
  
                <div class="Box-row">
                    A Computer Science portal for geeks. It 
                    contains well written, well thought and 
                    well explained computer science and 
                    programming articles
                </div>
  
                <div class="Box-row d-flex flex-justify-center">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                        class="img-responsive">
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Primer CSS Sombra de caja mediana 

Referencia: https://primer.style/css/utilities/box-shadow#medium

Publicación traducida automáticamente

Artículo escrito por AshokJaiswal 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 *