Blaze UI es un kit de herramientas de interfaz de usuario de código abierto sin marco. Proporciona una gran base para construir sitios web escalables más rápido. Blaze UI viene con una gran cantidad de componentes prediseñados y muchas utilidades para que los desarrolladores no tengan que crear todo desde cero. Todos sus componentes se basan únicamente en las funciones nativas del navegador, por lo que se puede usar sin ninguna biblioteca o marco.
En este artículo, veremos la elevación de la interfaz de usuario de Blaze . El componente de elevación se utiliza para dar sombras de cuadro a cualquier elemento. Hay tres clases proporcionadas por Blaze UI para dar sombras de cuadro consistentes.
Clases de elevación de la interfaz de usuario de Blaze:
- u-high: esta clase se utiliza para dar la elevación mínima a un elemento.
- u-higher: Esta clase se usa para dar una elevación media a un elemento.
- u-highest : esta clase se utiliza para dar la elevación máxima a un elemento.
Sintaxis:
<div class="u-highest"> ... </div>
Ejemplo: Este ejemplo muestra la comparación lado a lado de las tres clases de elevación mencionadas anteriormente.
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">
<title>Blaze UI - Elevation</title>
<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;
}
.wrapper {
display: flex;
}
</style>
</head>
<body>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>Elevation - Blaze UI</h3>
<div class="u-window-box-super">
<div class="o-grid">
<div class="o-grid__cell">
<p>Default Image</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152.png"
alt="gfg_logo" />
</div>
<div class="o-grid__cell">
<p>Image with <b>u-high</b> class</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152.png"
alt="gfg_logo" class="u-high" />
</div>
<div class="o-grid__cell">
<p>Image with <b>u-higher</b> class</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152.png"
alt="gfg_logo" class="u-higher" />
</div>
<div class="o-grid__cell">
<p>Image with <b>u-highest</b> class</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152.png"
alt="gfg_logo" class="u-highest" />
</div>
</div>
</div>
</body>
</html>
Producción:
Referencia: https://www.blazeui.com/utils/elevation