Olá amigos, como o JScript adora otimizar a velocidade do fórum, cada milissegundo conta né? Então para colaborar com a comunidade, refiz os ranks (no estilo dos que eu tinha feito no Photoshop) só que agora com puro CSS, puro CSS mesmo as únicas imagens são os ícones que tem 9px cada, até pensei em por em um sprite, mas não vi muita necessidade. Espero que gostem (:

Live preview:
http://jsbin.com/EQAKebIG/1

Código legível (para estudos..)

HTML

Código:

<!-- Admin -->
<div class="rankPunbb">
   <i class="rankLevel"></i>
    <i class="rankLevel"></i>
    <i class="rankLevel"></i>
   <div class="rankText">Admin</div>
</div>

<br>

<!-- Colab -->
<div class="rankPunbb">
   <i class="rankLevel"></i>
   <div class="rankText">Colab.</div>
</div>

<br>

<!-- Desenv -->
<div class="rankPunbb">
   <i class="rankLevel"></i>
   <div class="rankText">Desenv.</div>
</div>

<br>

<!-- Designer -->
<div class="rankPunbb">
   <i class="rankLevel"></i>
   <div class="rankText">Designer</div>
</div>

<br>

<!-- Membro-1 -->
<div class="rankPunbb">
   <i class="rankLevel"></i>
   <div class="rankText">Membro</div>
</div>

<br>

<!-- Membro-2 -->
<div class="rankPunbb">
   <i class="rankLevel"></i>
   <i class="rankLevel"></i>
   <div class="rankText">Membro</div>
</div>

<br>

<!-- Moderador -->
<div class="rankPunbb">
   <i class="rankLevel"></i>
   <i class="rankLevel"></i>
   <div class="rankText">Mod.</div>
</div>

<br>

<!-- MVP -->
<div class="rankPunbb">
   <i class="rankLevel"></i>
   <div class="rankText">MVP</div>
</div>

<br>

<!-- Scripter -->
<div class="rankPunbb">
   <i class="rankLevel"></i>
   <div class="rankText">Scripter</div>
</div>

<br>

<!-- Validando -->
<div class="rankPunbb">
   <i class="rankLevel"></i>
   <div class="rankText">Validando</div>
</div>

<br>

<!-- Banido -->
<div class="rankPunbb rankBanned">
   <i class="rankBannedIcon"></i>
   <div class="rankText">Banido</div>
</div>

CSS

Código:

.rankPunBB{
   background-color: #213b57;
   background-image: linear-gradient(to top, #243f5c, #1d3652);
   -webkit-background-image: linear-gradient(to top, #243f5c, #1d3652);
   -moz-background-image: linear-gradient(to top, #243f5c, #1d3652);
   -o-background-image: linear-gradient(to top, #243f5c, #1d3652);
   color: #fff;
   text-shadow: #000 1px 1px 0;
   font: 10px 'Dungeon',"Trebuchet MS", Arial, Helvetica, sans-serif;
   max-width: 81px;
   height: 18px;
   border-radius: 3px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -o-border-radius: 3px;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   cursor: default;
}
.rankBanned{
   background-color: #212121;
   background-image: linear-gradient(to top, #212121, #313131);
   -webkit-background-image: linear-gradient(to top, #212121, #313131);
   -moz-background-image: linear-gradient(to top, #212121, #313131);
   -o-background-image: linear-gradient(to top, #212121, #313131);
}
.rankPunBB i{
   float: left;   
}
.rankLevel{
   background: transparent url('http://i56.servimg.com/u/f56/17/78/57/29/star10.png') no-repeat;
   width: 9px;
   height: 9px;
   margin: 5px 0 0 0;
}
.rankBannedIcon{
   background: transparent url('http://i56.servimg.com/u/f56/17/78/57/29/banned10.png') no-repeat;
   width: 9px;
   height: 9px;
   margin: 5px 0 0 0;
   margin: 5px 0 0 5px;
}
.rankLevel:first-child{
   margin: 5px 0 0 5px;
}
.rankText{
   line-height: 19px;
   margin: 0 5px 0 0;
   float: right!important;
}

E o otimizado caso vá implantar!

CSS

Código:

.rankPunBB{background-color:#213b57;background-image:linear-gradient(to top,#243f5c,#1d3652);-webkit-background-image:linear-gradient(to top,#243f5c,#1d3652);-moz-background-image:linear-gradient(to top,#243f5c,#1d3652);-o-background-image:linear-gradient(to top,#243f5c,#1d3652);color:#fff;text-shadow:#000 1px 1px 0;font:10px Dungeon,"Trebuchet MS",Arial,Helvetica,sans-serif;max-width:81px;height:18px;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.rankBanned{background-color:#212121;background-image:linear-gradient(to top,#212121,#313131);-webkit-background-image:linear-gradient(to top,#212121,#313131);-moz-background-image:linear-gradient(to top,#212121,#313131);-o-background-image:linear-gradient(to top,#212121,#313131)}.rankPunBB i{float:left}.rankLevel{background:transparent url(http://i56.servimg.com/u/f56/17/78/57/29/star10.png) no-repeat;width:9px;height:9px;margin:5px 0 0}.rankBannedIcon{background:transparent url(http://i56.servimg.com/u/f56/17/78/57/29/banned10.png) no-repeat;width:9px;height:9px;margin:5px 0 0;margin:5px 0 0 5px}.rankLevel:first-child{margin:5px 0 0 5px}.rankText{line-height:19px;margin:0 5px 0 0;float:right!important}

O HTML já está ali em cima.

E isso ai, até breve '-'

Simplesmente perfeito meu amigo!!!

Vou adicionar assim que eu tiver um tempinho sobrando ok? Gostei bastante!

JS

Que bom que gostou amigo, eu havia esquecido de por a fonte no código. Trata-se da fonte Dungeon caso você prefira baixar ela e upar no Google Drive..
Aqui está o código (sim é enorme kkk..)
http://pastebin.com/raw.php?i=zBqdA5Cp