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 avatar es una ilustración gráfica de un usuario o del personaje o persona del usuario. Generalmente es una imagen circular. En las páginas web es muy utilizado para mostrar la foto de perfil del usuario o para mostrar la imagen en un ítem listado.
Para convertir una imagen normal en el avatar en la IU semántica, usamos la clase avatar junto con las clases ui e image . Estas clases se aplican solo a la etiqueta <img> y no funcionan con otras etiquetas HTML.
Variaciones de imagen de interfaz de usuario semántica Clase de variante de avatar:
- avatar: esta clase se utiliza para convertir una imagen normal en una imagen de avatar.
Sintaxis:
<img class="ui avatar image" src="image.png">
Nota: Para usar solo la función de clase «avatar», no necesitamos agregar scripts de interfaz de usuario semántica.
Ejemplo: este ejemplo muestra una imagen de avatar básica creada con la clase de avatar de la interfaz de usuario semántica.
HTML
<!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" /> </head> <body> <center> <h1 class="header ui green">GeeksforGeeks</h1> <strong>Semantic-UI Image Variations Avatar Variant</strong><br/> <img class="ui image tiny avatar" src= "https://media.geeksforgeeks.org/wp-content/uploads/20200122115631/GeeksforGeeks210.png"/> user 1 <br/><br/> <img class="ui image tiny avatar" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220204080028/geeksimage2-200x146.png"/> user 2 <br/><br/> <img class="ui image tiny avatar" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220204080129/geeksimage3-200x147.png"/> user 3 </center> </body> </html>
Producción:
Variaciones de imagen de interfaz de usuario semántica Variante de avatar
Referencia: https://semantic-ui.com/elements/image.html#avatar
Publicación traducida automáticamente
Artículo escrito por mishrapriyank17 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA