♦ 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

6 comentários:

  1. Se eu não tivesse mudado o Layout do meu agora eu usaria ... eu acho esse tipo de Blockquote lindo >_< foi porque eu tinha visto um (Parecido) em um lugar e até hoje não lembro onde foi...mas salvei esse nos favoritos porque no próximo eu vou usar !

    Hyumi-Kwon.Blogspot.Com

    ResponderExcluir
  2. Uall, que legal
    eu não sabia que era tão simples assim.

    garotoimoral.blogspot.com

    ResponderExcluir
  3. Muito bonitinho e fofo !
    blog-always-smilebyja.blogspot.com

    ResponderExcluir
  4. Que fofo!!
    To usando no lay q to fazendo :D
    Amei o menu de vocês,podem postar um tutorial de como fazer?pelo menos um parecido?

    ResponderExcluir