• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

7 de dezembro de 2012

Maratona de Tutoriais - Códigos interessantes


Eba passei em todas as matérias
Olá!

Eu estava dando um rolé pela internet e mexendo nos HTML'S até que achei e encontrei códigos de como deixar as fontes diferentes na postagem, resolvi postar aqui pois achei muito interessante, vamos ver?
 Lembrando que todos tem que colocar no HTML do post ok?

Texto dividido em duas colunas
<div style="float: left; width: 45%">Escreva aqui o Texto da Coluna da Esquerda</div> 
<div style="float: right; width: 45%">Escreva aqui o Texto da Coluna da Direita</div> 
<div style="clear: both"></div>
Cabeçalhos

TEXTOh1

TEXTOH2

TEXTOh3

TEXTOh4

TEXTOh5
TEXTOh6

<h1> TEXTO h1 </ h1> 

<h2> TEXTO h2 </ h2> 

<h3> TEXTO h3 </ h3> 

<h4> TEXTO h4 </ h4> 
<h5> TEXTO h5 </ h5> 
<h6> TEXTO h6 </ h6>

Textos em formatos diferentes 

em negrito texto 
em itálico 
TEXTO reforçada por 
strikeout
<b> texto em negrito </ b> <i> texto em itálico </ i> <u> reforçada por TEXTO </ u> <S> tachado </ s>

Texto com cor
<span style="color:#ffbbcc;"> TEXTO </ span>

Texto com fundo
<span style="background:#ffbbcc;"> TEXTO </ span>

Qualquer  fonte
<span style="font: COURIER;"> 20px TEXTO </ span>

Texto com link  
<a href="URL"> TEXTO </ a>

Texto alinhado
<div style="text-align: center;"> texto centralizado </ div> <div style="text-align: rigth;"> texto à direita </ div> <div style = "text-align: left;" > texto à esquerda </ div> <div style = "text-align: TEXTO desalinhado </ div>


sombras em texto :


Adolescente Nerd

Nós vamos usar  text-shadow 
{Text-shadow: 5px 4px-3px-# ffbbcc;}

Edite
* -3px ->  A posição horizontal da sombra. Negativo ( - ) para o lado direito, positivo (+ ) à esquerda. * -4px ->  A posição vertical da sombra. Negativo ( - ) para cima, positivo ( + ) para baixo. * 5px ->  condições de sombreamento. Prefeito é menor intensidade  (difuso) . * # ffbbcc -> cor da sombra. Se nós Sombras Dois luz um e um mais escuro, dá um Lindo efeito:

Adolescente Nerd


 {Text-shadow:-3px 3px # FF9966, 3px 3px # ffbb0c;}


Ei utilizado o código acima
Edite
sombra laranja
* -3px
* -3px 
sombreado amarelo
* 3px
* 3px

Agora mesclaremos 3 sombras O.o assim:

Adolescente Nerd




{Text-shadow: 1px 2px 5px # 600,              -3px 1px 1px # 060,              4px-3px 1px # 006}
Edite
 2px 5px 1px # f0f -> sombra rosa   -3px 1px 1px # 00b -> azul sombra   4px-3px 1px # 099 > - água sombra verde texto esboçado

Adolescente Nerd

{Text-shadow: 1px 0-azul, 0 1px azul,               azul 1px 0, 0-azul 1px}
O Texto com contorno

Adolescente Nerd

{Text-shadow: 0 0 2px # 8F7}


Adolescente Nerd
{Text-shadow: 0 0 2px # ff0}
Conselho
 recomendo isso em "a: hover" dos links, pois fica Lindo.
Vá em Modelo -> Editar HTML 
e tecle ctrl + f   "a: hover"
e coloque o efeito desejado.
Super útil né gente?, se a postagem está meia ruim me perdoem, mais é que eu já tinha feito a postagem antes e eu pensei que estava nos rascunhos mais aí eu fui ver agora quando finalmente a senhora internet quis conectar, não estava nada salvo no rascunho e então fiz a postagem à pressa então não sei se ficou legal.
(x)

10 comentários:

  1. aww muito legal os tutus, fica bem interessante *-*
    ~~Kissus

    ResponderExcluir
  2. legal! irei tentar usa-los no lay free de natal!
    anime-mania-teen.blogspot.com.br

    ResponderExcluir
  3. OMG, que efeitos incriveis! *O*
    Essas sombras ficam muito legais :3 Vou usar em um post lá no blog <3

    Kissus ^^
    mikicandy.blogspot.com

    ResponderExcluir
  4. Ótimos códigos, gostei bastante da postagem!

    omeubrilhantemundo.tk

    ResponderExcluir
  5. Nossa adorei! codigos super úteis v-v

    BEIJOS!

    rarosej.blogspot.com.br

    ResponderExcluir