Follow Us @soratemplates

terça-feira, 11 de outubro de 2016

Sublinhado com Imagem


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:

Sublnhado com imagem kawaii

Sublnhado com imagem kawaii

Strike
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.

3 comentários:

  1. 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
    já 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

    ResponderExcluir
    Respostas
    1. 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 <>).

      Excluir
    2. Entendi :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.
      kissus~

      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