4 de dez de 2012

Avisos + Caixa com bordas transparentes

Boa tarde, hoje trouxe mais um daqueles posts chato eca, mais um daqueles em que eu dou alguns avisos rs.
Então, o primeiro aviso é que eu finalmente abri uma ask no tumblr então podem pedir tutoriais, materiais etc.. O segundo é que eu estarei visitando meus afiliados e comentando sempre, aqueles que não nos visitarem estarão excluídos da minha elite ok!? Decidi também que aquele ultimo template voltará, mais com outros personagens ~suspense~
E hoje vou ensinar a colocar aquela caixa branca com bordas meio transparentes que fica ali no cabeçalho, achei ela super útil e bonita, peguei ela em um tumblr chamado HTMLuv.
Let's Go?!


Vá lá no seu HTML e procure por ]]></b:skin> depois cole o seguinte código acima dessa tag que você procurou.
.bordtrans {
background-color: #fff; /*---- cor da caixa ----*/
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
border: 10px solid rgba(255,255,255,0.4); /*---- espessura da borda----*/
-webkit-border-radius: 6px; /*---- borda arredondada retire se quiser ----*/
-moz-border-radius: 6px; /*---- borda arredondada retire se quiser ----*/
border-radius: 6px; /*---- borda arredondada retire se quiser ----*/
padding: 10px;
width: 500px; /*---- tamanho da caixa de texto ----*/
color:#a8a8a8; /*---- cor da borda da caixa ----*/
text-shadow:1px 1px 0px #f7f7f7;/*---- Sombra do texto da caixa ----*/
text-align: justify;
}
 Também deixei as instruções no próprio código pra vocês modificarem o estilo da caixa como quiser.
Agora abra um gadget JAVA e cole o seguinte código.
<div class="bordtrans">
TEXTO QUE APARECE DENTRO DA CAIXA
</div>
Pronto só escrever seu texto .
_Guuh 

12 comentários:

  1. Adorei esse template, eu adorei essa caixinha *-*
    Ei a o Victory já é seu afiliado, mas eu queria fazer também com o Space, aceita?


    ResponderExcluir
    Respostas
    1. Obrigado, e aceito sim a ultima vaga é sua hah

      Excluir
  2. WOW, que menino rígido rsrs, tirandos os afiliados u_u. Mas falando sério eu adorei o tuto, ele foi criado por você? Parabéns :)

    jovenclube(.blogspot.com.br)

    ResponderExcluir
    Respostas
    1. Nem to tão rígido assim tem blog que é pior kkk mais esse tuto é de um tumblr eu só converti e fiz algumas alterações.

      Excluir
  3. Que tutu massa, Confesso que não tinha nem reparado que era uma caixa separada, vi só agora que passei o mouse e selecionei as palavras kkkk

    garotoimoral.blogspot.com

    ResponderExcluir
  4. Super curti o design natalino ^^
    Ah, ótimo tutorial!

    Abraços,
    Revolução Nerd

    ResponderExcluir
  5. amei fica muito legal, amei o lay do blog

    retribui?

    Adolescente Nerd

    ResponderExcluir
  6. Ollá adorei o seu blog, segue o meu que eu sigo de volta:
    http://sayinpassing.blogspot.com.br/

    ResponderExcluir