29 de nov de 2013

Como Personalizar o Blockquote II


Oieee cupcakes de chocolate com M&M's - clichê -
O tutorial de hoje é de um blockquot lindinho que eu achei no Garotas Cupcakes.
Pra começar procure (Ctrl + F) por:
]]>
e cole o seguinte código:
/* Blockquote By:  Garotas Cupcakes*/
blockquote {
border-right: 10px solid #e5a7bb; /* Cor da borda direita antes do hover */
border-left: 10px solid #e5a7bb; /* Cor da borda esquerda antes do hover */
background-color: #f5f2f3; /* Cor do background */
padding: 10px; font-size: 12px;
font-family: Arial;
color: #e193a6; /* Cor da fonte antes do hover */
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
-webkit-transition-duration: .50s;
}
blockquote:hover{ /* Quando passa o mouse */
background: #f5f2f3;
border-left: 5px solid #00a7ac; /* Cor da borda esquerda no hover */
border-right: 5px solid #00a7ac; /* Cor da borda direita no hover */
font-size: 12px; 
color: #e193a6; /* Cor da fonte no hover */
text-align: center; 
font-family:Corbel;
-webkit-transition-duration: .50s; }
É só personalizar do jeito que você preferir, recomendo essa tabela.
Então pessoas é isso...
Beijos <3

Nenhum comentário:

Postar um comentário