Oie... Vi em um blog (Wanaseoby) há algum tempo um estilo aplicado aos textos sublinhados que achei bem legal, diferente do normal, pensei que era complicado mas não é, na verdade, é super simples: basta aplicar uma imagem ao texto no lugar da linha que aparece como sublinhado.
Fica assim:
E como vocês devem ter visto, é possível fazer o mesmo com textos tachados. Primeiro, você precisará de imagens; fiz algumas para vocês, com exceção das duas últimas, que encontrei no Engrampixel:
Os códigos abaixo devem ser adicionados no html do seu template, antes de /b:skin.
Sublinhado Modelo 1:
@import 'https://fonts.googleapis.com/css?family=Gabriela';
u {
text-decoration:none;
color: lightpink;
font-family: 'Gabriela', serif;
font-size: 14px;
background:url('URL-DA-IMAGEM') no-repeat bottom;
padding-bottom:5px;
background-size: 520px;/*tamanho opcional*/
}
Sublinhado Modelo 2:
@import 'https://fonts.googleapis.com/css?family=Gabriela';
u {
text-decoration: none;
color: lightpink;
font-family: 'Gabriela', serif;
font-size: 14px;
background: url('URL-DA-IMAGEM') repeat-x bottom;
padding-bottom: 5px;
background-size: 70px;
}
Tachado:
@import 'https://fonts.googleapis.com/css?family=Gabriela';
strike {
text-decoration:none;
color: lightblue;
font-family: 'Gabriela', serif;
font-size: 14px;
background: url('URL-DA-IMAGEM') no-repeat center;
}
Se você não quer usar a fonte Gabriela, basta removê-la do código ou usar outra de sua preferência, mas caso queira, não precisa repetir a parte do @import... só uma vez dá certo; no modelo 1, dependendo do caso, você pode definir o tamanho da imagem abaixo do texto se necessário, se quiser, pode remover do código, já no modelo 2 fica melhor modificar o tamanho da imagem por ela ser maiorzinha. E em todos você pode mudar as cores, tamanho e tipo da fonte, além das imagens. O resultado aparece toda vez que usar um texto sublinhado ou tachado, ou entre <u>texto</u> ou <strike>texto</strike>.
Se quiser ver mais estilos para formatações de texto como negrito e itálico, clique aqui.
Imagem de abertura do post: Weheartit.
amei, usando *---* o tachado, não deu pra usar, daí peguei outro código .-. não sei se não foi por causa do template, ou sei lá, por outra coisa, então coloquei outro código, acima de head algo assim, só que não ficou igual ao seu, veja http://megaplanetaliterariofanfics.blogspot.com.br/2016/09/sobre-autora.html#more
ResponderExcluirjá no outro blog de teste, os códigos que vc deu, deu certo, veja http://cotapramimaushshs.blogspot.com.br/ talvez seja, por causa do template mesmo, já o sublinhado deu certo nos dois blogs :3 veja http://megaplanetaliterariofanfics.blogspot.com.br/2016/09/about-do-blog.html#more
Fico feliz que tenha gostado :3 Quando eu testei o código, no caso do tachado também não deu certo, aí fui ver o html da postagem e o texto tachado estava entre (s) e (/s), foi só mudar para (strike) e (/strike) (substituindo os parenteses por <>).
ExcluirEntendi :D, posso te pedir um tutorial? eu gostaria muito que ensinasse como retirar o cursor do computador, do blog não, do computador, instalei um cursor nesse site https://userstyles.org/styles/109514/mickey-mouse-cursor-2-0 e agora ele não sai de jeito nenhum, não consigo tirar, não tem lugar de remover, já tentei de todo jeito, se puder ensinar em vídeo, eu agradeceria mais ainda, mas se não puder, mas der pra der pra ensinar de outro jeito, eu agradeceria do mesmo jeito.
Excluirkissus~