Semantic UI es un marco de código abierto que utiliza CSS y jQuery para crear excelentes interfaces de usuario. Es lo mismo que un bootstrap para usar y tiene grandes elementos diferentes para usar para hacer que su sitio web se vea más increíble. Utiliza una clase para agregar CSS a los elementos. Dimmer es una excelente manera de llamar la atención del usuario a una parte específica de la página web, ignorando las distracciones. Se puede usar un atenuador para difuminar su contenido y atraer la atención del usuario. La interfaz de usuario semántica nos proporciona la clase de desenfoque para desenfocar un atenuador.
Clases de variación de desenfoque de atenuador de interfaz de usuario semántica:
- desenfoque: crea un segmento que se puede desenfocar con un dimmer.
Sintaxis:
<div class="ui blurring segment"> <div class="ui dimmer"></div> <p></p> ... </div>
Ejemplo 1: En el siguiente ejemplo, hemos ilustrado la variación de desenfoque del atenuador.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dimmer Blurred Variation</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body style="width: 100vw; height: 100vh;">
<div class="ui container">
<h2 style="color: green;">GeeksForGeeks</h2>
<h4>Semantic UI Dimmer Blurred Variation</h4>
<hr>
<br />
<div class="ui blurring segment">
<div class="ui inverted dimmer"></div>
<p>
Greetings to all the Geeks out there! We
welcome you to the platform where we consistently
strive to offer the best of education.
</p>
<p>
This platform has been designed for every geeks
wishing to expand knowledge, share their knowledge
and is ready to grab their dream job. We have millions
of articles,live as well as online courses, thousands
of tutorials and much more just for the geek inside you.
Thank you for choosing and supporting us!
</p>
<p>
GeeksForGeeks is an amazing website to learn coding.
</p>
<p>
Machine Learning, Web Development, Android
Development, Data Science, you name it, it's
all available on GeeksForGeeks.
</p>
</div>
</div>
<script>
$('.segment').dimmer('show');
</script>
</body>
</html>
Producción:
Variación de desenfoque de atenuación
Ejemplo 2: En el siguiente ejemplo, hemos ilustrado cómo se puede usar la variación de desenfoque de atenuación en una página web.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Dimmer Blurred Variation</title>
<link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body style="width: 100vw; height: 100vh;">
<div class="ui container">
<h2 style="color: green;">GeeksForGeeks</h2>
<h4>Semantic UI Dimmer Blurred Variation</h4>
<hr>
<br />
<div class="ui blurring segment">
<div class="ui dimmer">
<div class="content">
<h2 class="ui inverted header">
Sign In to view info
</h2>
</div>
</div>
<p>
Greetings to all the Geeks out there! We
welcome you to the platform where we consistently
strive to offer the best of education.
</p>
<p>
This platform has been designed for every geeks
wishing to expand knowledge, share their knowledge
and is ready to grab their dream job. We have millions
of articles,live as well as online courses, thousands
of tutorials and much more just for the geek inside you.
Thank you for choosing and supporting us!
</p>
<p>
GeeksForGeeks is an amazing website to learn coding.
</p>
<p>
Machine Learning, Web Development, Android Development,
Data Science, you name it, it's all available
on GeeksForGeeks.
</p>
</div>
<button class="ui button" onclick="hide()">
Sign Out
</button>
<button class="ui button" onclick="show()">
Sign In
</button>
</div>
<script>
$('.segment').dimmer('show');
const hide = () => {
$('.segment').dimmer('show');
}
const show = () => {
$('.segment').dimmer('hide');
}
</script>
</body>
</html>
Producción:
Variación de desenfoque del atenuador de interfaz de usuario semántica
Referencia: https://semantic-ui.com/modules/dimmer.html#blurring
Publicación traducida automáticamente
Artículo escrito por coder_srinivas y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA