Utilitários: 4 Blockquotes em hover.

novembro 12, 2013,4 Comments

Heeeey, como vão? 

Bom, acho que essa será a minha única postagem de hoje, tá um enorme calor aqui em São Paulo e eu amo dormir, no calor da mais sono ainda né? Como trabalho de manhã e a tarde tenho o dia inteiro pra fazer qualquer coisa, vou colocar The Monster na playlist do meu celular pra repetir enquanto eu durmo sossegada. Deus sabe quanto eu desejo a minha casa. -q. Acho que na outra vida eu era um colchão. Que merda. Enfim, nada melhor que dormir no calor com o ventilador no seu rosto, é uma das melhores sensações do mundo. Pelo menos pra mim. Amo forte.

Enfim deixa eu parar de falar merda e vamos ao assunto do post. Pediram no ask pra eu dar o meu melhor e fazer blockquote, porém eu não sei fazer blockquote, eu não sabia até ontem, fiquei até as seis da manhã de hoje pensando em algum tipo de blockquote, o que não adiantou em nada, porque eu fiquei mais assistindo vídeo no youtube do que fazendo os blockquotes, acabou que eu fiz apenas quatro e todos tem praticamente o mesmo efeito, tá quase todos iguais. Veja aqui (preview) Se você gostar, clique em leia mais pra pegar os códigos. Até! 

Para colocar o blockquote, vá em "Modelo" > "Editar HTML" e procure por:

]]></b:skin>

E cole um desses códigos abaixo. Salve e depois veja se tudo estiver certo.

Para o primeiro blockquote: 

.post blockquote {
background: #c8c8c8;
padding: 6px;
color: #fff;
text-align: center;
transition:All 0.7248s ease-in-out;
-webkit-transition:All 0.7248s ease-in-out;
-moz-transition:All 0.7248s ease-in-out;
-o-transition:All 0.7248s ease-in-out;
box-shadow: 1px 1px 2px #ccc;
border-radius: 8px;
-webkit-transition-duration: .90s;
border-left: solid 2px #a5a2a2;
border-right: solid 2px #a5a2a2;
}
.post blockquote:hover {
background: #84abdd;
padding: 6px;
color: #fff;
text-align: center;
transition:All 0.7248s ease-in-out;
-webkit-transition:All 0.7248s ease-in-out;
-moz-transition:All 0.7248s ease-in-out;
-o-transition:All 0.7248s ease-in-out;
border-radius: 1px;
-webkit-transition-duration: .90s;
border-left: solid 2px #6b8fbd;
border-right: solid 2px #6b8fbd;
}

.post blockquote {
background: #c8c8c8;
padding: 6px;
color: #fff;
text-align: center;
transition:All 0.7248s ease-in-out;
-webkit-transition:All 0.7248s ease-in-out;
-moz-transition:All 0.7248s ease-in-out;
-o-transition:All 0.7248s ease-in-out;
box-shadow: 1px 1px 2px #ccc;
border-radius: 1px;
-webkit-transition-duration: .90s;
border-left: solid 2px #a5a2a2;
border-right: solid 2px #a5a2a2;
border-top: solid 2px #a5a2a2;
border-bottom: solid 2px #a5a2a2;
}
.post blockquote:hover {
background: #84abdd;
padding: 6px;
color: #fff;
text-align: center;
transition:All 0.7248s ease-in-out;
-webkit-transition:All 0.7248s ease-in-out;
-moz-transition:All 0.7248s ease-in-out;
-o-transition:All 0.7248s ease-in-out;
border-radius: 1px;
-webkit-transition-duration: .90s;
border-left: solid 2px #6b8fbd;
border-right: solid 2px #6b8fbd;
border-top: solid 2px #6b8fbd;
border-bottom: solid 2px #6b8fbd;
}

.post blockquote {
background: #d5d0d0;
padding: 6px;
color: #fff;
text-align: center;
transition:All 0.7248s ease-in-out;
-webkit-transition:All 0.7248s ease-in-out;
-moz-transition:All 0.7248s ease-in-out;
-o-transition:All 0.7248s ease-in-out;
box-shadow: inset 0 0 25px #a5a2a2;
border-radius: 4px;
-webkit-transition-duration: .90s;
}
.post blockquote:hover {
background: #c1d2f9;
padding: 6px;
color: #fff;
text-align: center;
transition:All 0.7248s ease-in-out;
-webkit-transition:All 0.7248s ease-in-out;
-moz-transition:All 0.7248s ease-in-out;
-o-transition:All 0.7248s ease-in-out;
box-shadow: inset 0 0 25px #a8c1f9;
border-radius: 1px;
-webkit-transition-duration: .90s;
}

.post blockquote {
background: #d5d0d0;
padding: 6px;
color: #fff;
text-shadow:#a7a7a8 0px 1px 1px;
text-align: center;
transition:All 0.7248s ease-in-out;
-webkit-transition:All 0.7248s ease-in-out;
-moz-transition:All 0.7248s ease-in-out;
-o-transition:All 0.7248s ease-in-out;
box-shadow: inset 0 0 15px #a5a2a2, 0 0 5px #a5a2a2;
border-radius: 1px;
-webkit-transition-duration: .90s;
border-left: solid 1px #a5a2a2;
border-right: solid 1px #a5a2a2;
border-top: solid 1px #a5a2a2;
border-bottom: solid 1px #a5a2a2;
}
.post blockquote:hover {
background: #b9d3f3;
padding: 6px;
color: #fff;
text-shadow:#97adc7 0px 1px 1px;
text-align: center;
transition:All 0.7248s ease-in-out;
-webkit-transition:All 0.7248s ease-in-out;
-moz-transition:All 0.7248s ease-in-out;
-o-transition:All 0.7248s ease-in-out;
box-shadow: inset 0 0 15px #9cacbf, 0 0 5px #9cacbf;
border-radius: 1px;
-webkit-transition-duration: .90s;
border-left: solid 1px #71a0d9;
border-right: solid 1px #71a0d9;
border-top: solid 1px #71a0d9;
border-bottom: solid 1px #71a0d9;
}