Bulma Hero es un componente esencial con la ayuda del cual podemos crear un banner de ancho completo en nuestra página web. Opcionalmente, este banner también puede cubrir toda la altura de la página.
Bulma Hero Colors son diferentes tipos de colores que están disponibles para el modificador Hero. Estos diversos colores se conocen como modificadores de color. Estos modificadores de color se escriben junto con el nombre del contenedor. No son más que degradados, es decir, una mezcla de varios colores en una cantidad particular. Familiaricémonos con todos los modificadores de color disponibles.
Clase de colores de Bulma Hero:
- is-primary: el modificador se usa para aplicar el color primario en nuestro componente héroe. Su valor HSL es: HSL (171, 100%, 41%). Este color se puede reconocer como un color verde primaveral medio lavado. Es similar al color turquesa.
- is-danger: El modificador se usa para aplicar color de peligro en nuestro componente héroe. Su valor HSL es: HSL (348, 100%, 61%). Este color se puede reconocer como un color rosa medio lavado. Es similar al color Radical Red.
- is-link: el modificador se usa para aplicar el color del enlace en nuestro componente principal. Su valor HSL es: HSL (217, 71%, 53%). Este color se puede reconocer como un color azul aciano. Es similar al color azul.
- is-info: El modificador is-info se usa para aplicar color de información en nuestro componente héroe. Su valor HSL es: HSL (204, 86%, 53%). Este color se puede reconocer como un color azul medio lavado. Es similar al color cian.
- is-success: el modificador se usa para aplicar el color de éxito en nuestro componente héroe. Su valor HSL es: HSL (141, 53%, 53%). Este color se puede reconocer como un color verde mar medio. Es similar al color verde.
- is-warning: el modificador se usa para aplicar un color de advertencia en nuestro componente héroe. Su valor HSL es: HSL (48, 100%, 67%). Este color se puede reconocer como un color amarillo claro apagado. Es similar al color amarillo.
Sintaxis: la sintaxis para todos los colores será la misma para todas las clases a continuación, y la única diferencia será el nombre del color.
<section class="hero is-primary">
Ejemplo 1:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width = device-width, initial-scale = 1"> <!-- Linking Bulma --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> <script src= "https://use.fontawesome.com/releases/v5.1.0/js/all.js"> </script> </head> <body> <section class="hero is-primary"> <div class="hero-body"> <p class="title"> This is Primary Color </p> <p class="subtitle"> Primary Hero </p> </div> </section> <br> <section class="hero is-danger"> <div class="hero-body"> <p class="title"> This is Danger Color </p> <p class="subtitle"> Danger Hero </p> </div> </section> <br> <section class="hero is-link"> <div class="hero-body"> <p class="title"> This is Link Color </p> <p class="subtitle"> Link Hero </p> </div> </section> </body> </html>
Producción:
Bulma Héroe Colores
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content= "width = device-width, initial-scale = 1"> <!-- Linking Bulma --> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> <script src= "https://use.fontawesome.com/releases/v5.1.0/js/all.js"> </script> </head> <body> <section class="hero is-info"> <div class="hero-body"> <p class="title"> This is Info Color </p> <p class="subtitle"> Info Hero </p> </div> </section> <br> <section class="hero is-success"> <div class="hero-body"> <p class="title"> This is Success Color </p> <p class="subtitle"> Success Hero </p> </div> </section> <br> <section class="hero is-warning"> <div class="hero-body"> <p class="title"> This is Warning Color </p> <p class="subtitle"> Warning Hero </p> </div> </section> </body> </html>
Producción:
Bulma Héroe Colores
Referencia: https://bulma.io/documentation/layout/hero/
Publicación traducida automáticamente
Artículo escrito por shreyasnaphad y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA