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
CSS
E o otimizado caso vá implantar!
CSS
O HTML já está ali em cima.
E isso ai, até breve '-'
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 '-'