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, cita en bloque y mucho más. En este artículo, analizaremos la clase de tipografía Gradient en la interfaz de usuario de Blaze.
La tipografía de texto degradado hace que el color del texto sea un degradado horizontal del color deseado. Para crear una tipografía de texto degradado en la interfaz de usuario de Blaze, usamos la clase .u-gradient-text . La clase .u-gradient-text hace que el color del texto sea un degradado que va de color claro a oscuro de izquierda a derecha. Esta clase se puede usar con los elementos <div>, <p> y <span>.
Blaze UI Typography Gradient clases de texto utilizadas:
- .u-gradient-text: esta clase hace que el color del texto sea un degradado horizontal.
Sintaxis:
<div class="u-gradient-text">
...
</div>
Ejemplo 1: el siguiente ejemplo muestra la tipografía de texto degradado predeterminada en la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Blaze UI</title> <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 Gradient text typography</strong> <br> <div class="u-gradient-text"> Geeksforgeeks is the biggest computer science portal in the whole world. </div> </center> </body> </html>
Producción:
Blaze UI Tipografía Texto degradado
Ejemplo 2: el siguiente ejemplo muestra la tipografía de texto degradado con color modificado en la interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Blaze UI</title> <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 Gradient text typography</strong> <br> <div class="u-gradient-text"> Geeksforgeeks is the biggest computer science portal in the whole world. </div> <br/> <div class="u-gradient-text u-gradient-text--info"> Geeksforgeeks is the biggest computer science portal in the whole world. </div> <br/> <div class="u-gradient-text u-gradient-text--warning"> Geeksforgeeks is the biggest computer science portal in the whole world. </div> <br/> <div class="u-gradient-text u-gradient-text--success"> Geeksforgeeks is the biggest computer science portal in the whole world. </div> <br/> <div class="u-gradient-text u-gradient-text--error"> Geeksforgeeks is the biggest computer science portal in the whole world. </div> </center> </body> </html>
Producción:
Blaze UI Tipografía Texto degradado
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