Ícone do Google+ feito com puro CSS

Bom, galera, hoje vamos ver como se cria o ícone do Google+ com puro CSS. Eu criei esse ícone e quero compartilhar com vocês, até agora não vi nenhum site ensinando a fazer o mesmo, então, me considero o primeiro a criar o ícone do Google+ com CSS puro. Ok, agora sem blá blá blá...

HTML

<div id="google-plus-t100" class="t100 fl">
<span>g</span><span class="google-plus-mais-t100">+</span>
</div>
<div id="google-plus-t64" class="t64 fl">
<span>g</span><span class="google-plus-mais-t64">+</span>
</div>
<div id="google-plus-t32" class="t32 fl">
<span>g</span><span class="google-plus-mais-t32">+</span>
</div>

CSS 32px

O t100, t64 e t32 significa e é o tamanho dos ícones.

#google-plus-t32 {
    font-family:Georgia, "Times New Roman", Times, serif;
    background: #d04329;
    color: #fff;
    text-align: center;
    border: 0px solid #072266;
    font-weight: normal;
    font-size: 25px;
    line-height: 24px;
    position: relative;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
.google-plus-mais-t32 {
font-size:15px;
}
.t32 {
  width: 32px;
  height: 32px;
  border-width: 1px;
  line-height: 64px;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
  border-radius: 3px;
  -moz-border-radius: 5px;
}
.fl {
    float: left;
    margin-right: 20px;
}

CSS 64px

#google-plus-t64 {
    font-family:Georgia, "Times New Roman", Times, serif;
    background: #d04329;
    color: #fff;
    text-align: center;
    border: 0px solid #072266;
    font-weight: normal;
    font-size: 60px;
    line-height: 45px;
    position: relative;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
.google-plus-mais-t64 {
font-size:30px;
}
.t64 {
  width: 64px;
  height: 64px;
  border-width: 1px;
  line-height: 64px;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
  border-radius: 5px;
  -moz-border-radius: 5px;
}
.fl {
    float: left;
    margin-right: 20px;
}

CSS 100px

#google-plus-t100 {
    font-family:Georgia, "Times New Roman", Times, serif;
    background: #d04329;
    color: #fff;
    text-align: center;
    border: 0px solid #072266;
    font-weight: normal;
    font-size: 100px;
    line-height: 60px;
    position: relative;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,0.4);
}
.google-plus-mais-t100 {
font-size:50px;
}
.t100 {
  width: 100px;
  height: 100px;
  border-width: 1px;
  line-height: 64px;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
  border-radius: 5px;
  -moz-border-radius: 5px;
}
.fl {
    float: left;
    margin-right: 20px;
}

Efeito final

g+

g+

g+