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.
Semantic UI Reveal se usa para revelar contenido fácilmente en lugar de usar CSS. En Semantic-UI Reveal, se muestra contenido adicional en lugar del contenido anterior cuando se activa el elemento. La interfaz de usuario semántica ofrece diferentes tipos de revelación, como desvanecimiento, movimiento y rotación, e incluso con diferentes variaciones y con diferentes contenidos y estados. En este artículo, vamos a aprender acerca de Semantic-UI Reveal Fade Type junto con su implementación usando un código de ejemplo.
El tipo de fundido de revelación de interfaz de usuario semántica es un tipo de revelación en el que el contenido anterior desaparece para mostrar el contenido adicional presente debajo. El contenido anterior se desvanece para mostrar el contenido presente debajo de él.
Clase de tipo de fundido de revelación de interfaz de usuario semántica:
- desvanecimiento: estas clases se utilizan para revelar contenido adicional al desvanecer el contenido anterior.
Sintaxis:
<div class="ui fade reveal image">
<img class="visible content" src=".....">
...
</div>
Ejemplo 1:
HTML
<html> <head> <link rel="stylesheet" href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> <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> <div class="ui container"> <h2 class="ui header green"> Geeksforgeeks </h2> <strong>Semantic-UI Reveal Fade Type</strong> <br><br> <div class="ui small fade reveal image"> <img class="visible content" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220219163921/gfglogo-300x300.png"> <img class="hidden content" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png"> </div> </div> </body> </html>
Producción:
Tipo de fundido de revelación de interfaz de usuario semántica
Ejemplo 2:
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> <div class="ui container"> <h2 class="ui header green"> Geeksforgeeks </h2> <strong>Semantic-UI Reveal Fade Type</strong> <br><br> <div class="ui fade reveal"> <div class="visible content"> <img class="ui small image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220221210426/unnamed-300x300.jpg"> </div> <div class="hidden content"> <img class="ui small image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png"> </div> </div> </div> </body> </html>
Producción:
Tipo de fundido de revelación de interfaz de usuario semántica
Referencia: https://semantic-ui.com/elements/reveal.html#fade
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA