Novas Boxes

+6
Leonardo
Visi0n
Richard
Windows
Keant
WictorP
10 participantes

WictorP WictorP  • 02.07.13 9:51

Novas Boxes Empty Novas Boxes 02.07.13 9:51

Reputação da mensagem: 100% (3 votos)
Bom galera, eu visitei o site da Web Gallery e vi essas boxes divas e vim edita-las pra vocs, pq eles lá usam o títlo como uma imagem única, então tive um trabalho  pra passar tudo pro css. '-'

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

Como utilizar

Vá no CSS principal do seu layout CMS (se for cms habbo convencional é em web-gallery/v2/styles/style.css) e cole o seguinte código lá em último:

Código:
.corpo {
width: 291px;
background: #fff;
height: auto;
min-height: 47px;
border-bottom: 2px rgb(170, 170, 170) solid;
border-radius: 4px;
border-top: 1px rgb(170, 170, 170) solid;
border-left: 1px rgb(170, 170, 170) solid;
border-right: 1px rgb(170, 170, 170) solid;
padding-top: 7px;
}
.corpotexto {
font-family: Verdana;
font-size: 10px;
color: #999;
padding-left: 8px;
padding-top: 5px;
width: 279px;
height: auto;
padding-bottom: 11px;
}
.topo-header {
height: 36px;
margin: auto;
width: 279px;
}

   .topo-header .azul {
background-image: url(http://i.imgur.com/lwnJGcm.png);
color: #fff;
text-shadow: 2px 0px 0px #2387a8,0px 1px 0px #2387a8,-1px 0px 0px #2387a8,0px -1px 0px #2387a8;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
   }
   
      .topo-header .laranja {
background-image: url(http://i.imgur.com/kZdYSo3.png);
color: #fff;
text-shadow: 2px 0px 0px #f97609,0px 1px 0px #f97609,-1px 0px 0px #f97609,0px -1px 0px #f97609;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
   }
   
   
   .topo-header .amarelo {
      background-image: url(http://i.imgur.com/Y3uAFsO.png);
      color: #fff;
text-shadow: 2px 0px 0px #d1a710,0px 1px 0px #d1a710,-1px 0px 0px #d1a710,0px -1px 0px #d1a710;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
   }
   
   .topo-header .verde {
      background-image: url(http://i.imgur.com/6dKm44q.png);
      color: #fff;
text-shadow: 2px 0px 0px #629d27,0px 1px 0px #629d27,-1px 0px 0px #629d27,0px -1px 0px #629d27;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
   }
   
   .topo-header .roxo {
      background-image: url(http://i.imgur.com/b2yauD7.png);
      color: #fff;
text-shadow: 2px 0px 0px #8d2ecd,0px 1px 0px #8d2ecd,-1px 0px 0px #8d2ecd,0px -1px 0px #8d2ecd;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
   }
   
   .topo-header .vermelho {
      background-image: url(http://i.imgur.com/SNGNhu7.png);
      color: #fff;
text-shadow: 2px 0px 0px #a82c1b,0px 1px 0px #a82c1b,-1px 0px 0px #a82c1b,0px -1px 0px #a82c1b;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
   }
   
      .topo-header .rosa {
      background-image: url(http://i.imgur.com/fPP5hzt.png);
      color: #fff;
text-shadow: 2px 0px 0px #c437ad,0px 1px 0px #c437ad,-1px 0px 0px #c437ad,0px -1px 0px #c437ad;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
   }
   
   
      .topo-header .cinza {
      background-image: url(http://i.imgur.com/rgJGZid.png);
      color: #fff;
text-shadow: 2px 0px 0px #7d7d7d,0px 1px 0px #7d7d7d,-1px 0px 0px #7d7d7d,0px -1px 0px #7d7d7d;
font-weight: bold;
font-family: tahoma;
font-size: 7pt;
   }
   
   .topo-header .left {
      background-position: top left;
      width: 4px;
      height: 34px;
      float: left;
      margin-top: 2px;
   }
   
   .topo-header .mid {
      background-position: center right;
      height: 26px;
      width: auto;
      margin: 0px 4px;
      padding: 11px 5px 0px 5px;
   }
   
   .topo-header .right {
      background-position: bottom left;
      width: 6px;
      height: 36px;
      float: right;
      margin-top: -3px;
   }

Feito isso vai na sua página html/php onde queira utilizar a box e coloque o código onde quer que apareça:

Código:
<div class="corpo">
                     
                     <div class="topo-header">
                        <div class="left corempt"></div>
                        <div class="right corempt"></div>
                        
                        <div class="mid corempt">
                           Nova Box amarelo
                        </div>
                     </div>
      <div class="corpotexto">
Aqui seu conteúdo.
<br>
Tudo editável.
</div>
</div>

E edite o "corempt" para cor em português.
Exemplo: amarelo,vermelho,roxo,rosa,verde,cinza,laranja.

Créditos: Web Gallery e WictorP

Se gostaram da um + :D


Se tiverem sugestão de cores, mande o código hexadecimal da cor em seu comentário.
Exemplo: #ff0000

Keant Keant  • 02.07.13 10:15

Novas Boxes Empty Re: Novas Boxes 02.07.13 10:15

Olá não gosto disso,más será bom para os demais.

Windows Windows  • 02.07.13 10:25

Novas Boxes Empty Re: Novas Boxes 02.07.13 10:25

Muito boas as boxes.
Parabens Wictor ;)

Richard Richard  • 02.07.13 10:43

Novas Boxes Empty Re: Novas Boxes 02.07.13 10:43

Olá,
Ótimas boxes gostei muito,
Irei usar nos meus novos projetos!

Valeu por compartilhar. ~ 

Visi0n Visi0n  • 02.07.13 12:43

Novas Boxes Empty Re: Novas Boxes 02.07.13 12:43

Olá,

É muito últil essas Boxes !
Vou baixar e testar-las..
Espero que funcione..

Até a Próxima.

WictorP WictorP  • 02.07.13 13:35

Novas Boxes Empty Re: Novas Boxes 02.07.13 13:35

Reputação da mensagem: 100% (1 votos)
acho bom que deeem +. só falta 1 pra completar 200

e fico feliz que gostaram. u-u

Leonardo Leonardo  • 02.07.13 13:49

Novas Boxes Empty Re: Novas Boxes 02.07.13 13:49

Já as tinha visto.
- Obrigado por compartilhar.

bielgtinho bielgtinho  • 02.07.13 13:56

Novas Boxes Empty Re: Novas Boxes 02.07.13 13:56

Gostei da boxes , obrigado por compatilhar !

WictorP WictorP  • 02.07.13 15:12

Novas Boxes Empty Re: Novas Boxes 02.07.13 15:12

[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] - duas novas boxes feitas agora. u-u

só posto elas quando chegar a 5 +. falta 2. :obama:

Minato™ Minato™  • 02.07.13 15:13

Novas Boxes Empty Re: Novas Boxes 02.07.13 15:13

Muito Bom as boxes... verei outras cores aqui..

νσℓ¢σм νσℓ¢σм  • 02.07.13 15:14

Novas Boxes Empty Re: Novas Boxes 02.07.13 15:14

habosinho escreveu:Muito Bom as boxes... verei outras cores aqui..


Gostei das novas box. Se me prometer que ao chegar +5 poem essas eu dou o meu +

WictorP WictorP  • 02.07.13 15:24

Novas Boxes Empty Re: Novas Boxes 02.07.13 15:24

está prometido, chegando aos 5+ posto estas, e já estou desenvolvendo outras para +10 :D

Kushina Kushina  • 02.07.13 17:11

Novas Boxes Empty Re: Novas Boxes 02.07.13 17:11

@Fechado
O Projeto Agora é m0vame.
Permissões neste sub-fórum
Não podes responder a tópicos

BH Servers

Recomendamos a BH Servers com proteção DDOS gratuita em Cloud Server de alta performance. Entrega imediata.