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 Small Box Shadow se utilizan principalmente para mostrar las cosas que deben aparecer ligeramente elevadas. Por ejemplo, tarjetas o elementos de la interfaz de usuario que contienen información importante.
Primer CSS Small Box Shadow Clase utilizada:
- .color-shadow-small: esta clase se utiliza para mostrar el contenido de la sombra del cuadro pequeño.
Sintaxis:
<div class="color-shadow-small">
...
</div>
Ejemplo 1: Este ejemplo describe cómo usar la utilidad Primer CSS Small Box Shadow.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Small 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 Small Box Shadow</h3> <div class="color-shadow-small 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 pequeña
Ejemplo 2: Este ejemplo describe cómo usar la utilidad Primer CSS Small Box Shadow.
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Small 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 Small Box Shadow</h3> <div class="col-4"> <div class="Box color-shadow-small"> <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:
Primer CSS Sombra de caja pequeña
Referencia: https://primer.style/css/utilities/box-shadow#small
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA