Colores de espectro – Barcelona Geeks

Spectre colors es una de las utilidades más útiles, hay dos tipos de cosas donde podemos usar colores. Al igual que podemos establecer colores para el texto y podemos establecer el color para el fondo.

Los colores se utilizan para diseñar su componente, a veces necesitamos colorear el texto o, a veces, necesitamos colorear el fondo.

Clase de colores de espectro:

colores de texto: este no es el nombre de clase real que se usará. El texto de «colores» debe reemplazarse con el nombre del color como primario, secundario, etc. Esto se usa para colorear el texto.
bg-colors: este no es el nombre de clase real que se usará. El texto de «colores» debe reemplazarse con el nombre del color como primario, secundario, etc. Esto se usa para colorear el fondo.

Sintaxis:

// For text color
<element class="text-colorname">...</element>

// For background color
<element class="bg-colorname">...</element>

El siguiente ejemplo ilustra los colores Spectre:

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>SPECTRE Colors Class</title>
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <strong>SPECTRE Colors Class</strong>
        <br><br>
        <p class="text-primary bg-error">
            Primary Text Color | Error Background Color
        </p>
  
        <p class="text-secondary bg-warning">
            Secondary Text Color | Warning Background Color
        </p>
  
        <p class="text-dark bg-success">
            Dark Text Color | Success Background Color
        </p>
  
        <p class="text-gray bg-light">
            Gray Text Color | Light Background Color
        </p>
  
        <p class="text-light bg-gray">
            Light Color Text | Gray Background Color
        </p>
  
        <p class="text-success bg-dark">
            Success Text Color | Dark Background Color
        </p>
  
        <p class="text-warning bg-secondary">
            Warning Text Color | Secondary Background Color
        </p>
  
        <p class="text-error bg-primary">
            Error Text Color | Primary background Color
        </p>
  
    </center>
</body>
  
</html>

Producción:

Colores de espectro

Referencia: https://picturepan2.github.io/spectre/utilities/colors.html

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta