Nesse primeiro tutorial que trago, juntei dois modelos de blockquotes personalizados para vocês e estarei ensinando como editá-los! Para ver, clique em Mais Informações!
Modelo 1
blockquote {
color: #fff; /* Cor da fonte */
font-size: 11px; /* Tamanho da fonte */
background: #ffc6e2; /* Cor do fundo */
padding: 10px;
outline-offset: -6px;
outline: 1px dashed #fff; /* Cor da linha pontilhada */
text-shadow: 1px 1px 0px #ff82bc; /* Cor da sombra do texto */
box-shadow: inset 5px 5px 8px #ff82bc, inset -5px -5px 8px #ff82bc; /* Sombra do interior */
-moz-box-shadow: inset 5px 5px 8px #ff82bc, inset -5px -5px 8px #ff82bc;} /* Sombra do interior */
Modelo 2
blockquote {
background:#ffc6e2; /* Cor do fundo */
color: #ffffff; /* Cor da fonte */
text-shadow: 1px 1px 0px #ff85bd; /* Cor da sombra do texto */
font-size: 11px;
font-family: tahoma;
padding: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-right: 5px;
-webkit-transition-duration: .50s;
}
blockquote:hover {
background: #ff85bd; /* Cor do fundo */
color: #ffffff; /* Cor da fonte */
text-shadow: 1px 1px 0px #ffc6e2; /* Cor da sombra do texto */
font-size: 11px;
font-family: tahoma;
padding: 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-right: 5px;
-webkit-transition-duration: .50s;
}
O segundo blockquote tem efeito hover, para quem não sabe é quando passa o mouse por cima, daí na parte do blockquote hover para baixo, vocês podem colocar outras cores. Eu coloquei ao lado de cada código que deve ser alterado uma pequena explicação.
Todo código base vem com um blockquote, então para alterar, basta você apagar o código existente e colar o modificado. Caso não tenha, você deve pesquisar por ]]></b:skin> e colar o código logo acima.
Caso tenham dúvidas, comentem!
Beijos, Maria
thank you!
ResponderExcluir