[Tutorial] Personalizar caixas de texto (box)

Bem como tinha dito no tutorial anterior eu resolvi envestir um pouco na personalização..por isso aqui vai a personalização das box.... ;D

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>&nbsp;</p>
  <p>&nbsp;</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" mudam esso para o texto pretendido...xD

________________________
Mais um tutorial que se fica por aqui..o prosimo tuturial será o das textarea dos comentarios..xD

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

Bom post :)

obrigado...=D

de nada :)

Bom Post ^^

bom post xD

muka tu es uns atrás dos outros....exelente "mestre"....