z5wuia
Last Updated: February 25, 2016
·
3.395K
· timpietrusky

coderwall logo made with HTML & CSS

I recreated the coderwall logo with HTML & CSS:

Picture

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
  ;

7 Responses
Add your response

245

I think the font is ITC Avant Garde Gothic Bold: http://www.fonts.com/font/itc/itc-avant-garde-gothic/bold

over 1 year ago ·
253
over 1 year ago ·
254

I'd include ITC Avant Garde Gothic for the people that do have the font on their computers.

over 1 year ago ·
259

@javier_toledo @timpietrusky yep you got it - I used ITC Avant Garde Gothic :)

over 1 year ago ·
260

@olilish Awesome :D What do you think of my CSS version of your logo?

over 1 year ago ·
263

@guido Thanks for suggestion this! I added Avant Garde to my font-family stack.

over 1 year ago ·
2248

Rebound with pure HTML and simple CSS (sorry I don't have the correct font)
http://jsbin.com/uviqub/1

over 1 year ago ·