22 de outubro de 2013

Blockquote Personalizado

blockquote personalizado
( imagem via )

Hey pessoal, olha eu aqui de novo postando coisas referentes à design! Desta vez vou ensinar à vocês como personalizar o blockquote do blog e darei 5 exemplos para vocês usarem, ok?

Primeiramente você vai apertar no seu teclado Ctrl+F para procurar pelo trecho abaixo:
]]></b:skin>
Você deve colar o seu código acima desse trecho, ok?

     • EXEMPLO 1
blockquote {
background: url('http://goo.gl/sfdj1K'); /* imagem de fundo */
padding: 5px; /* espaço interno */
color: #fff; /* cor da fonte */
font-size: 10px; /* tamanho da fonte */
text-align: center; /* texto centralizado */
border-radius: 0 20px; /* borda arredondada */
}

blockquote:hover { border-radius: 20px 0 }
Você pode trocar os códigos que estão em negrito.

      • EXEMPLO 2
blockquote personalizado
blockquote {
background: #ba7eab; /* cor de fundo */
padding: 8px; /*espaço interno */
color: #522747; /* cor da letra */
font-size: 9px; /* tamanho da letra */
text-transform: uppercase; /* caixa alta */
border-top: 1px dotted #643057; /* borda do topo */
border-bottom: 1px dotted #643057; /* borda da base */
text-shadow: 1px 1px  #d0acc7; /*sombra da letra */
text-align: center; /*texto centralizado */
}
     • EXEMPLO 3
blockquote personalizado
blockquote {
padding: 10px;
color: #999;
font-size: 10px;
border: 3px solid #ccc;
transition: linear 0.5s;
-moz-transition: linear 0.5s;
-webkit-transition: 0.5slinear
}

blockquote:hover{ border: 3px solid #8e91bf }

 • EXEMPLO 4
blockquote personalizado
blockquote {
background: #D7C6FA;
padding: 10px;
color: #886bc2;
font-size: 11px;
border-bottom: 2px solid #ad93e4;
}

blockquote:hover{ border: 2px solid #8e91bf }

 • EXEMPLO 4
blockquote personalizado
blockquote {
background: #ffe7e9;
padding: 15px;
color: #dc616c;
font-size: 9px;
text-align: center;
border-radius: 15px;
border-left: 2px solid #dc616c;
border-right: 2px solid #dc616c;
letter-spacing: 0.5px;
transition: 0.2s ease-in;
}

blockquote:hover{ 
border-left: 3px solid #dc616c;
border-right: 3px solid #dc616c;
background: #f0f0f0
}

Sintam-se a vontade para modificar o código, só me avisem se usarem e por favor coloquem os créditos, ok? Tudo o que eu faço aqui é pensando no melhor para vocês, não quero ter que parar. (:

Se quiser acompanhar o blog: Twitter • Fanpage • Tumblr • Weheatit • Pinterest

5 comentários

  1. Olá!!!, Deus seja contigo boa noite, amiga blog maravilhoso amei as dicas, SUCESSO AMIGA.
    já estou te seguindo aguardo retribuição.
    Blog: http://arrasandonobatomvermelho.blogspot.com.br
    Canal de youtube: http://www.youtube.com/NekitaReis

    ResponderExcluir
  2. ahaha você sempre ajuda , adorei lindona, suas dicas são sempre ótimas
    bjs lindona
    seguindo seu blog

    http://ingridegoes.blogspot.com.br/

    ResponderExcluir

BLOG UNTIL WE DIE | TODOS OS DIREITOS RESERVADOS 2014-2015 © | DESIGN E DESENVOLVIMENTO: SANYT DESIGN