03/12/2014

01. Maratona CSS: Negrito, Itálico, Riscado e Sublinhado com background

||

Ohayoo!!! Vendo os comentários de duas postagens atrás um leitor deu uma ideia bem legal, de fazer uma maratona de tutoriais. Achei super legal e decidi fazer, claro que ainda farei o Big Tutorial de como criar um layout avançado, mas estou fazendo cada postagem com paciência. Mas muito obrigada pela ideia Guh de Britto, achei mega legal! Nessa maratona farei 20 postagens, e, para começar trago um tutorial com o nome comprido e comum colocando cor no Negrito, Itálico, Riscado e Sublinhado só que com background, simplificando colocar as letras ativadas como negrito, itálico, riscado e sublinhado com fundo de cor. Esse tutorial até estava na listinha de pedidos, então decidi começar com ela.  É super fácil, vamos lá?



Vai ficar exatamente assim, vocês podem personalizar como desejarem, colocando efeito de profundidade na letra, sombra ou estilo overlay, podem colocar uma bordinha saliente como fiz no Sublinhado (no hover). Uffa... ou seja podem fazer bastante coisa em vez de só deixar o fundo e cor.

1. Para começar vá até a pagina Modelo e então clique em Editar HTML e procure por ]]</b:skin> e acima cole:

b {
color: #787878;padding: 2px 4px 2px 4px;text-decoration: none;cursor: default;-webkit-transition-duration: .90s;}
b:hover {
color: #dacee0;background:#787878;padding: 2px 4px 2px 4px;text-decoration: none;cursor: default;border-radius: 5px;-webkit-transition-duration: 1.70s;}
i {
color: #e68ea6;padding: 2px 4px 2px 4px;text-decoration: none;cursor: default;-webkit-transition-duration: .90s;}
i:hover {
color: #f2eeeb;background:#787878;padding: 2px 4px 2px 4px;text-decoration: none;cursor: default;border-radius: 5px;-webkit-transition-duration: 1.70s;}
u {
color: #e68ea5;border-bottom: 1px dotted #787878;padding: 2px 4px 2px 4px;text-decoration: none;cursor: default;-webkit-transition-duration: .90s;}
u:hover {
color: #e68ea6;background:#787878;border-bottom: 1px solid #e68ea5;padding: 2px 4px 2px 4px;text-decoration: none;cursor: default;border-radius: 5px;-webkit-transition-duration: 1.70s;}
s, strike {
color: #c4b9c9;padding: 2px 4px 2px 4px;cursor: default;-webkit-transition-duration: .90s;}
s, strike:hover {
color: #f2eeeb;background:#787878;padding: 2px 4px 2px 4px;text-decoration: none;cursor: default;-webkit-border-radius: 5px;-webkit-border-top-left-radius: 0;-moz-border-radius: 5px;-moz-border-radius-topleft: 0;border-radius: 5px;border-top-left-radius: 0;-webkit-transition-duration: 1.70s;}

O código é meio grandinho, mas nada complicado de entender. Agora vamos as explicações:
Vermelho: Cor da fonte
Verde: Cor de fundo
Laranja: Espaço interno. Se quiser deixar o espaço maior é só aumentar o valor. Aconselhável sempre deixar um valor mesmo que seja apenas 1px.
Azul: Texto sem decoração, é para não ficar aquela linha em abaixo das palavras, só há exerção no sublinhado.
Rosa (ou quase isso): Tempo de transição; transformar o efeito.
Esqueci o nome dessa cor: Tipo de cursor.
Verde folha: Raio de fronteira (bordas arredondadas).
Roxo: Borda de baixo, exemplo.

 Agora é só salvar!

21 comentários:

  1. nossa amei o tutorial, para mim vai ser muito útil xd

    Com carinho, Aishiteru em Contos |

    ResponderExcluir
    Respostas
    1. Que bom :3 obrigada por comentar.

      Excluir
  2. Gostei ^.^ Não se importaria ao passar o html do layout do seu blog? É que me apaixonei!

    ResponderExcluir
    Respostas
    1. Obrigada por gostar. Thanks fico feliz que tenha também gostado do layout. Como ainda estou usando, não passo os códigos dele em si, apenas algumas coisa mas não o modelo em sim. Só bem depois que o povo até esquece que eu usei, que passo o código. ^^

      Excluir
  3. Anda a muito tempo a procura desse tudo :3
    Obrigada ;)

    EAHU | themonsterhighuniverse.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom :3 eu que agradeço por sua visita e comentar.

      Excluir
  4. Muito útil o tutorial ~era exatamente o que eu estava procurando ♥

    Küsse - atmornin.blogspot.com

    ResponderExcluir
  5. Olá Wendy!! Como vai? Amei o tutorial!! Vou aguardar as outras 19 postagens ansiosamente!! Layout avançado? Estou precisando ^^ posso fazer um pedido? Queria saber como colocar o título do blog de ladinho!! Acho tão fofo :3

    Queria saber porque o CG não está na sua elite... já te coloquei faz tempo!!

    ResponderExcluir
    Respostas
    1. Olá!!! Vou bem obrigada por perguntar. Fico feliz que tenha gostado do tutorial. Hihi logo, logo estarão por aqui. Hihi vou fazer a primeira parte essa semana. O titulo do blog? Ou das postagens? Irei postar para você. ^^

      Mesmo, não coloquei? Peço desculpas por isso... irei resolver agora mesmo.

      Excluir
  6. Eu estava procurando esse tuto há um tempão, Wen-chan! Obrigada por postar (mesmo não sendo eu a pessoa que pediu, dã) *~*

    Besitos || HTMLittle

    ResponderExcluir
    Respostas
    1. Que bom que já postei então \o/ De nada linda é um prazer poder sempre trazer tutus para vocês. Hihi mas é valido assim mesmo. ^^ Beijinhos

      Excluir
  7. Agora eu sei qual é o segredo kkkkkkk
    Amei o tuto ^^

    Kissus ^3^ http://c-omebackhome.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Hihi bem fácil, né? ^^ Obrigada por gostar. Beijokas.

      Excluir
  8. Eu como você também adorei a ideia da maratona, esse negocio de como faazer um layout é muito legal até pra mi mesma que não sou lá muito boa com HTML vou acompanhar e favoritar, vou usar todas as dicas.
    Adorei esse tuto, muitoo útil mesmo e super bem explicado.

    Beijos ❤
    http://www.p-perfectsthings.com/ | Quietly Pink

    ResponderExcluir
  9. Respostas
    1. É só seguir o tutorial, explico tudo na postagem também como adicionar. ^^ Para ativa-los é na postagem, selecione o texto que quer por o efeito e clique em Negrito, Italico etc...

      Excluir
  10. Eu adorei a ideia da maratona de tutoriais porque eu necessito dos mesmos kk *>* e amei o tuto de hoje e seu layout esta divino !! Parabens <3
    http://e-tern4l.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Hihi que bom! ^^ Obrigada por gostar do tutorial e do layout. Muito obrigada.

      Excluir
  11. Ohh eu adorei, cada detalhe faz a diferença em um layout, super cute esse efeito!

    http://animesjaychan.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Tem toda razão, realmente cada detalhe faz diferença. Eu também acho esse efeito muito fofo. ^^

      Excluir