Como personalizar o blockquote

by - outubro 01, 2013



Olá amores, estou aqui novamente!
Bem, não vou falar muito sobre bobagens agora, por que tenho que ir arrumar a
casa ( Gaby: escrava Isaura). Então irei direto ao post.

Enfim, pensei em trazer alguns modelos de blockquote, mas achei melhor ensinar
vocês a criá-los:

1- Abra o bloco de notas e adicione o seguinte código:

blockquote {
border: 3px solid #fee; /* cor da borda */
background: #fcc; /* cor de fundo */
padding: 10px; /* distancia do texto e das bordas*/
font-size: 11px;  /* Tamanho da fonte */
color: #000000;  /* cor da fonte */
text-align: center; /* alinhamento do texto*/
}
blockquote: hover {
border: 3px solid #fcc; /* cor da borda  quando passa o mouse*/
background: #fee; /* cor de fundo quando passa o mouse*/
padding: 10px;  /* distancia do texto e das bordas em hover*/
font-size: 11px;  /* Tamanho da fonte quando passa o mouse*/
color: #000000; /* cor da fonte em hover */
text-align: center; /* alinhamento do texto em hover*/
}

Agora que você já sabe para que serve cada código, altere como quiser.

Se quiser colocar uma imagem no fundo troque:
background: #fcc;
Por:
background: url("Url_Da_Imagem"); 

Se quiser as bordas tracejadas troque o solid por dashed.

Ainda tem outras infinidades de coisas que podem ser adicionadas, quando terminar de editar seu
código, cole ele acima de ]]></:bskin>:

You May Also Like

13 Comentários

  1. vou tentar algo do tipo, porem sempre dar algo errado =(

    beijinhos...

    http://hime-cosplaykawaii.blogspot.com

    ResponderExcluir
  2. Eu também sou a Escrava Isaura daqui de casa, é triste UAHEUHEAUHEUAH'
    Adorei o tuto, agora vou fazer minhas próprias blockquotes *w*
    Beijos ♡ ~
    Garotas Atrevidas ~ retribui a visita? >3<

    ResponderExcluir
    Respostas
    1. kkkk é nois rsrs néhhh

      Fico feliz por ter gostado *uu*

      ~~Kissus

      Excluir
  3. Esse também, seus tutos são bem fáceis de entender, vlw mesmo gaby.

    ResponderExcluir
  4. Eu amei o tuto, simples e pratico rs.
    Tem novidades lá no blog, beijos :*

    ResponderExcluir
  5. Adorei , conseguir usar , mais não deu certo na hora de colocar no meu blog .
    Sou um Horror no HTML :(

    ResponderExcluir
    Respostas
    1. Nossa que pena, é tão simples... Espero que dê uma melhorada linda^^
      ~~Kiss

      Excluir
  6. Vou passar lá fofa <3
    Vivo no seu blog, amo as revistas, acompanho todas as edições^^

    ~~Kissus

    ResponderExcluir
  7. *uuuuuu* que saudades até dos seus tutoriais !
    Um dia desses eu testo esse blockquote em algum layout xD

    E eu estava com supeeeeeeer saudades de você xDDDDDDDDDDDDDDDDDDDDDDDdd
    Beijinhooos *---*

    ResponderExcluir
  8. Ótimo tutorial, vou testá-lo *3*

    pesadelos-e-sonhos.blogspot.com

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença!
Ambos são super importantes para mim.

Kaomojis:
(*´∀`*) (*≧∀≦*) (=´∀`)人(´∀`=) ( ・ ▽ ・)
ヾ(*^▽^*)o, 。・゚゚・(>_<)・゚゚・。 (>ω<;)*(´∀`)ノノ*
(。ゝω・)~♡ ヘ(´∀`ヘ)ヘ (╯°□°)╯•ᴥ• (´・ω・`)