Primer CSS en escala de grises

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 orientados a objetos, CSS funcional y arquitectura BEM. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.

En este artículo, aprenderemos sobre Primer CSS Grayscale. Se utiliza para eliminar todos los colores de un elemento y convertirlo en blanco y negro.

Primer CSS Clase de escala de grises:

escala de grises: esta clase se utiliza para eliminar todos los colores de un elemento y hacer que se represente en blanco y negro.

Sintaxis:

<img src="" class="grayscale" />

Ejemplo 1: En este ejemplo, mostraremos cómo se puede usar la escala de grises para representar imágenes en blanco y negro.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@16.3.0/dist/primer.css">
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h3>Primer CSS Greyscale</h3>
      
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png"
        class="grayscale">
</body>
  
</html>

Producción:

Ejemplo 2: En este ejemplo, usaremos la clase de escala de grises en div . También escribiremos un encabezado y le proporcionaremos un color de fuente, pero dado que lo hemos escrito en escala de grises de clase , se mostrará en blanco y negro.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@16.3.0/dist/primer.css">
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
      
    <h3>Primer CSS Greyscale</h3>
      
    <div class="grayscale">
        <h3 style="color:red">Hi Geek!!</h3>
        <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png">
    </div>
</body>
  
</html>

Producción:

Referencia: https://primer.style/css/utilities/marketing-filters#grayscale

Publicación traducida automáticamente

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

HTML

HTML

Deja una respuesta Cancelar la respuesta