Tendo suas próprias badges

Completando o post do Karma Infinito, agora vou mostrar como ter a sua própria badge, e o motivo de eu postar como faze-las e colocá-las é o mesmo pelo qual eu postei sobre o Karma Infinito.

Badges (ou medalhas, adesivos, selos ou qualquer outra denominação que você queira) são aquelas, como eu disse, medalhas que você recebe por ter feito ou alcançado algo no Plurk.
Pode ser badge dos 50 fãs, Karma 100, Plurk Nirvana, 10.000 amigos convidados (Eu nem conheço 10.000 pessoas, por favor me mostrem alguém que tenha conseguido ganhar essa badge honestamente).Bom, para que o que eu vou ensinar aqui dê certo, você precisa ter pelo menos uma badge, o que não é difícil já que atualmente, se você fazer upload de uma foto para seu perfil, você já ganha uma.


Entendendo as badges:
Cada badge tem 39pixels x 39 pixels, e quando há mais de uma, cada badge é separada por 10px horizontalmente e 8px verticalmente.
Cada fileira possui até 4 badges, logo, na primeira fileira, teriamos algo assim:


Colocando as badges:
Abrindo qualquer programa de edição de imagens, desde o paint até o photoshop, você deve fazer uma badge de 39px por 39px, seja ela qual for (só sua imaginação determina o limite), colocar a imagem pronta em cima do lugar em azul apropriado, hospedar a imagem e colocar o link no código abaixo, e após isso, colar o código pronto no final do seu CSS:

.award_bar {
min-height: 47px;
background: url(link_imagem_aqui) transparent no-repeat;
}

Como eu disse, cada badge possui 39 pixels verticalmente mais os 8 pixels verticais que separariam uma fileira da outra, logo, temos 47 pixels (como pode ser visto no código acima) no total.
O código acima então só funcionaria se você possui apenas uma fileira de badges, mas digamos que você tenha mais de uma, então vamos ver como ficaria o código em meios práticos:

Fiz minhas badges quando eu ainda não tinha o Karma 100, logo, em meu plurk, eu possuia 2 fileiras de badges, e tinha espaços vazios para 4 badges by me em uma 3ª fileira, resolvi então completar.
Fiz as 4 medalhas e posicionei nos lugares adequados, ficando assim:

Meu código, como eu teria que possuir 3 fileiras, ficou assim:

.award_bar {
min-height: 141px;
background: url(http://img144.imageshack.us/img144/6587/90428833.png) transparent no-repeat;
}

Percebam que tanto o código quanto a imagem foram alteradas, no código, o 47px foram substituidos por 141 (47 x 3 = 141).
Já a imagem, eu tive que triplicar e posicionar as minhas das badges nos locais certos, porque ao contrário do karma infinito (cuja imagem fica na frente do karma original) a imagem das badges novas ficará atrás das badges legítimas.
Assim, só vão aparecer as suas badges caso não tenha alguma badge do plurk para tapá-la.

Foi o que aconteceu com a minha badge do símbolo do Atari, quando eu não tinha karma 100, aquele espaço estava vago, quando o ganhei, aquele espaço foi ocupado por uma badge original do plurk, assim, meu lindo símbolo do atari foi tapado e não aparece mais.

Use sua imaginação, crie suas badges e divirta-se ;)

Aviso: Existem layouts dos quais as badges não vão aparecer ou ficarão tortas, em alguns casos (como foi o meu), colar o código abaixo antes de todo o código resolve o problema:

.award_bar div { opacity: 0; filter: alpha(opacity=0); }

E se quiser, adicione-me no Plurk! @matheusfreitag

E tenha criatividade, não vá copiar as minhas badges e colocá-las no seu plurk, tenha o mínimo de orgulho.

0 Comentários:

Related Posts with Thumbnails
 
Copyright © Leis de M.E.R.F.