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. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Los filtros se utilizan para cambiar el fondo general o los colores de las imágenes. Debe haberlo usado mientras hacía clic en las fotos en su teléfono para cambiar el contraste de brillo o el color completo de sus fotos. Hay un filtro de marketing disponible en Primer CSS para aplicar efectos visuales. Los usuarios pueden usarlos en etiquetas div o imágenes para convertirlas en escala de grises .
Clase de filtro de marketing utilizado:
- escala de grises : agregue la clase .grayscale para aplicar el efecto de escala de grises en las etiquetas o imágenes div.
Sintaxis:
<img src="#" class="grayscale"/>
Ejemplo 1: Este ejemplo demuestra los filtros de Primer CSS Marketing en un div usando la clase de escala de grises .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Marketing Filters</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css"/> </head> <body> <div class="text-center"> <h1 class="color-fg-success">GeeksforGeeks</h1> <h5 class="color-fg-success">Normal Div</h5> <br/> </div> <div class="text-center grayscale"> <h1 class="color-fg-success">GeeksforGeeks </h1> <h3><u>Primer CSS Marketing Filters</u></h3> <br/> <h5>Grayscale div</h5> <br/> </div> </body> </html>
Producción:
División en escala de grises.
Ejemplo 2: Este ejemplo demuestra los filtros de Primer CSS Marketing en una imagen usando la clase de escala de grises .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Marketing Filters</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success">GeeksforGeeks </h1> <h3><u>Primer CSS Marketing Filters</u></h3><br/> <h5>Normal Image</h5><br/> <img src= 'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'/> <br/><br/> <h5>Grayscale filter applied</h5><br/> <img class="grayscale" src= 'https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg'/> </div> </body> </html>
Salida: puede ver que se eliminaron todos los colores predeterminados de la imagen y se volvió gris cuando se aplicó un filtro.
Imagen en escala de grises.
Referencia: https://primer.style/css/utilities/marketing-filters
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA