1.1.14

Negrito, itálico, sublinhado e tachado em hover


Tadaima ^^

Sei que tenho estado um nadinha ausente, mas fazer o quê? Tinha de aproveitar as férias! De qualquer modo, espero que tenham tido um bom natal e ano novo, cá em Portugal não se dá mergulhos na praia, mas também há várias tradições.

O que trago hoje é algo simples mas que deve ser feito com cuidado, pois pode fazer toda a diferença no visual do blog - vá, não tanto como o cabeçalho ou sidebar, mas ainda assim, mostra se a blogueira é profissional no que faz. Já devem ter notado o que é: negrito, itálico, tachado e sublinhado em hover. Este é o modelo que uso neste blog, mas agradecia que mudassem as cores, ok? Bem, cá vai...




Dê Ctrl+F e procure por:
/b:skin
Acima cole:
b {
background: #def0fc;
color: #8dc5eb;
text-shadow: 1px 1px 1px #ffffff;
border-radius: 2px;
-webkit-transition-duration: .60s;
}
b:hover {
background: #ffc9cd;
color: #fa758c;
text-shadow: 1px 1px 1px #ffffff;
-webkit-transition-duration: .60s;
}
i {
border-radius: 2px;
background: #ffc9cd;
color: #fa758c;
text-shadow: 1px 1px 1px #ffffff;
text-decoration: none;
-webkit-transition-duration: .60s;
}
i:hover {
background: #def0fc;
color: #8dc5eb;
text-shadow: 1px 1px 1px #ffffff;
border-radius: 2px;
text-decoration: none;
-webkit-transition-duration: .60s;
}
u {
color: #8dc5eb;
text-shadow: 1px 1px 1px #bce5f7;
border-bottom: 1px dashed #8dc5eb;
-webkit-transition-duration: .60s;
}
u:hover {
color: #fa758c;
text-shadow: 1px 1px 1px #fcbdca;
text-decoration: none;
border-bottom: 1px double #fa758c;
-webkit-transition-duration: .60s;
}
strike {
color: #fa758c;
text-shadow: 1px 1px 1px #fcbdca;
text-decoration: strike;
-webkit-transition-duration: .60s;
}
strike:hover {
color: #8dc5eb;
text-shadow: 1px 1px 1px #bce5f7;
text-decoration: strike;
-webkit-transition-duration: .60s;
}

Se não quiser o modelo que uso e sim algo mais "normal", aqui tem o código numa versão simplificada (sem hovers, fundos ou sombras), mude as cores na mesma:
b {color: #fa758c; text-decoration: none; }
i {color: #8dc5eb; text-decoration: none; }
u {color: #fa758c; border-bottom: 1px dashed #fa758c; text-decoration: none; }
strike {color: #8dc5eb; text-decoration: strike; }


E embora ache que toda a gente sabe os significados, cá vai uma mini explicação do código:

  • b » negrito
  • i » itálico
  • u » sublinhado
  • strike » tachado/riscado
Voilá, era isto.


4 comentários:

  1. Olá, poderia me ajudar?? você tem o tutorial de prévia de title? tipo, eu coloco um título em um link ou imagem do meu blog e gostaria que esse título que aparecesse antes de clicar esteja personalizado com fundo preto e letra branca. Sabe me ajudar nisso??

    ResponderEliminar