Primeros avatares CSS

Posted on by Rudeus Greyrat

Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que inspiran los elementos de estilo esenciales como el espaciado, la tipografía y el color. Este método sistemático se asegura de que sus patrones sean estables e interoperables entre sí. es altamente reutilizable y versátil. Está creado con el sistema de diseño de GitHub. Su enfoque de CSS se rige por los principios de CSS orientados a objetos, CSS funcional y arquitectura BEM. 

Los avatares de Primer CSS son una forma de agregar imágenes que se pueden usar generalmente como imágenes de perfil. Los avatares son una forma mucho más sencilla de agregar imágenes de perfil porque vienen con muchas clases integradas que están disponibles para personalizar una imagen destinada a un avatar.

Primeros avatares CSS:

1. avatar: Se utiliza para convertir una imagen en un avatar. Restablece algunos estilos para la alineación, soluciona un error de marcador de posición de imagen de Firefox y redondea las esquinas.

Sintaxis:

<img class="avatar" alt="" src="" width="" height="" />

2. avatar-pequeño: se usa para hacer que el avatar sea más pequeño que 24 px, y también restablece el radio del borde al nivel apropiado. 

<img class="avatar-small" alt="" src="" width="" height="" />

3. avatar-[1-8]: Se utiliza para establecer el tamaño del avatar. Los tamaños de los avatares van desde 16px hasta 64px.

<img class="avatar avatar-2" alt="" src="" width="" height="" />

4. avatar-parent-child: Esto se usa para lograr un avatar principal más grande que un avatar secundario más pequeño superpuesto. Para agregar el avatar infantil, debemos agregar el avatar-child para obtener el avatar infantil más pequeño.

<div class="avatar-parent-child">
  <img class="avatar" alt="" src="..." width="..." height="..." />
  <img class="avatar avatar-child" alt="" src="..." width="..." height="..." />
</div>

5. AvatarStack, AvatarStack-dos, AvatarStack-tres-más: se utiliza para apilar varios avatares uno sobre el otro. Esto se puede usar generalmente para mostrar múltiples participantes o usuarios. AvatarStack–two se usa para tener dos avatares y AvatarStack–tres-plus se usa para tres o más avatares. 

<div class="AvatarStack AvatarStack--three-plus">
  <div class="AvatarStack-body">
    <img class="avatar" alt="" src="" width="" height="" />
    ...
  </div>
</div>

6. Pila de avatares a la derecha: se puede usar para alinear la pila de avatares a la derecha.

<div class="AvatarStack AvatarStack--three-plus 
  AvatarStack--right">
  <div class="AvatarStack-body">
    <img class="avatar" alt="" src="" width="" height="" />
    ...
  </div>
</div>

7. CircleBadge, CircleBadge–[pequeño/mediano/grande]: Usando esta clase podemos tener el avatar en forma circular. También podemos especificar el tamaño de la insignia agregando el tamaño a CircleBadge–[size] .

<div class="CircleBadge CircleBadge--small">
    <img class="avatar" alt="" 
        src="" width="" height="" />
    ...
</div>

8. Conexión discontinua: esta clase se usa para agregar una ruta/conexión discontinua entre diferentes avatares.

<div class="DashedConnection">
  <ul class="">
    <li class="">
      <img class="avatar" alt="" 
        src="" width="" height="" />
    </li> 
    ...
  </ul>
</div>

Ejemplo 1: el siguiente código demuestra las clases de tamaño, el avatar padre-hijo y la insignia circular que se utilizan.

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="">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3>Primer CSS Avatars</h3><br />
    </div>
  
    <div class="container-lg clearfix" style="text-align: center;">
        <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 class="col-3 float-left border p-3">
            <h5><u>Circle Badge Medium</u></h5><br />
            <div class="CircleBadge CircleBadge--medium color-bg-subtle">
                <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg" 
                width="48" height="48"/>
            </div>
        </div>
    </div>
</body>
</html>

Producción:
 

 

Ejemplo 2: el siguiente código demuestra el uso de la clase DashedConnection .

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="">
        <h1 class="color-fg-success"> GeeksforGeeks </h1>
        <h3>Primer CSS Avatars</h3><br />
    </div>
    <div class="DashedConnection m-6">
        <ul class="d-flex list-style-none flex-justify-between"
            aria-label="A sample GitHub workflow">
            <li class="CircleBadge CircleBadge--small">
                <img src=
 "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg">
            </li>
        
            <li class="CircleBadge CircleBadge--small">
                <img src=
 "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg">
            </li>
              
            <li class="CircleBadge CircleBadge--small">
                <img src=
 "https://media.geeksforgeeks.org/wp-content/uploads/20210604014825/QNHrwL2q-100x100.jpg">
            </li>
        </ul>
      </div>
</body>
</html>

Producción:
 

 

Referencia: https://primer.style/css/components/avatars

Publicación traducida automáticamente

Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *