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.
Podemos mostrar el contenido web en forma de tarjetas de la misma manera que se muestra el contenido en los naipes en la interfaz de usuario semántica de una manera muy simple en comparación con la escritura de códigos CSS. Podemos mostrar el contenido de las tarjetas en muchas variaciones, como tarjeta centrada, tarjeta fluida, tarjeta en relieve, etc. e incluir diferentes contenidos como botones, enlaces, etc. En este artículo, aprenderemos sobre una de las variaciones de la tarjeta que es Semántica. -Variación levantada de la tarjeta UI junto con su implementación usando el código de ejemplo.
En la variación levantada de la tarjeta de interfaz de usuario semántica, la variación conduce al levantamiento de la tarjeta. Está formateado de tal manera que sobresale por encima de la página. Podemos usar las siguientes clases para lograr eso.
Clase de contenido de variación elevada de tarjeta de interfaz de usuario semántica:
- levantado: toda la clase debe incluirse con esta clase para permitir el levantamiento de la tarjeta de la página anterior.
Sintaxis:
<div class="ui raised card">
<div class="content">
......
</div>
</div>
Ejemplo 1: podemos incluir el encabezado en la clase .header , la descripción en la clase .description y la información adicional en la clase .extracontent como se muestra en el siguiente ejemplo.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Card Raised 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> <center> <h1 class="header ui green">GeeksforGeeks</h1> <strong>Semantic UI Card Raised Variation</strong> <div class="ui raised card"> <div class="content"> <div class="header">GeeksforGeeks</div> <div class="meta"> <span class="category"> Website for interview preparation </span> </div> <div class="description"> <p> Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. </p> </div> </div> <div class="extra content"> <div class="right floated author"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> GeeksforGeeks </div> </div> </div> </center> </body> </html>
Producción:
Variación elevada de la tarjeta de interfaz de usuario semántica
Ejemplo 2 : podemos usar una clase .link para vincular la tarjeta a otra página y también habilitar una tarjeta de enlace elevada como se muestra en el siguiente ejemplo. Esto es similar al ejemplo anterior, pero cuando pasamos el cursor sobre la tarjeta, podemos observar el movimiento.
HTML
<!DOCTYPE html> <html> <head> <title>Semantic-UI Card Raised 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> <center> <h1 class="header ui green">GeeksforGeeks</h1> <strong>Semantic UI Card Raised Variation</strong> <div class="ui raised card"> <div class="content"> <div class="header">GeeksforGeeks</div> <div class="meta"> <span class="category"> Website for interview preparation </span> </div> <div class="description"> <p> Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. </p> </div> </div> <div class="extra content"> <div class="right floated author"> <img class="ui avatar image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220129212154/1ZRVNQB400x400-300x300.jpg"> GeeksforGeeks </div> </div> </div> </center> </body> </html>
Producción:
Variación elevada de la tarjeta de interfaz de usuario semántica
Referencia: https://semantic-ui.com/views/card.html#raised-card
Publicación traducida automáticamente
Artículo escrito por geethika1129 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA