6.12.12

Blockquote cute personalizado com hover


Oiii! Boa tarde!!
Hoje estou aqui para postar um blockquote personalizado com efeito hover, achei ele bem bonitinho
por isso nomeei-o de cute ahaha. Vejam como ele é abaixo e  se quiserem aprender é só continuar lendo!




Primeiramente procure por ]]></b:skin> e depois de ter achado, cole acima dele o seguinte código:


blockquote {
border: 1px solid #fb9dc5; /* Expessura, tipo e cor da borda */
background: #ffc4dd; /* cor do fundo */
padding: 10px;
font-size: 14px; /* tamanho da fonte */
font-variant:small-caps;
color: #f86aa6; /* cor da fonte */
text-align: justify; /* alinhamento do texto */
-border-radius: 10px;
}
blockquote:hover {
background: #ffe4ef; /* cor do fundo quando passa o mouse */
}
No próprio código explica o que pode ser feito.
Visualize e se estiver tudo certo salve 
OBS: Talvez o hover não apareça na visualização, mas depois de salvo aparecerá. 
Prontinho! Podem repassar o tutorial, mas com os créditos ao Goods Sweets. 
Beijinhos

6 comentários: