Teclas de tipografía Blaze UI en un teclado

Blaze UI es un marco gratuito y de código abierto con un kit de herramientas de interfaz de usuario liviano que proporciona una excelente estructura para crear sitios web rápidamente con una base escalable y mantenible. Todos los componentes de la interfaz de usuario de Blaze se desarrollan primero para dispositivos móviles y se basan únicamente en las características 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, aprenderemos sobre las teclas tipográficas en un teclado que utiliza la interfaz de usuario de Blaze.

Tipografía: el marco de Blaze UI viene con un módulo de tipografía agradable que cubre diferentes visualizaciones de texto.

Teclas en un teclado: cuando desea describir qué teclas presionar generalmente como parte de la documentación de soporte, se prefiere usar la clase de teclado.

Clases utilizadas:

  • u-kbd: esta clase se utiliza para proporcionar teclas en una interfaz de teclado. En palabras simples, los elementos se verán como teclas en el teclado.

Sintaxis:

<kbd class="u-kbd"></kbd>

Ejemplo 1: En el siguiente ejemplo veremos cómo podemos usar Teclas en un 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">
    <title>Blaze UI Keys on a keyboard</title>
</head>
<body>
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
        <h3>Blaze UI Keys on a keyboard</h3>
        <kbd class="u-kbd">GeeksforGeeks</kbd>
    </center>
</body>
</html>

Producción:

 

Ejemplo 2:

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">
    <title>Blaze UI Keys on a keyboard</title>
    <style>
        body{
            background-color:lightgrey;
            color:black;
        }
    </style>
     
</head>
<body>
    <center>
        <h1 style="color: green;">GeeksforGeeks</h1>
        <h3>Blaze UI Keys on a keyboard</h3>
        <kbd class="u-kbd">GeeksforGeeks</kbd> <br><br>
        <kbd class="u-kbd">1</kbd>
        <kbd class="u-kbd">2</kbd>
        <kbd class="u-kbd">3</kbd>
        <kbd class="u-kbd">4</kbd>
        <kbd class="u-kbd">5</kbd>
        <kbd class="u-kbd">6</kbd>
        <kbd class="u-kbd">7</kbd>
        <kbd class="u-kbd">8</kbd>
        <kbd class="u-kbd">9</kbd>
        <kbd class="u-kbd">10</kbd>
    </center>
</body>
</html>

Producción:

 

Referencia: https://www.blazeui.com/components/typography/

Publicación traducida automáticamente

Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *