Follow Us @soratemplates

domingo, 10 de fevereiro de 2013

Formatações de Texto Personalizadas

Olá! Hoje trouxe um tutorial bem rápido, simples e essencial, aliás simplicidade é essencial não é?
Trata-se de personalizar as formatações de texto de um blog com CSS, ou seja, deixar negrito, itálico, riscado e sublinhado coloridos de acordo com sua preferência.
O código que vou disponibilizar ficará assim:
Ele já vem com efeito hover para riscado (ao passar o ponteiro sobre a palavra a linha some) e sublinhado (ao passar o ponteiro sobre a palavra a linha muda de cor).
Para isso adicione este código acima de ]]></b:skin>:
u {/* Sublinhado */
text-decoration:none;
color:#61D2D6;
border-bottom: 1px solid #9BF0E9;
-webkit-transition: 0.4s;
}
u:hover {/* Sublinhado hover */
border-bottom: 1px solid #EDDE45;
-webkit-transition: 0.4s;
}
b, strong { /* Negrito */
color: #ED146F;
font-weight: bold; 
}
i,em { /* Italico */
color: #EA3556;
text-decoration: none;
}
strike { /* Riscado */
text-decoration: strike;
color:#EB9F9F;
}
strike:hover { /* Riscado hover */
text-decoration: none;
color:#EB9F9F;
} 

Visualize, salve e pronto. Para mudar a cor é só alterar o código que estiver acompanhado com um "#". Para mais cores clique aqui.
Agora toda vez que você usar uma das formatações em seu texto, ficará como definido no código acima. Espero que lhes seja útil.
Beijus ;3
  

9 comentários:

  1. Mais uma vez, arrasou!
    Sempre quis deixa ro efeito hover no sublinhado e nunca conseguia. Obrigada!
    Obs.: não uso esse efeito ,o meu não é hover, mais eu amei!
    Beijos, Gaby *----*

    ResponderExcluir
  2. adorei a dica!!!!

    bj

    Leandra - www.cherryboomshop.com

    ResponderExcluir
  3. Gostei por causa do efeito hover para riscado! Mto obrigada =)

    ResponderExcluir
  4. Oie, adoro esse blog, estou seguindo ^_^ eu tenho uma duvida, poderiam por favor me responder? é que eu queria saber como faço pra colocar mini gifs pelo meu blog? tipo vc colou um gif de uma menininha na sua bio e um gif no canto direito embaixo da tela e outros espalhados pelo blog e eu nao sei por :( me ajuda please"""

    ResponderExcluir
    Respostas
    1. Obrigada ^^ Bom, o da menininha está em um gadget HTML/JavaScript, então é só adicionar uma URL da imagem como você faria normalmente em um post por exemplo, se adicionar pelo HTML da postagem (aquele que fica em img src=...).
      Já os dos cantinhos funcionam em um tutorial que em breve postarei aqui, servem para deslizar para cima, para baixo...
      Os demais, como brilhos e fadinhas, já postei como no post Magia em HTML: Criando Efeitos Kawaii (veja em arquivos)
      Acho que é isso ^^ Se houver alguma coisa mais pode perguntar ok?
      Beijus ;3

      Excluir
    2. desculpe pela burrice.É que sou mei desligada pode me dizer aonde faz esse négocio do HTML?

      Excluir
    3. Imagina, e não é burrice perguntar sobre o que se tem dúvida :3
      Bem, em os gadgets ficam na opção Layout; lá você clica onde diz: Adicionar um gadget. E depois escolhe a opção HTML/JavaScript. Já nos posts tem uma opção HTML na parte de cima de onde se digita em que são mostradas tudo o que a gente escreve em HTML. Por exemplo, para adicionar uma imagem vc deve posta-la ou fazer o upload no ícone de imagens; depois disso clique na opção html para ver como ficou.

      Excluir
  5. Oi Roberta precisando de sua ajuda...rs ,você postou esse tuto maravilhoso mas a pessoa aqui não queria por tudo isso,eu queria por uma linha divisória no titulo da postagem mas não sei como fazer e onde colocar,você pode me salvar,rs...vou ficar esperando...bjs e um abençoado domingo.

    ResponderExcluir
    Respostas
    1. Voce se refere a algo tipo um sublinhado neh? Se for, antes de /b:skin ou na area de codigo dos posts no html do seu lay, ou ainda no css do designer de modelo, cole isso:
      post h3 a, .post h3 a:visited, .post h3{border-bottom: 3px dotted #fcc;}
      3 eh a espessura, dotted eh o tipo, que no caso seria pontilhado e #fcc eh o codigo da cor.
      Seria isso? Espero ter ajudado, mas por favor, se estiver com duvidas, me avise ok?
      Beijus..

      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 - Google+ - Deviantart