Primer CSS Colores Color de fondo

Primer CSS es un marco CSS gratuito de código abierto que se basa en el sistema de diseño de GitHub para brindar soporte al amplio espectro de sitios web de GitHub. Crea 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 un modelo altamente reutilizable.

Uno de esos elementos de estilo de Primer CSS es el color de fondo . En este artículo, aprenderemos sobre el elemento Color de fondo en Primer CSS.
El color de fondo, como sugiere su nombre, se utiliza para rellenar con color grandes áreas del sitio web.

Nota: al seleccionar un color de fondo, debemos tener en cuenta que el contraste del color de primer plano pasa una calificación mínima de accesibilidad de WCAG al nivel AA que se puede verificar en el siguiente sitio web (o en palabras simples, debe tener un buen contraste entre el color de primer plano y el fondo color ).

Clases: a continuación se muestra la lista de todas las clases de color de fondo presentes en Primer CSS junto con su color:

.color-bg-default: esta clase aplica el color de fondo blanco predeterminado al elemento. Se aplica por defecto.
.color-bg-overlay: esta clase, cuando se aplica, da un tono blanco ligeramente oscuro al fondo del elemento.
.color-bg-emphasis: esta clase, cuando se aplica, da un color negro oscuro al fondo del elemento.
.color-bg-accent: esta clase, cuando se aplica, da un color azul claro al fondo del elemento.
.color-bg-accent-emphasis: esta clase, cuando se aplica, da un color azul intenso al fondo del elemento.
.color-bg-success: esta clase, cuando se aplica, da un color verde claro al fondo del elemento.
.color-bg-success-emphasis: esta clase, cuando se aplica, da un color verde oscuro al fondo del elemento.
.color-bg-attention: esta clase, cuando se aplica, da un color amarillento claro al fondo del elemento.
.color-bg-attention-emphasis: esta clase, cuando se aplica, da un color amarillento oscuro al fondo del elemento.
.color-bg-severe: esta clase, cuando se aplica, da un color marrón claro al fondo del elemento.
. color-bg-severe-emphasis: esta clase, cuando se aplica, da un color marrón oscuro al fondo del elemento.
.color-bg-danger: esta clase, cuando se aplica, da un color rojo claro al fondo del elemento.
.color-bg-danger-emphasis: esta clase, cuando se aplica, da un color rojo oscuro al fondo del elemento.
.color-bg-done: esta clase, cuando se aplica, da un color violeta claro al fondo del elemento.
.color-bg-done-emphasis: esta clase, cuando se aplica, da un color violeta oscuro al color de fondo del elemento.
.color-bg-transparent: esta clase, cuando se aplica, hace que el color de fondo sea transparente.
.color-bg-sponsors: esta clase, cuando se aplica, da un color rosa claro al color de fondo del elemento.
.color-bg-sponsors-emphasis: esta clase, cuando se aplica, da un color rosa oscuro al color de fondo del elemento.

Sintaxis:

<div class= “…” > </div>

Nota: aquí hemos mostrado los ejemplos y sintaxis usando el elemento <div> pero puede usar las clases de color de fondo de Primer CSS.

Ejemplo 1: En el siguiente ejemplo, hemos creado tres cuadros con texto escrito en ellos y les hemos dado diferentes colores con la ayuda de las clases de color de fondo de imprimación. También le hemos dado un color de fondo azul a toda la pantalla.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> Primer CSS Background Color </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <div class="color-bg-accent-emphasis" style="color: white;">
        <h2>GeeksforGeeks</h2>
        <h3>Primer CSS Background Color</h3>
        <div class="color-bg-success-emphasis" 
        style="height: 200px; width: 200px;  color: white;">
            This is the first text box with sample text. 
          This article will be published in GeeksforGeeks website.
        </div>
        <div class="color-bg-done-emphasis" 
        style="height: 200px; width: 200px;  color: white;" >
            This is the second text box with sample text. 
          This article will be published in GeeksforGeeks website.
        </div>
        <div class="color-bg-sponsors-emphasis" 
        style="height: 200px; width: 200px; color: white;">
            This is the third text box with sample text. 
          This article will be published in GeeksforGeeks website.
        </div>
    </div>
</body>
</html>

Producción:

Ejemplo 2: En este ejemplo, dé color de fondo a diferentes botones.

HTML

<!DOCTYPE html>
<html>
<head>
    <title> Primer CSS Toast animation in </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body>
    <div>
        <h2>GeeksforGeeks</h2>
        <h3>Primer CSS Background Color</h3>
        <button class="btn color-bg-success-emphasis" 
                type="button">
          Button 1
      </button>
        <button class="btn color-bg-danger-emphasis" 
                type="button">
          Button 2
      </button>
    </div>
</body>
</html>

Producción:

Referencia: https://primer.style/css/utilities/colors#background

Publicación traducida automáticamente

Artículo escrito por saikatmohanta43434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

HTML

Deja una respuesta Cancelar la respuesta