• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

6 de dezembro de 2014

[Exclusivo] 2 Modelos de sublinhado com background em fade

(quem nasceu para ser diva, é diva e pronto)
Hooý chocolates cobertos com amora de limão com chocolate branco, tudo bem? Espero que estejam bem. Haha' essa é uma postagem programada e por isso, no momento estou vendo "Como eu conheci sua mãe" haha' um dos meus episódios favoritos, não sei ao certo o nome mas é um ep. onde o Marshel acredita que o empresário japonês é gay só que na verdade é tudo obra da cabeça dele. Estou feliz pelos comentários e estou procurando responder todos, ainda estou respondendo a maioria. Já que não estou conseguindo fazê-los de uma vez só, estou fazendo aos poucos.

Agora, mudando de assunto...gente, o natal está chegando não é?! Estou pensando no que posso fazer para comemorar essa data tão especial aqui no blog, eu particularmente amo o clima agradável do natal, o fato de dormir fora, a ceia, o fato de ser o nascimento de Jesus, é tipo...perfeito demais, uma das melhores datas de todas, a parte chata é somente o fato dos parentes (tios, e talz) virem perguntado: "E os namorados, já tem?", "Hum...elas (eu e a Megan) são magrinhas, não comem não?", "Elas comem direito?" e blá, blá, blá...mas fora isso. Ah, repararam que o nosso blog está meio no clima de natal? Haha' temos neve por aqui '0' (Oh! Que natalinas! Sqn).

Agora, realmente indo a postagem...não sei ao certo se realmente esse tutorial original sem minhas modificações era do Cherry Bomb mas por via das dúvidas...Leia mais
Então, eu usei o modelo de sublinhado, itálico, negrito e tachado em hover e fade original e modifiquei o sublinhado colocando fundo. Fiz dois modelos diferentes de sublinhado. O primeiro é com um efeito gradiente no fundo e o outro tem um efeito normal, vamos ver?

Coloquei a imagem apenas dos sublinhados que são o foco:
Modelo 1

Normal         Hover
  
Preview 1: www

Para usá-lo, vá em Modelo > Editar HTML, procure por: ]]></b:skin> e cole acima dele:
 /*formatação*/
b, strong, bold { color: #fac2d0; -webkit-transition-duration: .80s}
s, strike { color: #e3d6bb; -webkit-transition-duration: .80s}
u, underline {  color: #fac2d0 ;background-color: #fde6ec;padding:2px;border-radius:3px;
box-shadow: inset 0 0 20px #fbd4de, 0 0 4px #ccc; text-shadow:0px 0px 0px #ccc; text-decoration: none; -webkit-transition-duration: .80s}
i, em, italic { color: #daddcc ; -webkit-transition-duration: .80s}
/*formatação hover*/
b:hover { color: #f8b0c1 ; -webkit-transition-duration: .80s}
i:hover { color: #e5e7db ; -webkit-transition-duration: .80s}u:hover { color: #d4dca9; background-color: #e9edd3;padding:2px;border-radius:3px;
box-shadow: inset 0 0 20px #e2e7c5, 0 0 4px #ccc;text-shadow:0px 0px 0px #ccc; text-decoration: none; -webkit-transition-duration: .80s}
Modelo 2

Normal            Hover
Preview 2: www

Para usá-lo, vá em Modelo > Editar HTML, procure por: ]]></b:skin> e cole acima dele:
 /*formatação*/
b, strong, bold { color: #b3dfef; -webkit-transition-duration: .80s}
s, strike { color: #f5ced8; -webkit-transition-duration: .80s}
u, underline {  color: #fff ;background-color: #93d1e8;padding:2px;border-radius:3px;
box-shadow: inset 0 0 30px #a2cad9, 0 0 2px #98cfe3; text-decoration: none; -webkit-transition-duration: .80s}
i, em, italic { color: #e78da5 ; -webkit-transition-duration: .80s}
/*formatação hover*/
b:hover { color: #83cae5 ; -webkit-transition-duration: .80s}
i:hover { color: #dd5c7f ; -webkit-transition-duration: .80s}u:hover { color: #fff; background-color: #e78da5;padding:2px;border-radius:3px;
box-shadow: inset 0 0 30px #e47d98, 0 0 2px #e06d8b;  text-decoration: none; -webkit-transition-duration: .80s}
Espero que tenham gostado dessas modificações que fiz no modelo original, já que agora a maioria das pessoas usam o sublinhado com background ao em vez do sublinhado abaixo das palavras como o tradicional, espero que usem e gostem. Bjoon

Se reblogar credite nosso blog (Adolescente Nerd) e o Cherry Bomb


17 comentários:

  1. Muito fofo esse hover. :3 Ah, Hannah, já coloquei o botão seguir lá no meu blog só que ele ta em cima no canto direito! :3

    imperio--kawaii.blogspot.com

    ResponderExcluir
  2. Haha eu tbm amo o natal *O* Até o q é chato se torna legal nesse dia huehue e a neve deixou um climinha de natal no blog :3
    Amei os modelos, salvei nos favoritos para usá-los depois :3

    ~September Rains

    ResponderExcluir
  3. Nossa, agra tirei minhas dúvidas ^^
    Amei os efeitos ^^

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

    ResponderExcluir
  4. Eu sempre me perguntava como vocês faziam esse efeito e PAM... Descobri! HUSHEUHSE' amei, com certeza irei usar no meu próximo layout ^~^

    HTMLittle || Besitos da Jubs ;*

    ResponderExcluir
  5. Ameei o tutorial , acho super fofo esses hovers com efeitinhos e tal, dá um toque fofo no blog :D
    simples-garotaa.blogspot.com

    ResponderExcluir
  6. Adorei o tuto, super prático!

    http://www.papodemeninasaer.com/

    ResponderExcluir
  7. Adoro os efeitos da página! Legal que você também compartilha os recursos :)

    Beijos,
    Helô, do Vestido do dia

    ResponderExcluir