Como fazer uma bloquote

hakuna matata. ▲ | via Tumblr

    Olá, tudo bem?
    Reparei agora em duas coisas, a primeira é que não faço um tutorial há muito tempo, e eu gostava de encher a página dos Goodies. A segunda coisa é que o Pugs Generation já não muda de layout há 1 mês! Estou a pensar seriamente em mudar o layout, mas eu não tenho coragem pois este foi o meu melhor...
    Deixando de falar sobre mim e os meus problemas, decidi postar um tutorial: Como fazer uma bloquote.
    Nota: A bloquote foi feita por mim ^-^. Se utilizarem, coloquem os respectivos créditos.
    Atenção: Testado apenas em template Travel.

    Vai ao HTML > Faz Ctrl + F dentro da caixa e pesquisa por  ]]></b:skin>
    Acima da tag coloca o código abaixo:

blockquote  {
border-left: 8px solid #FF4193; /* cor da borda esquerda sem o mouse por cima*/
border-right: 8px solid #FF4193; /* cor da borda direita sem o mouse por cima*/
background-color: #fffdf9; /* fundo do blockquote */
padding: 10px; /* grossura da borda */
font-size: 11px; /* tamanho da letra */
color: #383838; /* cor da letra */
text-align: center; /* alinhamento do texto */
box-shadow: inset 0 0 12px #ecebeb, 0 0 5px #bebebe; /* cor da sombra que fica ao redor */
-webkit-transition-duration: .55s;
}
blockquote:hover {
border-left: 12px solid #65beff; /* cor da borda esquerda quando passa o mouse */
border-right: 12px solid #65beff; /* cor da borda direita quando passa o mouse */
background-color: #fffdf9; /* fundo do blockquote */
padding: 10px;
font-size: 11px; /* tamanho da letra */
color: #383838; /* cor da letra */
text-align: center; /* alinhamento do texto */
box-shadow: inset 0 0 19px #ecebeb, 0 0 19px #bebebe; /* cor da sombra que fica ao redor */
-webkit-transition-duration: 1.55s;


    Faz as alterações necessárias, nomeadamente as cores, que já estão a negrito. Podes usar esta tabela para ajudar na selecção.
    Para quem usa Google Chrome, aconselho a usar a aplicação Chroma, disponível na Web Store do Chrome.
    Visualiza e, se estiver tudo certinho, Salva!
    Espero que tenham gostado!

11 comentários:

  1. Tuto bem completo e bem explicado >.<
    Útil - sempre

    Sonhos em Pastel

    ResponderEliminar
  2. Eu adoro usar blockquote, dá uma ar mais kawaii :3

    Fiquei seguindo,
    http://fashionteens-ft.blogspot.pt/

    ResponderEliminar
  3. Optimo tuto!! Tuto super util e torna os blockquotes super cute :3 adorei!

    Kissu ~♥ || Pankax&Pankadax

    ResponderEliminar
  4. Aceito a afiliação, flor, já meti o Pugs Generation nos meus afiliados :3

    http://fashionteens-ft.blogspot.pt/

    ResponderEliminar
  5. A blockquote está gira. Testei-a, acho que está é um pouco comum!

    Teen Cat

    ResponderEliminar
  6. Olá, adorei o post e adoro usar block ♪♫
    Seguindo segue de volta? (ele é novo)
    Sonhandointensamente.blogspot.com

    ResponderEliminar