El marco de código abierto de la interfaz de usuario semántica brinda íconos o glifos que se usan para mostrar imágenes relacionadas con algunos elementos usando CSS y jQuery que se usan para crear excelentes interfaces de usuario. Es un marco de desarrollo utilizado para crear diseños hermosos y receptivos.
El icono de interfaz de usuario semántica es un glifo que se utiliza para mostrar otra cosa en lugar de texto para ahorrar espacio y tiempo. Los iconos se utilizan para ayudar a los usuarios a navegar y tienen el mismo significado en todos los idiomas y, por lo tanto, muchos elementos no necesitan estar escritos en diferentes idiomas.
La variación invertida de los iconos de la interfaz de usuario semántica invierte el color de los iconos para el contraste. Esto significa que el color de fondo es negro y los colores de los iconos se cambian para hacerlos visibles.
Clase de variación invertida de iconos de interfaz de usuario semántica:
- invertido: Al agregar esta clase al elemento icono, se cambia el color para aumentar el contraste.
Sintaxis:
<i class="inverted icon">
...
</i>
Ejemplo: El siguiente ejemplo ilustra la variación invertida de los iconos de la interfaz de usuario semántica . En este ejemplo, hemos invertido el color del contenedor div , así como el color de los íconos del globo terráqueo, ya que el original del primero es negro, pero como está invertido, se muestra blanco.
HTML
<!DOCTYPE html>
<html>
<head>
<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">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</script>
</head>
<body style="margin-left:10px;margin-right:10px">
<div class="ui container">
<center>
<h1 class="ui header green">
GeeksforGeeks
</h1>
<strong>Semantic UI Icons Inverted Variation</strong>
</center>
</div>
<div>
<center>
<div class="ui inverted segment">
<i class="inverted globe large icon"></i>
<i class="inverted red globe large icon"></i>
<i class="inverted orange globe large icon"></i>
<i class="inverted yellow globe large icon"></i>
<i class="inverted olive globe large icon"></i>
<i class="inverted green globe large icon"></i>
<i class="inverted teal globe large icon"></i>
<i class="inverted blue globe large icon"></i>
<i class="inverted violet globe large icon"></i>
<i class="inverted purple globe large icon"></i>
<i class="inverted pink globe large icon"></i>
<i class="inverted brown globe large icon"></i>
<i class="inverted grey globe large icon"></i>
</div>
</center>
</div>
<script>
function toggleFloat() {
$("button").toggleClass("left floated")
.toggleClass("right floated");
}
</script>
</body>
</html>
Producción:
Referencia: https://semantic-ui.com/elements/icon.html#inverted
Publicación traducida automáticamente
Artículo escrito por manavsarkar07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA