23 de nov. de 2012

Criando Texto 3D Com CSS3


Olá Boa tarde a todos hoje trago esse tutorial muito interessante, Texto3D com Apenas CSS3

Primeiramente vamos em  Modelo>>Editar Html Logo apos pesquise a seguinte palavra (ctrl+f)


]]></b:skin/>

Cole logo acima dela a o seguinte codigo
#wrapper h1{
font:normal XXpt Arial;
color:#XXX;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); }

#wrapper p{
font:normal XXpt Arial;
color:#SUACOR;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}


Agora você mode oque esta em negrito , "color:#SUACOR" Vai ser o Código da sua cor Exemplo: #FFF,onde esta "XXpt" e o tamanho da fonte exemplo: 12pt, e Onde esta  "Arial" e o nome da fonte,Bom agora crie um novo Gadget HTML/JAVASCRIPT e Cole o seguinte
<div id="wrapper">
 <h1>PALAVRA</h1>
</div>


Onde esta em negrito sera a sua palavra exemplo: UpTutorias

é isso gente ate a proxima

Um comentário: