Blaze UI es un kit de herramientas de interfaz de usuario CSS gratuito y de código abierto que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y fácil de mantener. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las funciones nativas del navegador, no en una biblioteca o marco por separado. Nos ayuda a crear un sitio web escalable y receptivo de manera rápida y eficiente con un estilo consistente.
En este artículo, veremos el énfasis en la tipografía de Blaze UI. Enfatizar el texto permite a los usuarios agregar texto en dos colores, es decir, claro y oscuro, ya que ayuda a identificar qué texto es importante.
Blaze UI Typography Clases de énfasis:
- u-text–loud: esta clase se utiliza para agregar un texto resaltado en voz alta o de color oscuro.
- u-text–quiet: esta clase se usa para agregar un texto enfatizado silencioso o de color claro.
Sintaxis:
<div class="u-text--loud">Text here...</div> <div class="u-text--quiet">Another text here...</div>
Ejemplo 1: El siguiente ejemplo muestra el texto enfatizado en una etiqueta <p> .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h1 style="color: green"> GeeksforGeeks </h1> <h2>Blaze UI Typography Emphasising </h2> <p class="u-text--loud"> This is dark colored Emphasised text. </p> <p class="u-text--quiet"> This is light colored Emphasised text. </p> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra el texto enfatizado en una etiqueta <h1> y <h2> .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h1 style="color:green"> GeeksforGeeks </h1> <h2>Blaze UI Typography Emphasising </h2> <h1 class="u-text--loud"> Emphasised text in H1 tag. </h1> <h2 class="u-text--quiet"> Emphasised text in H2 tag. </h2> </div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/typography
Publicación traducida automáticamente
Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA