21/12/2012

Modelo de blockquote com borda em hover [003]


Hayoo minhas goiabadas! E ai vamos personalizar nosso blockquote hoje? Vou mostrar como coloca-lo em modo hover com duas bordinhas de cores. Assim quando passar ele mudara com um efeito bem sutil, mas muito kawaii, então vamos lá?

Antes de tudo abra o seu HTML e procure pelo ]]></b:skin>, assim que o achar coloque esse código acima dele:

Códigos
.blockquote {
background: #Sua Cor; /* fundo */
box-shadow: inset 0 0 18px #e2e1e1, 0 0 3px #ccc; /* sombra interna */
padding: 3px; /* acolchoamento */
border-left: 13px solid #Sua Cor; /* espessura, tipo e cor da borda esquerda */
border-right: 13px solid #Sua Cor; /* espessura, tipo e cor da borda direita */
transition-duration: 1s; /* transição */
-moz-transition-duration: 1s; /* transição */
-webkit-transition-duration: 1s; /* transição */
}
.blockquote:hover { /* quando o mouse passa por cima */
border-left: 13px solid #Sua cor em Hover; /* espessura, tipo e cor da borda esquerda */
border-right: 13px solid #Sua cor em Hover; /* espessura, tipo e cor da borda direita */
}

Coloque as cores que bem desejar, e prontinho! Bye bye

Nenhum comentário:

Postar um comentário

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345