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 orientado a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS Box shadow aplica sombra a un contenedor de caja. Ayuda a elevar el contenido para que el usuario preste atención al contenido dentro de la caja contenedora. En Primer CSS, podemos agregar diferentes tipos de sombras de caja: pequeñas, medianas, grandes y extragrandes .
Elementos básicos de CSS Box Shadow:
- Sombra de cuadro pequeño : las sombras de cuadro pequeño se crean utilizando la clase «.color-shadow-small» para el componente. Las sombras pequeñas generalmente se usan en los elementos de los sitios web que necesitan elevarse un poco. Generalmente, se aplican a elementos que tienen bordes.
- Medium Box Shadow : Medium Box Shadow se crea utilizando la clase «.color-shadow-medium» para el componente. Las sombras medianas son más difusas y extendidas que las sombras de caja pequeña. Por lo general, las sombras medias se utilizan en componentes que se pueden editar y en los que se puede hacer clic.
- Sombra de cuadro grande : Las sombras de cuadro grande se crean utilizando la clase «.color-shadow-large» para el componente. Las sombras grandes son mucho más difusas y dispersas que las sombras medianas. Por lo general, las sombras de cuadros grandes se usan en componentes que son para marketing y capturas de pantalla de la interfaz de usuario que deben aparecer en la parte superior de todos los demás elementos de la página.
- Sombra de cuadro extra grande : Las sombras de cuadro extra grandes se crean utilizando la clase «.color-shadow-extra-large» para el componente. Son más difusos y más grandes que las sombras grandes y se utilizan para mostrar contenido de marketing que debe aparecer sobre todos los demás elementos de la página.
- Eliminar una sombra de cuadro : podemos eliminar una sombra de cuadro agregando la clase «.box-shadow-none» al componente. Esto elimina las sombras del cuadro del componente en el que se agrega esta clase.
Primer CSS Box shadow Clases:
- color-shadow-small: esta clase, cuando se aplica, agrega una sombra muy leve al elemento. Este tipo de sombra generalmente se aplica a cosas que tienen bordes. Algunos de los ejemplos en los que se aplican pequeñas sombras de cuadro son tarjetas de precios, botones para agregar al carrito, etc.
- color-shadow-medium: esta clase, cuando se aplica, agrega una sombra difusa al elemento un poco más grande que la sombra pequeña. Generalmente se usa para contenido editorializado en el que se puede hacer clic y editar.
- color-shadow-large: esta clase, cuando se aplica, agrega una sombra más difusa al elemento más grande que la sombra media al elemento. Generalmente se usa para contenido de marketing y capturas de pantalla e imágenes de la interfaz de usuario.
- color-shadow-extra-large: esta clase, cuando se aplica, agrega una sombra mucho más difusa al contenedor.
- box-shadow-none: esta clase, cuando se aplica, elimina una sombra de cuadro del elemento.
Sintaxis:
<div class="Box-shadow-Class">
...
</div>
Ejemplo 1: Hemos añadido una pequeña sombra a un elemento contenedor.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> Primer CSS Box-shadow </h2> <div class="col-4 m-3"> <div class="Box color-shadow-small"> <div class="Box-row"> <h3> How to write article? </h3> </div> <div class="Box-row"> <p class="mb-0 color-fg-muted"> We can write articles on any technology topics and after being reviewed it will be live on GeeksforGeeks platform.s </p> </div> <div class="Box-row"> <button type="button" name="Create an organization" class="btn btn-primary btn-block"> Pick an article </button> </div> </div> </div> </body> </html>
Producción:
Primer CSS Caja de sombras
Ejemplo 2: Hemos creado un elemento con una gran sombra añadida.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> Primer CSS Box-shadow </h2> <div class="color-shadow-large m-4 col-4 row-3"> <p> This is a container with large shadow class added to it. </p> <p> This is a container with large shadow class added to it. </p> <p> This is a container with large shadow class added to it. </p> <p> This is a container with large shadow class added to it. </p> </div> </body> </html>
Producción:
Primer CSS Caja de sombras
Ejemplo 3: Este ejemplo demuestra la sombra de Primer CSS Box utilizando las clases color-shadow-medium, color-shadow-extra-large y box-shadow-none .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body class="m-2"> <h1 style="color: green;"> GeeksforGeeks </h1> <h2> Primer CSS Box-shadow </h2> <div class="color-shadow-medium m-4 col-4 row-3"> <p> GeeksforGeeks medium shadow </p> </div> <div class="color-shadow-extra-large m-4 col-4 row-3"> <p> GeeksforGeeks extra-large shadow </p> </div> <div class="box-shadow-none m-4 col-4 row-3"> <p> GeeksforGeeks no shadow </p> </div> </body> </html>
Producción:
Primer CSS Caja de sombras
Referencia: https://primer.style/css/utilities/box-shadow
Publicación traducida automáticamente
Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA