[Tutorial] personalizar caixas de texto (box)

Bem pessoal bora personalizar as box...e para isso aqui fica um tuturial para vos ajudar....

Sem barra scroll (codigo base)

<fieldset class="muka" id="muka">

TEXTO /IMAGEM/VIDEO

</fieldset>

<style>#muka {height:301px;width:450px;background:url(URL DA IMG);background-repeat:no-repeat;color:COR DO TEXTO; font-size:TAMANHO DO TEXTOpx; font-weight:FONT DO TEXTO}
</style>

Com barra scroll (codigo base)

<div class="muka" id="muka">
<center>
<div class="mk" id="mk">

TEXTO/IMAGEM/VIDEO


</div>
</center>
</div>
<style>#muka {height:200px;width:400px;background:url(URL DA IMG);background-repeat:no-repeat;color:COR DO TEXTO;}
#mk{overflow:auto;width:370px;height:140px;scrollbar-face-color:COR DA BARRA SCROL ; scrollbar-arrow-color:COR DA BARRA SCROL ; scrollbar-highlight-color:COR DA BARRA SCROL ; scrollbar-3dlight-color:COR DA BARRA SCROL ; scrollbar-shadow-color:COR DA BARRA SCROL ; scrollbar-darkshadow-color:COR DA BARRA SCROL ;position:relative;top:30px;right:10px ;text-align :center;font-size:TAMANHO DO TEXTOpx;font-weight:FONT DO TEXTO}

</style>

___________________________________
depois dos codigos base..alguns exemplos praticos...xD

-----------------------------------------------------------

Código:

<div class="muka" id="muka">
  <p> </p>
  <p> </p>
  <table width="400" border="0">
    <tr>
      <td>
<p>MUKA MUKA MUKA MUKA MUKA </p>
      <p>MUKA MUKA MUKA MUKA MUKA </p>
      <p>MUKA MUKA MUKA MUKA MUKA </p>
      <p>MUKA MUKA MUKA MUKA MUKA </p>
      <p>MUKA MUKA MUKA MUKA MUKA </p>
      <p>MUKA MUKA MUKA MUKA MUKA </p>
      <p>MUKA MUKA MUKA MUKA MUKA </p>
      <p>MUKA MUKA MUKA MUKA MUKA </p></td>
    </tr>
  </table>
</div>
<style>#muka {height:301px;width:450px;background:url(http://img253.imageshack.us/img253/3042/14aqw7410.gif);background-repeat:no-repeat;color:#FF3366; font-size:11px; font-weight:bold}
</style>

--------------------------------------------------------------------------------

Código:

<div class="muka" id="muka">
<p> MUKA MUKA MUKA MUKA MUKA </p>
  <p>MUKA MUKA MUKA MUKA MUKA </p>
  <p>MUKA MUKA MUKA MUKA MUKA </p>
  <p>MUKA MUKA MUKA MUKA MUKA </p>
  <p>MUKA MUKA MUKA MUKA MUKA </p>
  <p> MUKA MUKA MUKA MUKA MUKA </p>
  <p>MUKA MUKA MUKA MUKA MUKA </p>
  <p> MUKA MUKA MUKA MUKA MUKA </p>
  <p> MUKA MUKA MUKA MUKA MUKA </p>
</div>
<style>#muka {height:350px;width:450px;background:url(http://img522.imageshack.us/img522/46/21aqw7410.gif);background-repeat:no-repeat;color:#4aa4f8; font-size:11px; font-weight:bold; padding-top:90px; padding-left:100px}
</style>

-----------------------------------------------------------------------------------

Código:

<div class="muka" id="muka">
 <p> MUKA MUKA MUKA MUKA MUKA</p>
  <p>MUKA MUKA MUKA MUKA MUKA</p>
  <p>MUKA MUKA MUKA MUKA MUKA</p>
  <p>MUKA MUKA MUKA MUKA MUKA</p>
  <p>MUKA MUKA MUKA MUKA MUKA</p>
  <p> MUKA MUKA MUKA MUKA MUKA</p>
  <p>MUKA MUKA MUKA MUKA MUKA</p>
  <p> MUKA MUKA MUKA MUKA MUKA</p>
  <p> MUKA MUKA MUKA MUKA MUKA</p>
</div>
<style>#muka {height:320px;width:450px;background:url(http://img522.imageshack.us/img522/3744/22aqw7410.gif);background-repeat:no-repeat;color:#f50e2a; font-size:11px; font-weight:bold; padding-top:80px; padding-left:70px}
</style>

-----------------------------------------------------------------------------------

Código:

<div class="muka" id="muka">
<p>MUKA MUKA MUKA MUKA MUKA</p>
  <p>MUKA MUKA MUKA MUKA MUKA</p>
  <p>MUKA MUKA MUKA MUKA MUKA</p>
  <p>MUKA MUKA MUKA MUKA MUKA</p>
  <p>MUKA MUKA MUKA MUKA MUKA</p>
  <p>MUKA MUKA MUKA MUKA MUKA</p>
  <p>MUKA MUKA MUKA MUKA MUKA</p>
  <p>MUKA MUKA MUKA MUKA MUKA</p>
  <p>MUKA MUKA MUKA MUKA MUKA</p>
  <p>MUKA MUKA MUKA MUKA MUKA</p>
  <p>MUKA MUKA MUKA MUKA MUKA</p>
</div>
<style>#muka {height:380px;width:450px;background:url(http://img253.imageshack.us/img253/1714/c2eeb4cfb0f8c1f62dlwlsg.gif);background-repeat:no-repeat;color:#f50e2a; font-size:11px; font-weight:bold; padding-top:80px; padding-left:60px;}
</style>

----------------------------------------------------------------------------

Código:

<div class="muka" id="muka">
  <p>MUKA MUKA MUKA MUKA MUKA</p>
<p>MUKA MUKA MUKA MUKA MUKA</p>
<p>MUKA MUKA MUKA MUKA MUKA</p>
<p>MUKA MUKA MUKA MUKA MUKA</p>
<p>MUKA MUKA MUKA MUKA MUKA</p>
<p>MUKA MUKA MUKA MUKA MUKA</p>
 </div>
<style>#muka {height:273px;width:341px;background:url(http://img9.imageshack.us/img9/6572/jinhe2dlwlsgml4342aqw74.gif);background-repeat:no-repeat;color:#000000; font-size:11px; font-weight:bold; padding-top:80px; padding-left:100px;}
</style>

---------------------------------------------------------------------------------

Código:

<div class="muka" id="muka">
  <p>MUKA MUKA MUKA MUKA MUKA</p>
<p>MUKA MUKA MUKA MUKA MUKA</p>
<p>MUKA MUKA MUKA MUKA MUKA</p>
<p>MUKA MUKA MUKA MUKA MUKA</p>
<p>MUKA MUKA MUKA MUKA MUKA</p>
<p>MUKA MUKA MUKA MUKA MUKA</p>
<p>MUKA MUKA MUKA MUKA MUKA</p>
 </div>
<style>#muka {height:295px;width:420px;background:url(http://img9.imageshack.us/img9/4383/c2eeb4cfb0f878dlwlsgml4.gif);background-repeat:no-repeat;color:#4bb90f; font-size:11px; font-weight:bold; padding-top:80px; padding-left:80px;}
</style>

-----------------------------------------------------------------------------

Código:

<div class="muka" id="muka">
  <center>
    <div class="mk" id="mk">
    Muka MUKA MUKA MUKA  Muka MUKA MUKA MUKA Muka MUKA MUKA MUKA  Muka MUKA MUKA MUKA Muka MUKA MUKA MUKA  Muka MUKA MUKA MUKA Muka MUKA MUKA MUKA Muka MUKA MUKA MUKA Muka MUKA MUKA MUKA Muka MUKA MUKA MUKA Muka MUKA MUKA MUKA Muka MUKA MUKA MUKA Muka MUKA MUKA MUKA Muka MUKA MUKA MUKA Muka MUKA MUKA MUKA Muka MUKA MUKA MUKA Muka MUKA MUKA MUKA 

</div>
  </center>
</div>
<style>#muka {height:200px;width:400px;background:url(http://img253.imageshack.us/img253/7619/004nb1.gif);background-repeat:no-repeat;color:#000;}
#mk{overflow:auto;width:370px;height:140px;scrollbar-face-color:#000; scrollbar-arrow-color:#000; scrollbar-highlight-color:WHITE; scrollbar-3dlight-color:#000; scrollbar-shadow-color:#000; scrollbar-darkshadow-color:#000;position:relative;top:30px;right:10px ;text-align :center;font-size:11px;font-weight:bold}

</style>

-----------------------------------------------------------------

Explicação:
bem todos estes exemplos estão com o texto de "MUKA",..logo vasta mudar esso para o texto pretendido...xD

________________________

so espero que gostem e deem uzo a este tutorial...xD

Bom Post : DD
Exelente trabalho :b

Eu concordo com a susana *.*

Susanne escreveu:Bom Post : DD
Exelente trabalho :b

Biaziinhaw escreveu:Eu concordo com a susana *.*

Muito muito Obrigado....

Não tens que agradecer

De nada amor

Susanne escreveu:Não tens que agradecer

tenho sim..obrigada..

Biaziinhaw escreveu:De nada amor

olha isso ta bonito mas da pa fazer outros enfeites mais simples

Muito bom post xD

Altamente

Onde arranjas as imagens?

aranjeias no citiu mais onhecido de todos...www.google.pt

xD

marisa costa escreveu:olha isso ta bonito mas da pa fazer outros enfeites mais simples

Claro que sim , da para dar os efeitos que tu quiseres
Só tens é de ter imaginação!!

desculpa la mas podes.me responder e qe e mesmo urgente

Tipo como é que queres fazer a tua caixa de texto (box)??

marisa costa escreveu:desculpa la mas podes.me responder e qe e mesmo urgente

Pesso desculpamas vou ter de dizer esto.....urgente e a fome do mundo,e as crianças que morrem todos os dias,e as guerras e merd** ahhh e mais urgente ainda e fazeres a apresentaão pk nas regras diz que em antes de postares tem de te apresentaar....

Por isso primeiro vais a seção de apresentações apresentasentas-te..e depois disso e so ir a secçao de duvidas hi5 e despores esta duvida....desculpa mas tem mesmo ser assim....

post bloqueado....