Rank CSS Especial

Minha questão:

Estou tentando fazer um Rank CSS que fique parecido com este abaixo:

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Mas estou com uma dúvida... vejam o que já consegui.

HTML

Código:


<span class="rank1"><span class="name">Membro Fantástico</span></span>
<span class="rank2"><span class="name">Rei dos Piratas</span></span>


CSS

Código:


.rank2 {
background: #ff0000;
background-image: url(http://i.imgur.com/IfJJmTJ.png);
background-repeat: no-repeat;
background-position: 99% 50%;
}
.rank1 {
background: #ff00ff;
background-image: url(http://i.imgur.com/IfJJmTJ.png); 
background-repeat: no-repeat;
background-position: 99% 50%;
}
.rank1, .rank2 { 
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
height: 35px;
width: 150px;
line-height: 35px;
display: inline-block; 
}

.name {
  margin-left: 5px;
  font-family: arial;
  font-weight: 700;
  text-align: center;
  text-shadow: rgba(0,0,0,0.2) 0 -1px 0; 
  color: #fff;
  font-size: 11px;
  text-transform: uppercase !important;
}


Já tentei usar o seguinte:

Código:


background: -webkit-gradient(linear, center top, center bottom, from(white), to(#D3D8E8));
background: -webkit-linear-gradient(white, #D3D8E8);


Quanto uso, o background de imagem não funciona, então estou tentando um jeito de colocar o background no estilo gradiente e também colocar a imagem de fundo meio opaca..

---

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

Não será possível você colocar um background junto ao gradient, pois o gradiente é definido como uma imagem... você poderia fazer com efeito de gradient o background e utiliza-lo como desejas!

Humrum, eu sei...

Mas @[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] disse que ia mim ajudar aqui...

veja o efeito que consegui..

Código:


.rank2 {
background: #ff0000;
background-image: url(http://i.imgur.com/IfJJmTJ.png);
background-repeat: no-repeat;
background-position: 99% 50%;
}
.rank1 {
background: -webkit-linear-gradient(#FFF, #F88A8A, #ff0000, #FF0000);  
background-repeat: no-repeat;
background-position: 99% 50%;
}
.rank1, .rank2 { 
border: 2px solid #fff;  
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
height: 35px;
width: 150px;
line-height: 35px;
display: inline-block;  
}

.name {
  margin-left: 5px;
  font-family: arial;
  font-weight: 700;
  text-align: center;
  text-shadow: rgba(0,0,0,0.2) 0 -1px 0;  
  color: #fff;
  font-size: 11px;
  text-transform: uppercase !important; 
}


Código:


<span class="rank1"><span class="name">Membro Fantástico</span></span>
<span class="rank2"><span class="name">Rei dos Piratas</span></span>


Você pode fazer o seguinte ao invés de usar o icone no ".rank1, .rank2"
você cria uma "class" no css com o nome "icon" .

E no .rank1, .rank2 você determina a imagem de fundo.

Aqui é só um exemplo básico:

Código:

<span class="rank1"><span class="icon"><span class="name">Membro Fantástico</span></span></span>

Código:

.icon {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #ff0000 url(http://i.imgur.com/IfJJmTJ.png) no-repeat 99% 50%;
float:right;
height: 35px;
width: 150px;
}

veja que coloquei toda a formatação no ".icon" para servir de exemplo mas você pode determinar uma parte da formatação como vc fez no:
.rank1, .rank2, .icon { ... }

Não resulta, mais veja o que consegui..

Código:


.img {
 float: right;
 position: absolute;
 border-radius: 100px;
 margin-left: 110px;
 margin-top: -2px;
 height: 80px
}
.rank1 {
background: -webkit-linear-gradient(#FFF, #F88A8A, #ff0000, #FF0000); 
background-repeat: no-repeat;
background-position: 99% 50%;
}
.rank1 {   
border: 2px solid #fff; 
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
height: 35px;
width: 150px;
line-height: 35px;
display: inline-block; 
}

.name {
  position: absolute;
  margin-left: 5px;
  font-family: arial;
  font-weight: bold;
  text-align: center;
  text-shadow: rgba(0,0,0,0.2) 0 -1px 0; 
  color: #fff;
  font-size: 11px;
  text-transform: uppercase !important;
}
.name1 {
  position: absolute;
  float: left;
  margin-top: 10px;
  margin-left: 5px;
  font-family: arial;
  font-weight: 700;
  text-align: center;
  text-shadow: rgba(0,0,0,0.2) 0 -1px 0; 
  color: #fff;
  font-size: 9px;
  text-transform: uppercase !important;
}

Código:

<span class="rank1"><span class="img"><img src="http://i.imgur.com/IfJJmTJ.png" alt=""></span><span class="name">Shichibukai Lendário</span><span class="name1">SMRPG</span></span>


Mais ainda não está parecido com o da imagem..

Olá,

Eu to meio sem tempo para te arrumar algo mais complexo, vou ter que te deixar na mão, pelo menos por alguns dias (tive uns imprevistos)...

Fiz esse aqui meio na correria, ve se ajuda...
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Veja bem, peguei as imagens na internet, para os seus da para fazer algo bem mais trabalhado e tal, depende do objetivo final... Mas a partir disso ai você faz vários tipos, adicionas estrelas e por ai vai...