GOOD

Avatars

Size

<span class="avatar">
  <span class="size25" data-content="M"></span>
</span>
25 x 25 pixels
<span class="avatar">
  <span class="size30" data-content="M"></span>
</span>
30 x 30 pixels
<span class="avatar">
  <span class="size60" data-content="M"></span>
</span>
60 x 60 pixels
<span class="avatar">
  <span class="size80" data-content="M"></span>
</span>
80 x 80 pixels
<span class="avatar">
  <span class="size130" data-content="M"></span>
</span>
130 x 130 pixels

Color

<span class="avatar">
  <span class="banana" data-content="M"></span>
</span>
banana
<span class="avatar">
  <span class="sky" data-content="M"></span>
</span>
sky
<span class="avatar">
  <span class="tangerine" data-content="M"></span>
</span>
tangerine

Name

Add a “name” element if the avatar represents content (just like an “alt” attribute for an <img> element).

Àgus Echagüe 

<p>
  <a href="http://community.good.is/members/agusechague">
    <span class="avatar">
      <span class="tangerine size130" data-content="À"></span>
      <span class="name">Àgus Echagüe</span>
    </span>
  </a>
</p>
In this example, the member’s avatar is used as a link. By adding a “name” element, the link will make more sense to software like search engines and screen readers.


Àgus Echagüe 

<p>
  <a href="http://community.good.is/members/agusechague">
    <span class="avatar">
      <span class="tangerine size130" data-content="À"></span>
    </span><br />
    Àgus Echagüe
  </a>
</p>
In this example, the member’s name is presented next to the avatar, so a “name” element isn’t necessary.

You can make up new sizes

<span class="avatar">
  <span style="font-size: 10em; /* targetSize(240px) × ⅔ ÷ fontSize(16px) */" class="banana" data-content="M"></span>
</span>
240 x 240 pixels

And new colors

<span class="avatar">
  <span style="background-color: rgb(62, 197, 149);" class="size130" data-content="J"></span>
</span>
mega man

Examples

Followers

Comments

Activity

Voters & Doers

129 people think this is good