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.
El elemento Tarjeta de IU semántica muestra el contenido del sitio de manera similar a un naipe que usa las clases de IU semántica. En este artículo, discutiremos las variaciones de color de las tarjetas de interfaz de usuario semántica.
Para crear una variación de color de la tarjeta de interfaz de usuario semántica, usamos el color deseado como clase junto con la clase de tarjeta. Por ejemplo, si necesitamos una variación de color rojo de la tarjeta de interfaz de usuario semántica, usamos rojo y tarjeta como clases para padre <div>. Esto hace que el color de la sombra del borde inferior de la tarjeta sea el color mencionado.
Clase de variación de color de la tarjeta de interfaz de usuario semántica:
- red: Esta clase se utiliza para establecer el color rojo.
- naranja: esta clase se utiliza para establecer el color naranja.
- amarillo: Esta clase se utiliza para establecer el color amarillo.
- oliva: Esta clase se utiliza para establecer el color oliva.
- green: Esta clase se utiliza para establecer el color verde.
- verde azulado: esta clase se utiliza para establecer el color verde azulado.
- azul: Esta clase se utiliza para establecer el color azul.
- purple: esta clase se usa para establecer el color púrpura.
- violeta: Esta clase se utiliza para establecer el color violeta.
- rosa: Esta clase se utiliza para establecer el color rosa.
- marrón: esta clase se utiliza para establecer el color marrón.
- gris: Esta clase se utiliza para establecer el color gris.
- negro: esta clase se utiliza para establecer el color negro
Sintaxis:
<div class="Colored-Variation-Class card">
content....
</div>
Ejemplo: Este ejemplo demuestra varias variaciones de color de la tarjeta semántica-UI.
HTML
<!DOCTYPE html> <html> <head> <link href= "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet"/> </head> <body> <center> <h1>Geeksforgeeks</h1> <strong> Semantic UI card colored-variations </strong><br/><br/> </center> <div class="ui four cards"> <div class="red card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> <div class="orange card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> <div class="yellow card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> <div class="olive card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> <div class="green card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> <div class="teal card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> <div class="blue card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> <div class="violet card"> <div class="image"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png"/> </div> <div class="content"> Geeksforgeeks Card </div> </div> </div> </body> </html>
Producción:
Producción
Referencia: https://semantic-ui.com/views/card.html#Colored
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA