Blaze UI es un kit de herramientas de interfaz de usuario ligero de código abierto de CSS que proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos.
Blaze UI Typography contiene una gran cantidad de módulos de tipografía que le permiten modificar o diseñar el texto fácilmente. La tipografía contiene estilos para párrafos, enlaces, encabezados, código y mucho más.
Tipografía de la interfaz de usuario de Blaze:
- Párrafos : si desea diseñar sus párrafos, use la clase de párrafo.
- Hipervínculos : la clase .c-link se usa para hacer que el texto parezca un hipervínculo o para usar los estilos coherentes de Blaze para los hipervínculos.
- Gradiente de texto : Esto aplica un degradado al texto y podemos personalizar el color usando los diferentes colores.
- Resaltar texto : Esto se utiliza para resaltar un texto.
- Enfatizar : Esto se usa para enfatizar más en el texto.
- Abreviaturas : Esto se usa para la accesibilidad y usa una información sobre herramientas para hacer que el contenido sea más accesible.
- Monoespaciado : Esto se usa para hacer el texto de la familia de fuentes mono.
- Teclas en un teclado : esto es útil para mostrar los botones del teclado con texto en la página web.
- Código en línea y multilínea : la clase .u-code se puede usar para resaltar el código dentro de una página. El valor predeterminado es en línea, sin embargo, la modificación .u-code–multiline se puede usar para mostrar fragmentos de varias líneas.
- Blockquote : Esto se utiliza para dar formato a una sección como una cita en bloque.
Sintaxis : use la siguiente sintaxis para crear un párrafo en la interfaz de usuario de Blaze.
<p class="c-paragraph">
...
</p>
Ejemplo 1: En el siguiente ejemplo, tenemos una sección de párrafo y código .
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"/>
<script type="module"
src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
</script>
<script nomodule=""
src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
</script>
<script src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
</head>
<body>
<div class="o-container"
style="padding:1em;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Typography</strong>
<br/><br/>
<p class="c-paragraph">
Welcome to GeeksforGeeks.
The following code shows to add two numbers
and print them in Python3 language.
</p>
</center>
<code class="u-code u-code--multiline">
print("5+3 =",5+3)
</code>
</div>
</body>
</html>
Producción:
Ejemplo 2: En el siguiente ejemplo, tenemos una cita en bloque y un texto degradado .
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"/> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src= "https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding:1em;"> <center> <h1 style="color:green;"> GeeksforGeeks </h1> <strong>Blaze UI Typography</strong> <br /><br /> <p class="u-blockquote u-blockquote--warning"> Welcome to GeeksforGeeks. </p> <div class="u-gradient-text u-gradient-text--success"> A computer science portal for geeks. </div> </center> </div> </body> </html>
Producción:
Ejemplo 3: En el siguiente ejemplo, tenemos hipervínculos y texto resaltado .
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" /> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding: 1em;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Blaze UI Typography</strong> <br /><br /> </center> <div> <h3>Links</h3> <ul> <li> <a href="#" class="c-link"> Data Structures </a> </li> <li><a href="#" class="c-link c-link--brand"> Algorithms </a></li> <li><a href="#" class="c-link c-link--success"> Web Development </a></li> </ul> <p class="u-text--highlight"> A computer science portal for geeks. </p> </div> </div> </body> </html>
Producción:
Ejemplo 4: En el siguiente ejemplo, hemos enfatizado texto, abreviaturas, monoespaciado y teclas en el teclado.
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" /> <script type="module" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js"> </script> <script nomodule="" src= "https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js"> </script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"> </script> </head> <body> <div class="o-container" style="padding:1em;"> <center> <h1 style="color: green;"> GeeksforGeeks </h1> <strong>Blaze UI Typography</strong> <br /><br /> </center> <div> <h3>Emphasising</h3> <p class="u-text--quiet"> Welcome to GeeksforGeeks </p> <p class="u-text--loud"> A computer science portal for geeks. </p> <h3>Abbreviations</h3> <abbr class="u-text--help" title="Data Structures and Algorithms"> DSA </abbr> <h3>Monospaced</h3> <span class="u-text--mono"> There are lots of tutorials on Data Structures, Algorithms, and many more. </span> <h3>Keyboard</h3> <span> <kbd class="u-kbd">ctrl+c</kbd> Keyboard shortcut is used to copy in PC </span> </div> </div> </body> </html>
Producción:
Referencia: https://www.blazeui.com/components/typography/
Publicación traducida automáticamente
Artículo escrito por RajeevSarkar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA