Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Los avatares son una herramienta importante para indicar la identificación del usuario o diferentes logotipos en la página web. Existen diferentes tipos de avatares básicos de los que podemos hacer uso.
- Básico: Esto se usa para definir un avatar básico simple. Puede establecer el ancho y la altura del avatar.
- Tamaños de avatar: Esto se usa para dar diferentes tamaños a los avatares del tamaño 1 al 8 en las clases de avatar.
- Pila de avatares: se utiliza para apilar 2 o más avatares uno encima del otro.
- Avatares padre-hijo: Esto le permite agregar un avatar hijo al avatar padre.
Clase:
- avatar: agregue la clase de avatar al elemento respectivo para implementar ejemplos básicos.
Sintaxis:
<div class="avatar ">
UI element to be shown.
</div>
Ejemplo 1: Este ejemplo demuestra los diferentes tipos de Primer CSS Avatars Ejemplo básico usando la clase avatar .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Avatars Basic Examples</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3>Primer CSS Avatars Basic Examples</h3><br /> </div> <div class="container-lg clearfix" style="text-align: center;"> <div class="col-3 float-left border p-3"> <h5><u>Avatar Basic</u></h5><br /> <img class="avatar" alt="geeksforgeeks" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" width="64" height="64" /> </div> <div class="col-6 float-left border p-6"> <h5><u>Avatar Sizes</u></h5><br /> <img class="avatar avatar-1 mr-2"src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" /> <img class="avatar avatar-2 mr-2" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" /> <img class="avatar avatar-3 mr-2" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" /> <img class="avatar avatar-4 mr-2" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" /> <img class="avatar avatar-5 mr-2" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" /> <img class="avatar avatar-6 mr-2" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" /> <img class="avatar avatar-7 mr-2" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" /> </div> <div class="col-3 float-left border p-3"> <h5><u>Parent Child Avatars</u></h5><br /> <div class="avatar-parent-child d-inline-flex"> <img class="avatar" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" width="48" height="48" /> <img class="avatar avatar-child" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" width="20" height="20" /> </div> </div> </div> </body> </html>
Producción:
Ejemplo básico de avatar
Ejemplo 2: Este ejemplo demuestra la pila de avatares de Primer CSS usando la clase AvatarStack .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Avatars Basic Examples</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3><u>Primer CSS Avatars Stack</u></h3><br /> </div> <div class="d-flex flex-justify-center"> <div class="AvatarStack AvatarStack--two"> <div class="AvatarStack-body tooltipped tooltipped-se tooltipped-align-left-1" aria-label="GeeksforGeeks Avatars"> <img class="avatar" style="width:50px; height:50px;" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"/> <img class="avatar" style="width:50px; height:50px;" src= "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg"/> </div> </div> </div> </body> </html>
Producción:
Pila de avatares
Enlace de referencia: https://primer.style/css/components/avatars#basic-example
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA