Primer CSS Box Shadow Quitar

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 shadow se utiliza para dar un efecto de sombra al elemento contenedor. Los estilos box-shadow se utilizan para prestar atención al contenido. El estilo Primer CSS Box Shadow Remove se utiliza principalmente para eliminar la sombra del cuadro. Para eliminar box-shadow, agregaremos una clase adicional .box-shadow-none.

Clases usadas:

  • .box-shadow-none: esta clase se usa para eliminar la sombra del cuadro.

Sintaxis:

<div class="box-shadow-none">
    Box Shadow Remove
</div>

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

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Primer CSS Box Shadow Remove</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 Box Shadow Remove</h3>
            <div class="color-shadow-extra-large box-shadow-none 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:

 

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

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Primer CSS Box Shadow Remove</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 Box Shadow Remove</h3>
            <div class="col-4">
                <div class="Box color-shadow-extra-large box-shadow-none">
                    <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" alt="">
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Producción:

 

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

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 *