Blaze UI es un marco de código abierto de CSS. Es un conjunto de herramientas de interfaz de usuario liviano y 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. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
En este artículo, vamos a aprender sobre la variación de superposiciones . El componente de superposición se usa en muchos otros componentes, como modal, para oscurecer el contenido de la página. Para hacer uso de superposiciones se utiliza la clase c-overlay . De forma predeterminada, las superposiciones están ocultas. Para hacer visibles las superposiciones, podemos usar la clase c-overlay–visible .
Variaciones:
- .c-overlay–visible: este modificador se utiliza para superposiciones que están ocultas de forma predeterminada.
- .c-overlay–dismissible: este modificador se usa para dar la sensación de que puede hacer clic en una superposición para hacerla desaparecer.
- .c-overlay–transparent: este modificador se usa para superposiciones que no necesariamente tienen que ser visibles, pueden aparecer transparentes para proporcionar funcionalidad pero no señales visuales.
- .c-overlay–fullpage: este modificador se usa para hacer que las superposiciones cubran toda la página.
Sintaxis:
<div class="c-overlay c-overlay--visible"></div>
Ejemplo 1: en los siguientes ejemplos, verá el efecto de las superposiciones.
- Antes de agregar el efecto de superposición:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Overlay Variation </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Overlay Variation </h3> <div class="c-card"> <header class="c-card__header"> <h2 class="c-heading"> GeeksforGeeks Overlay Variation </h2> </header> <div class="c-card__body"> A Computer Science portal for geeks. </div> </div> </div> </body> </html>
Producción:
- Después de agregar el efecto de superposición:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Overlay Variation </title> <link rel="stylesheet" href= "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> </head> <body> <div class="u-centered"> <h1 style="color: green;"> GeeksforGeeks </h1> <h3> Blaze UI Overlay Variation </h3> <div aria-hidden class="c-overlay c-overlay--visible"> <div class="c-card"> <header class="c-card__header"> <h2 class="c-heading"> GeeksforGeeks Overlay Variation </h2> </header> <div class="c-card__body"> A Computer Science portal for geeks. </div> </div> </div> </div> </body> </html>
Producción:
Ejemplo 2: En el siguiente ejemplo, veremos el uso de la clase .c-overlay–visible.
- Antes de usar .c-overlay–variación visible .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Blaze UI - Basic Overlay</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<style>
body {
font-family: sans-serif;
text-align: center;
color: grey;
}
</style>
</head>
<body style="background-color:black" ; color="green">
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3> Overlay - Blaze UI</h3>
<div>
<h2>What is GeeksforGeeks used for?</h2>
<p>
We provide a variety of services for you
to learn, thrive and also have fun! Free
Tutorials, Millions of Articles, Live,
Online and Classroom Courses ,Frequent
Coding Competitions ,Webinars by Industry
Experts, Internship opportunities and
Job Opportunities. Knowledge is power!
</p>
</div>
<div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220525220724/green1-300x171.jpg"
alt="Girl in a jacket" width="300" height="200">
</div>
</body>
</html>
Producción:
Interfaz de usuario de Blaze | superposiciones
- Después de usar .c-overlay-variación visible .
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Blaze UI - Basic Overlay</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css">
<style>
body {
font-family: sans-serif;
text-align: center;
color: grey;
}
</style>
</head>
<body style="background-color:black" ; color="green">
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3> Overlay - Blaze UI</h3>
<div>
<h2>What is GeeksforGeeks used for?</h2>
<p>
We provide a variety of services for you
to learn, thrive and also have fun! Free
Tutorials, Millions of Articles, Live,
Online and Classroom Courses, Frequent
Coding Competitions, Webinars by Industry
Experts, Internship opportunities and
Job Opportunities. Knowledge is power!
</p>
</div>
<div class="c-overlay c-overlay--visible" aria-hidden="true">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220525220724/green1-300x171.jpg"
alt="Girl in a jacket" width="300" height="200">
</div>
</body>
</html>
Producción:
Interfaz de usuario de Blaze | superposiciones
Referencia: https://www.blazeui.com/components/overlays/
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