Recriei o logotipo do coderwall com HTML e CSS:
Você pode encontrar a versão ao vivo e a fonte aqui:
http://codepen.io/TimPietrusky/pen/hLolB
O logotipo
A fonte usada é ITC Avant Garde Gothic (graças a javier_toledo), mas não está disponível como uma fonte gratuita da web. É por isso que uso as fontes nativas URW Gothic L para Linux, Century Gothic para Mac / Windows e sans serif como fallback. Mas se alguém tiver o Avant Garde instalado atualmente, ele será usado!
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);
}Os pontos
Cada ponto é um com um específico .radial-gradientbackground-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
;