Estilos Fofos com CSS para Textos ou Títulos

Olá! Geralmente a gente cria styles para usar em textos com Photoshop não é? Mas com HTML e CSS dá para dar estilo aos nossos textos e ainda aplicar animações; pensando nisso, hoje trouxe 5 estilos para personalizar títulos ou destacar textos que aprendi recentemente lá no Codepen, estão todos creditados e com links de paletas de cores que usei
Antes de começarmos, vale saber em que parte do HTML dos modelos do Blogger você poderá usá-los não é? Se for personalizar título do blog, procure por .Header h1 {mude o que houver entre as chaves pelo código desejado}; se for os títulos dos posts e comentários, acrescente antes de /b:skin: .post h3 a, .post h3 a:visited, .post h3, .comments h4 {código do modelo que gostar}; se for nos títulos de gadgets da sidebar, faça como nos títulos de postagem, acrescentando antes de /b:skin, .sidebar .widget h2 {...código}.
Para menus, textos ou frases que queira destacar, cole antes de /b:skin o Css, e onde quiser que apareça, por exemplo, em um novo gadget HTML/JavaScript, o HTML.

Texto Colorido Kawaii♥

1. Colorful: Texto com sombras coloridas! Adicione o código abaixo antes de /b:skin:

@import url(http://fonts.googleapis.com/css?family=Righteous);
.colorido {
  font-family: "Righteous", cursive;
  font-size: 3em;
  font-weight: bold;
 color: rgb(255,217,252);/*cor 1*/
 /*cor 2*/
 text-shadow: 0 2px 0 rgb(255,255,219),
             0 3px 2px rgb(255,255,219),
             /* cor 3*/
             0 3px 0 rgb(255,201,216),
             0 5px 0 rgb(255,201,216),
             0 6px 2px rgb(255,201,216),
             /* cor 4 */
             0 6px 0 rgb(189,245,255),
             0 8px 0 rgb(189,245,255),
             0 9px 2px rgb(189,245,255),
             /* cor 5 */
             0 9px 0 rgb(246,204,255),
             0 11px 0 rgb(246,204,255),
             0 12px 2px rgb(246,204,255),
             /* cor 6 */
             0 12px 0 rgb(217,201,255),
             0 14px 0 rgb(217,201,255),
             0 15px 2px rgb(217,201,255),
             /* cor 7 */
             0 15px 0 rgb(152,255,244),
             0 17px 0 rgb(152,255,244),
             0 17px 2px rgb(152,255,244);
}

E isso no HTML:
<span class='colorido'>Escreva aqui</span>

2. Fire: Parece que...


O texto tá pegando fogo!!!! Chama o bombeirooo...

Código CSS:

@import url(http://fonts.googleapis.com/css?family=Changa+One);
.fire{
background: #000;
width: 650px;  
color: white;
text-align: center;  
font-family:'Changa One', cursive;
font-size: 35px;
line-height: 2em;
font-weight: bold;
text-shadow: 0px -1px 14px white, 0px -3px 15px red, 0px -5px 15px orange, 0px -8px 40px red;

Código HTML:

<span class='fire'>Escreva aqui</span>

3. Strong: Texto bem nítido, usei nesse template aqui (dá uma olhada nos códigos dele, em Header h1, para ver o que quis dizer anteriormente).

Texto bem forte e nítido!
Css:
@import url(http://fonts.googleapis.com/css?family=Lobster);
.strong {
font-family: 'Lobster', cursive;
text-align: center;
font-size: 4.5em;
color: rgb(202, 23, 0);
text-shadow: 0 1px 0 #9d0900,
0 2px 0 #9d0900,
0 3px 0 #9d0900,
0 4px 0 #9d0900,
0 5px 0 #9d0900,
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);
}

HTML:
<span class='strong'>Escreva aqui</span>


Texto Transparente

4. Transparente: O segredo é usar cores iguais no background e cor do texto nesse código CSS:
@import url(http://fonts.googleapis.com/css?family=Lobster);
.transparent{
font-family:'Lobster', cursive;
font-size: 80px;
background: #ffc4db;/*essa cor...*/
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
color: #ffc4db;/*...igual a essa cor*/
opacity: 0.3;
width: 650px;

HTML:
<span class='transparent'>Escreva aqui</span>

O próximo estilo (que acho super-híper-mega-master kawaii ), só pode ser usado em textos específicos, não em títulos de posts ou do blog. Tome cuidado ao escolher o local em que adicionar o efeito por que pode personalizar todos os textos da área em que usar.
5. Colorful com Efeito ao passar o mouse!
.

É isso! A personalização de cada código poderá ser feita com relação às cores (color), que em alguns aparece em RGB, às fontes (font-family: tipo de fonte, font-size: tamanho do texto), planos de fundo (background), sombras (text-shadow), larguras (width)...Espero que gostem!!!







Postar um comentário

5 Comentários

  1. Lindo! No meu próximo Layout, vou usar esse

    imperio--kawaii.blogspot.com

    ResponderExcluir
  2. Olá Roberta! Eu queria encomendar uma coisa para você. Você poderia fazer um cabeçalho para meu blog, eu quero que ele seja Kawaii que nem o seu em cima. Mas senão for muito incomodo, por favor. Obrigado.

    There | Chiclete Funny

    ResponderExcluir
    Respostas
    1. Oi :) Bom, ainda não faço encomendas, tenho tanto a aprender ^-^, mas pode deixar sugestões que anoto tudo com carinho e depois compartilho. Aqui no blog já postei alguns cabeçalhos; dá uma olhada nesses posts: tem esses em PSD,esses, esses, esses, esses, esses,e esses são mais recentes.
      Bju

      Excluir
  3. Anônimo18 dezembro

    N consegui direito :( Queria usar o 1º

    ResponderExcluir
    Respostas
    1. Use o código do css antes de /b:skin e o do html no lugar em que vc quer que apareça o texto.

      Excluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up