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.
Un atenuador oculta las distracciones para centrar la atención en un contenido particular, que lo atenuará.
Ejemplo 1:
Este ejemplo muestra el efecto de atenuación al pasar el mouse.
Para esto necesitas código jQuery.
$('.image').dimmer({
on: 'hover'
});
Código completo:
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</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>
<div style="margin-top: 20px" class="ui container">
<div class="ui medium image">
<div class="ui dimmer">
<div class="content">
<h2 class="ui inverted header">
Geeksforgeeks
</h2>
<a href="https://geeksforgeeks.org"
class="ui primary button">
Go on site
</a>
<div class="ui button">View</div>
</div>
</div>
<img class="ui image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200511124031/image30.png">
</div>
</div>
<script>
$('.image').dimmer({
on: 'hover'
});
</script>
</body>
</html>
Producción:
Ejemplo 2:
Este ejemplo muestra el efecto de atenuación al hacer clic en el botón.
Código jQuery:
$('.dim').click(function() {$('.image').dimmer('show')});
$('.show').click(function() {$('.image').dimmer('hide')});
dimy showson clases de los dos botones.
Código completo:
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</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>
<div style="margin-top: 20px" class="ui container">
<div class="ui medium image">
<div class="ui dimmer">
<div class="content">
<h2 class="ui inverted header">
Geeksforgeeks
</h2>
<a href="https://geeksforgeeks.org"
class="ui primary button">
Go on site
</a>
<div class="ui button">View</div>
</div>
</div>
<img class="ui image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200511124031/image30.png">
</div>
<br>
<button class="ui dim primary button">
Dim
</button>
<button class="ui show green button">
Show
</button>
</div>
<script>
$('.dim').click(function ()
{ $('.image').dimmer('show') });
$('.show').click(function ()
{ $('.image').dimmer('hide') });
</script>
</body>
</html>
Producción:
Ejemplo 3:
Este ejemplo muestra el efecto Blurring Dimmer.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</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>
<div style="margin-top: 20px" class="ui container">
<div class="ui blurring medium image">
<div class="ui dimmer">
<div class="content">
<h2 class="ui inverted header">
Geeksforgeeks
</h2>
<a href="https://geeksforgeeks.org"
class="ui primary button">
Go on site
</a>
<div class="ui button">View</div>
</div>
</div>
<img class="ui image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200511124031/image30.png">
</div>
<br>
<button class="ui dim primary button">
Dim
</button>
<button class="ui show green button">
Show
</button>
</div>
<script>
$('.dim').click(function ()
{ $('.image').dimmer('show') });
$('.show').click(function ()
{ $('.image').dimmer('hide') });
</script>
</body>
</html>
Producción:
Ejemplo 4:
Este ejemplo crea el efecto Dimmer invertido.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI</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>
<div style="margin-top: 20px" class="ui container">
<div class="ui medium image">
<div class="ui inverted dimmer">
<div class="content">
<h2 class="ui inverted header">
Geeksforgeeks
</h2>
<a href="https://geeksforgeeks.org"
class="ui primary button">
Go on site
</a>
<div class="ui button">View</div>
</div>
</div>
<img class="ui image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200511124031/image30.png">
</div>
<br>
<button class="ui dim primary button">
Dim
</button>
<button class="ui show green button">
Show
</button>
</div>
<script>
$('.dim').click(function ()
{ $('.image').dimmer('show') });
$('.show').click(function ()
{ $('.image').dimmer('hide') });
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por iamsahil1910 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA