11/05/2015

14. Maratona CSS: Negrito, Itálico, sublinhado e riscado com sombra

||

Hello babys, como estão? Finalmente pude voltar a postar, não sei se será todos os dias mais pretendo tentar.  Estou pensando seriamente em voltar a postar postagens de assusto relevantes aqui no BC, claro ainda mantendo a categoria de HTML. O que vocês acham? Também quero agradecer pelo carinhos dos meus leitores e pela paciência de ficar tanto tempo ausente e também a Mari Diniz pelo lindo presente que me enviou, amei o caderno estilizado pelo meus bias e oppas. Para hoje trago um tutorial já bem repetido aqui no Bunny, de como colocar  negrito, itálico, sublinhado e riscado com sombra.

Eu acho esse estilo muito fofo, estou pensando em usar no meu próximo layout. Agora chega de blá blá blá, vamos ao tutorial os créditos vão para DL! Lets Go!!

Postagens da mesma categoria:
*Itálico, Negrito, Sublinhado automaticamente
*Como colocar Negrito, Itálico, e Sublinhado com efeitos Hover
*Efeito hover no Negrito, Itálico, Sublinhado e Tachado com estilos de ponteiro
*Negrito, Itálico, Riscado e Sublinhado com background

01. Vá ate seu HTML e procure por ]]></b:skin e acima dela cole o seguinte código: 
/* Personalização por Designer Lovers */
b { /*Estilo do negrito */
color: #c4b8c6;
cursor: help;
text-shadow: 0px 0px 1px #c4b8c6;
-webkit-transition-duration: .60s;
}
b:hover { /*Estilo do negrito quando passa o mouse */
color: #e5b2ba;
cursor: help;
text-shadow: 0px 0px 1px #e5b2ba;
-webkit-transition-duration: .50s;
}
i { /*Estilo do itálico */
color: #e5b2ba;
cursor: help;
text-shadow: 0px 0px 1px #e5b2ba;
-webkit-transition-duration: .50s;
}
i:hover { /*Estilo do itálico quando passa o mouse */
color: #df8eaa;
cursor: help;
text-shadow: 0px 0px 1px #df8eaa;
-webkit-transition-duration: .50s;
}
u { /*Estilo do sublinhado */
color: #c4b8c6;
cursor: help;
text-decoration: none;
border-bottom: 1px dotted #df8eaa;
text-shadow: 0px 0px 1px #c4b8c6;
-webkit-transition-duration: .50s;
}
u:hover { /*Estilo do sublinhado quando passa o mouse */
color: #f3ded6;
cursor: help;
text-decoration: none;
border-bottom: 1px dotted #ffffff;
text-shadow: 0px 0px 1px #f3ded6;
-webkit-transition-duration: .50s;}
s, strike { /* Estilo do riscado */
color: #dbd8f3;
cursor: help;
text-shadow: 0px 0px 1px #c4b8c6;}
/* Fim do código, se usar credite! */

Os códigos das cores em negrito está em negrito, dos itálicos está em itálico, sublinhados estão em sublinhado e riscados estão em riscados. Agora é só mudar as cores e salvar, visualize e prontinho.
Espero que tenham gostado, qualquer duvida é só perguntar, beijinhos.

10 comentários:

  1. Adoro esse tipo de tutorial, mesmo sendo rapidinho e fácil, é muito utilizado!
    Beijos!

    PS: Meu blog é novinho e se puder dar uma passadinha eu ficaria muito feliz!
    denossaura.com

    ResponderExcluir
    Respostas
    1. Hihi eu também, pois tem vários modelinhos diferentes. Muito obrigada por comentar. Claro que faço uma visita, com o maior prazer.

      Excluir
  2. Esse tutorial é sempre muito útil, eu lembro que no começo não sabia como colocar... ;-;

    Garota, eu procurei seu blog e não achava, aí fui ver, a url mudou kk e esse suba baby está demais *^* adorei auehahshahsu

    bjs!!

    http://my-book-on.blogspot.com/

    ResponderExcluir
    Respostas
    1. No começo eu também não sabia, eu achava que era selecionando cor na postagem rs.

      Peço desculpas por isso, fui obrigada a trocar o nome. Perdi o dominio. Obrigada por gostar linda! Estava morrendo de saudades de ti. <3

      Excluir
  3. Hey Wendy o/ Que saudades que eu estava ~abraça~
    Eu amei o tutorial, eu acho que tudo com shadow fica tão fofo X3
    Pretendo usar no próximo layout >3<
    Beijos || ♥ Colorful Dream~

    ResponderExcluir
    Respostas
    1. Yoooo Kaory!!! Também estava com saudades enormes ~abraço forte~
      Hihi idem, também acho tudo com shadow fofo, ainda mais se forem cores pasteis ou coloridas.
      Ebaaaa!!! Muito obrigada pela visita e pela linda mensagem que deixou na ask, nem tem ideia de como me animou voltar a postar.

      Excluir
  4. Já estou usando no meu layout do blog <33 alias estou usando tbm sua base layout e tals
    http://alaskablagboon.blogspot.com.br/

    ResponderExcluir
  5. Salvou meu template( ta-ta-da! Super Wendy-chan! ),
    Adoro seu blog, é muito lindo e fofo *-*

    Você me inspirou até pra url( Momento stalker da vida... )

    www.weanilovers.blogspot.com

    ResponderExcluir
  6. Hihi, obrigada M-chan. Fico muito, muito grata que esteja gostando do blog. Espero poder lhe ajudar muito =3
    xD Thanks

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram