coderwall logo made with HTML & CSS

I recreated the coderwall logo with HTML & CSS:

You can find the live version & the source here:
http://codepen.io/TimPietrusky/pen/hLolB

The logo

The font used is ITC Avant Garde Gothic (thanks to javier_toledo), but is not available as a free web font. That's why I use the native fonts URW Gothic L for Linux, Century Gothic for Mac/Windows and sans serif as a fallback. But if someone has Avant Garde currently installed, it will be used!

h1 {
  position:relative;
  color:#fff;
  font:bold 4em  "Avant Garde", "URW Gothic L", "Century Gothic", sans serif;
  letter-spacing: -.01em;
  text-shadow: 0 -.015em .05em rgba(0, 0, 0, .7);
}

The dots

Every dot is a radial-gradient with a specific background-position.

h1:before {
  position:absolute;
  top:-.3em;
  left:-1.95em;
  width:3em;
  height:2em;
  content:'';

  background:
    /* 
     * blue dots 
     */
    radial-gradient(circle, #3B76A7 20%, transparent 20%),
    radial-gradient(circle, #3B76A7 20%, transparent 20%),
    radial-gradient(circle, #3B76A7 20%, transparent 20%),
    radial-gradient(circle, #3B76A7 20%, transparent 20%),
    radial-gradient(circle, #3B76A7 20%, transparent 20%),
    radial-gradient(circle, #3B76A7 20%, transparent 20%),

    /*
     * shadow dots
     */
    radial-gradient(circle, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, .1) 21%, transparent 21%),
    radial-gradient(circle, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, .1) 21%, transparent 21%),
    radial-gradient(circle, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, .1) 21%, transparent 21%),
    radial-gradient(circle, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, .1) 21%, transparent 21%),
    radial-gradient(circle, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, .1) 21%, transparent 21%),
    radial-gradient(circle, rgba(0, 0, 0, .3) 16%, rgba(0, 0, 0, .1) 21%, transparent 21%) 
  ;

  background-size:1em 1em;
  background-repeat:no-repeat;

  background-position:
    /*
     * blue dots
     */ 
    /* right */
    1em 1em,
    1em .5em,
    1em 0,

    /* middle */
    .5em .5em,
    .5em 0,

    /* left */
    0 0,

    /*
     * shadow dots
     */
    /* right */
    1em .985em,
    1em .485em,
    1em -.025em,

    /* middle */
    .5em .485em,
    .5em -.025em,

    /* left */
    0 -.025em
  ;