♦ Tutorial ~ Blockquote igual o nosso.

Hey Rilakkumas Monstros ^^

Eu deveria trazer mais um tutorial de halloween, mas como a Lovelly me deixou fazer um layout do concurso, então não tive uma ideia boa para algo novo. Mas o David me pediu pela Cbox que eu ensina-se a fazer o nosso blogquote.

Então você pergunta. "Mas que raios é um blockquote?"

Blockquote é usado para destacar parte do seu texto.

EXEMPLO

Entendeu? Então hoje vamos aprender esse blockquote que temos aqui no blog.

NORMAL

AO PASSAR O MOUSE

Então, vamos aprender?

Primeiro vá em.

Layout >> Adicionar Gadget >> HTML/JavaScript

E Cole esse código.

<style>
blockquote {
border-right: 12px solid #1591d8;/*tamanho e cor da borda direita*/
border-left: 12px solid #a0e281;/*tamanho e cor da borda esquerda*/
background-color: #f3f3f3; /* cor de fundo */
padding: 10px;
font-size: 13px; /* tamanho da fonte */
color: #000; /* cor da fonte */
box-shadow: inset 0 0 7px #d6d6d6, 0 0 10px #ccc; /**Cor da sombra de dentro e fora **/
-webkit-transition-duration: .80s; /* efeito fade */
text-align: justify;
}
blockquote:hover{
border-right: 5px solid #a0e281;/*tamanho e cor da borda direita ao passar o mouse*/
border-left: 5px solid #1591d8;/*tamanho e cor da borda esquerda ao passar o mouse*/
box-shadow: inset 0 0 5px #d6d6d6, 0 0 5px #ccc; /**Cor da sombra de dentro e fora ao passar o maouse**/
-webkit-transition-duration: .80s; /* efeito fade */
}
</style>

Para usar o Blockquote, você seleciona e texto e aperta nesse botão.

• Entendendo.
• border-right: 12px solid #1591d8;

Aqui é a borda. 12px é o tamanho, Solid é o tipo e #1591d8 é a cor

• box-shadow: inset 0 0 7px #d6d6d6, 0 0 10px #ccc;

Na sombra modificamos isso: 7px e #d6d6d6 é o tamanho e cor da sombra de dentro e 10px e #ccc é o tamanho e cor da sombra de fora.

Todo o resto está explicado no próprio código, é só ler ele.

Tem uma tabela de cores lá no menu "EXTRAS"

BYE BYE