25 de jan de 2013

Criando seu próprio Blockquote

Hey, angels :) What's up?
ATUALIZAÇÃO: caso alguém não saiba, o código de blockquote deve ser adicionado antes da tag 
 ]]></b:skin>.
O tutorial de hoje é bem interessante e útil. Vou ensinar como criar um blockquote Não foi dessa forma que fiz o daqui, mas faço exatamente assim no Mrs. Nightshade. Vamos ao tutorial?

O código base, por onde todos devem começar, é esse aqui:
blockquote {
}
Os demais serão adicionados entre as chaves.
Existem coisas que não podem faltar, como por exemplo:
padding: 6px;
margin:10px;
Color: #333;
Background: #FFF;
Agora, basta personalizar. Como? Aqui vão alguns códigos que vocês podem usar:

PARA COLOCAR BORDAS

border: borda em todos os lados. Para usar, escolha quantos pixels ela deve ter, se será sólida ou pontilhada e a cor. Exemplo: 1px solid #333; 
border-bottom: borda em baixo. Para usar, escolha quantos pixels ela deve ter, se será sólida ou pontilhada e a cor. Exemplo: 1px solid #333; 
border-top: Borda em cima. Para usar, escolha quantos pixels ela deve ter, se será sólida ou pontilhada e a cor. Exemplo: 1px solid #333; 
border-left: Borda na esquerda. Para usar, escolha quantos pixels ela deve ter, se será sólida ou pontilhada e a cor. Exemplo: 1px solid #333; 
border-right: Borda na direita.Para usar, escolha quantos pixels ela deve ter, se será sólida ou pontilhada e a cor. Exemplo: 1px solid #333;

PARA ARREDONDAR BORDAS

-webkit-border-radius: 10px; - Altere o número como desejar.
-moz-border-radius: 10px; - Altere o número como desejar.
border-radius: 10px;  - Altere o número como desejar.

Coloquem os três códigos acima para dar certo, tudo bem?
Lembrete importante: todos os códigos devem ser adicionados entre as chaves, como o dito antes.

EXEMPLO DE RESULTADO

blockquote {
padding: 6px;
margin:10px;
color: #333;
background: #FFF;
border-right: 2px solid #FF69B4;
border-left: 2px solid #FF69B4;
}
 Viram como é simples?
Aprendi com ajuda do We Heart HTML, mas hoje em dia faço sozinha.
Qualquer dúvida é só comentar ou mandar uma pergunta aqui.

Espero que tenham gostado.
Beijos,

Mrs. Nightshade.

10 comentários:

  1. Oi! Amei o tutorial! Eu queria aprender a fazer, mas num outro tutorial eu não entendi. Você explicou muito bem. Vou tentar fazer. Mas, como faz pra ficar hover?
    Beijos!

    ResponderExcluir
    Respostas
    1. Olá! Que bom que gostou >.< Fico muito feliz que tenha achado :D Bom, você pode fazer como nesse tutorial:

      http://birthdaycakeoficial.blogspot.com.br/2012/08/blockquote-em-hover.html

      Acho que dá certo ^.^

      Beijos!

      Excluir
  2. Respostas
    1. Não ^.^ É blockquote, portanto ANTES da tag ]]> .
      Como todos os outros, entende?

      Beijos!

      Excluir
  3. Oi anjo, ótimo tutorial, eu amei estou seguindo, retribui?
    ->http://mackcrazy.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Olá! Que bom que gostou do tutorial :D Fico muito feliz :D Seguindo de volta <3

      Beijos!

      Excluir
  4. Olá! Ameei o tutorial! Esse é para quem gosta de ser criativo e inovador :). Sério, amei demais! Já vou criar um pro JC. Vou deixar os créditos do tutorial na página de Créditos, tá?

    Beijos!!

    ResponderExcluir
    Respostas
    1. Olá! Que bom que gostou >.< É sempre legal fazer coisas únicas, certo? kkk :D Fico muito feliz :D Tudo bem, muito obrigada ^.^

      Beijos!

      Excluir
  5. Olá! Adorei, muito bom mesmo.
    Eu sempre quis saber como você fez o seu blogckquote =D

    ResponderExcluir
    Respostas
    1. Olá! Que bom que gostou >.< Fico muito feliz :D Pois é, foi assim que fiz ^.^

      Beijos!

      Excluir