18 de jan de 2013

Texto com sombra e colorido no post + Negrito, Sublinhado e Itálico com Efeito


 O efeito fica muito bonitinho.
 O primeiro é o texto com sombra e colorido no post.

Como esse aqui.


 E o Negrito, Sublinhado e Itálico com efeito.

 Tutorial pegos dos sites: (1), (2) e (3).



1º Texto com sombra e colorido no Post.

Vá em seu "Modelo" e "Editar HTML". Dê Ctrl+ F e busque por: ]]></b:skin>

Cole o seguinte código A CIMA:

.sombra-text {
text-shadow: 2px 3px 4px #000; /*--- Edite  ---*/
color: # F0C2D1;  /*--- Edite cor ---*/
font-size: 30px;  /*--- Edite tamanho da fonte ---*/
}

Para usar é só ir no "HTML" da sua postagem e colocar assim:

<p class=”sombra-text”> Texto Aqui </p>

Para centralizar é só colocar assim:

<center><p class=”sombra-text”> Texto Aqui </p></center>


2º Negrito, Sublinhado e Itálico com efeito.

Vá em seu "Modelo" e "Editar HTML". Dê Ctrl+ F e busque por: ]]></b:skin>

E cole a cima o seguinte código:

 b {color: #962DFF;} /* Cor do texto em NEGRITO */
b:hover {color: #5C00B9;} /* Cor do texto quando passa o mouse no texto em NEGRITO */

u {color: #5C00B9;} /* Cor do texto em SUBLINHADO */
u:hover {color: #C082FF;} /* Cor do texto quando passa o mouse no texto em SUBLINHADO */

i {color: #C082FF;} /* Cor do texto em ITÁLICO */
 
i:hover {color: #962DFF;} /* Cor do texto quando passa o mouse no texto em ITÁLICO */


Deixe o sublinhado pontilhado:

Vá em Design > Modelo > Personalizar > Avançado > Adicionar CSS

Cole este código:
u{ text-decoration: none; border-bottom-width: 1px; border-bottom-style: ESTILO; border-bottom-color: #COR_DO_SUBLINHADO; cursor: crosshair; }
Onde está a #COR_DO_SUBLINHADO você vai escolher uma das cores da Tabela de Cores e colocar lá.
No ESTILO você coloca o estilo da linha abaixo do sublinhado:

dotted
dashed
solid
double

groove


ridge


inset


outset

Se não quiser que apareça um cursor em forma de cruz exclua o trecho: cursor: crosshair;

5 comentários:

  1. Oii, sou eu de novo do MDO, tentei fazer não conseguir T T.Bem eu queria para o menu do blog(Queria fazer algum simples),mas não deu certo ficou em outras parte.Você me ajudar?Ainda vou fica tentando aqui.

    Obrigada pela atenção.

    xauu,boa noite.

    ResponderExcluir
    Respostas
    1. é porque é Link, então acho que não funciona, para deixar os links com esse tipo de efeito é outro tutorial :/

      Excluir
  2. obg obg,tava memso procurando,demorei mais achei

    ResponderExcluir

Não saia sem comentar!
Comentando vocês nos incentiva a continuar postando e podemos saber de sua opinião quanto ao post e/ou o blog!

OBS: Por favor. Vamos manter a postura.
Sem xingamentos com palavras de baixo calão