3 de nov de 2012

Estilos para blockquote


Ooi gente! Como vão? Espero que estejam bem, agora estamos com as postagens do blog reguladas, a Bea posta às terças e sextas, e eu no resto dos dias, então fico livre nos dias dela, para preparar postagens, responder comentários, que estão totalmente acumulados, e descansar.

Hoje eu trouxe dois estilos para o blockquote do blog de vocês, estão muito legais, e foram feitos exclusivamente por mim, alguém aí sabe se o live preview funciona com blockquotes também?

Blockquote 1 - Estilo 3D
A proposta dele é ter a borda mais escura sem o hover, e mais clara com o hover.

.post blockquote {
background: #FFC0CB;
border:2px inset #FF69B4;
text-align: left;
padding: 5px;
margin:10px 20px 10px 20px;
cursor: crosshair;
-webkit-transition-duration: 0.7s;
}
.post blockquote:hover {
background: #FF69B4;
border:2px outset #FFC0CB;
text-align: left;
padding: 5px;
margin:10px 20px 10px 20px;
-webkit-transition-duration: 0.7s;
}

Em itálico, o fundo, deixe ele mais claro sem o hover e mais escuro com o hover.
Em sublinhado, a largura, estilo e cor da borda, aconselho a mudar apenas a cor, deixando mais escura sem o hover, e mais clara com o hover.

Blockquote 2 - Colorful
Esse é mais simples, apenas tem as quatro bordas com cores diferentes, e no hover ele fica arredondado.

.post blockquote {
background: #FFFFFF;
border-left: 2px solid #1E90FF;
border-right: 2px solid #00FF00;
border-top: 2px solid #F08080;
border-bottom: 2px solid #FF34B3;
text-align: left;
padding: 5px;
margin:10px 20px 10px 20px;
cursor: crosshair;
-webkit-transition-duration: 0.7s;
}
.post blockquote:hover {
background: #FFFFFF;
border-left: 2px solid #1E90FF;
border-right: 2px solid #00FF00;
border-top: 2px solid #F08080;
border-bottom: 2px solid #FF34B3;
text-align: left;
padding: 5px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin:10px 20px 10px 20px;
-webkit-transition-duration: 0.7s;
}

Em itálico, temos a cor do fundo, e em sublinhado, temos as larguras, estilos e cores das quatro bordas, aconselho que deixem sempre as quatro com cores diferentes.

Espero que tenham gostado dos blockquotes, se forem usar por favor creditem e não repassem.

Beijos, até mais!

8 comentários:

  1. Lindos demais os estilos! Eu adorei principalmente o primeiro :3
    Ótimo post!
    Beijinhos :*

    PiinkCookie.blogspot.com

    ResponderExcluir
  2. que lindoo fica!

    http://manguitarosa.blogspot.com.br/

    beijooos

    ResponderExcluir
  3. Oi, o Cat Girl está passando uma fase complicada e estou pedindo vossa ajuda. Deixo o blog em hiatus ou não ?

    ResponderExcluir
  4. Amei o efeito, fica super legal!
    victory-blog1.blogspot.com.br

    ResponderExcluir
  5. Gosteeei, muito útil!
    http://modinhamodao.blogspot.com.br/

    ResponderExcluir
  6. Obg esta mesmo atrás deste tuto !
    Seguindo seu blog, será bem vinda no meu também. Kisses ~

    http://mariaclaradesign.blogspot.com.br/

    ResponderExcluir
  7. Amei os Blockquotes,mais eu ainda sou meio novata nesses negócios de designs,queria saber onde coloca o código do blockquote,se é no CSS ou no html.. Obrigado,muito lindo seu blog!

    ResponderExcluir

Obrigada por ler e comentar!
Deixe o link do seu blog (ou seu perfil aberto) para que eu possa retribuir. Não gosto muito de responder dúvidas via comentários, então prefiro que você mande na ask ali ao lado ->
Comentários de divulgação sem nada sobre o post não serão retribuidos. Fale pelo menos um pouquinho sobre o post, por favor.
Faça aos outros aquilo que você quer que façam para você.