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