Blaze UI es un kit de herramientas de interfaz de usuario de código abierto gratuito 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.
Blaze UI viene con un excelente módulo de tipografía que cubre diferentes visualizaciones de texto. Hay varios tipos de clases de tipografía en la interfaz de usuario de Blaze, como hipervínculo, texto degradado, texto resaltado, texto de abreviatura, cita en bloque y mucho más. En este artículo, analizaremos la clase de tipografía Abreviatura en la interfaz de usuario de Blaze.
La tipografía de texto de abreviatura hace que el texto se destaque visiblemente y, al pasar el mouse, muestra la forma completa de la abreviatura. Para crear una tipografía de texto de abreviatura en la interfaz de usuario de Blaze, usamos la clase u-text–help . La clase u-text–help convierte el texto de andamiaje en una abreviatura o acrónimo. Esta clase se puede utilizar con el elemento HTML <abbr> .
Clase utilizada para la tipografía de texto de abreviatura:
- .u-text–help: esta clase convierte el bloque de texto en una abreviatura.
Sintaxis:
<abbr class="u-text--help" title="Full form">Abbreviation</abbr>
Ejemplo 1: el siguiente ejemplo muestra la abreviatura predeterminada con un título en la tipografía de texto flotante en la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Blaze UI</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <strong>Blaze UI Abbreviation text typography</strong> <br> <abbr class="u-text--help" title="Geeksforgeeks">GFG</abbr> is the best coding platform. </center> </body> </html>
Producción:
Producción
Ejemplo 2: el siguiente ejemplo muestra varias abreviaturas en la misma línea de texto en la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Blaze UI</title> <meta charset="utf-8"> <meta name="viewport" content= "width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> </head> <body> <center> <h1 style="color:green">GeeksforGeeks</h1> <strong>Blaze UI Abbreviation text typography</strong> <br> <abbr class="u-text--help" title="geeksforgeeks">GFG</abbr> is the best coding platform. <br/> It helps us in learning <abbr class="u-text--help" title="Data Structure and Algorithm">DSA</abbr> and <abbr class="u-text--help" title="Competitive Programming"> CP</abbr> at one place. </center> </body> </html>
Producción:
Producción
Referencia: https://www.blazeui.com/components/typography
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA