5 de ago. de 2012

Criando caixa de códigos

 Fala aí gente, aqui é o Anon e hoje venho trazer mais um tutorial pra vocês! E no tutorial de hoje irei ensinar a como fazer uma daquelas caixas de código que usamos aqui, porém não é daquele tipo que você tem de usar DIVs, nesta é necessário apenas de uma tag HTML... enfim, vamos la!

Demonstração

 Acima da linha:

]]></b:skin>

 Insira o seguinte código:

caixa{
  width:400px;/*--Largura--*/
  background:#f5f5f5;/*--cor do fundo--*/
  border-top:2px dashed #990000;/*--borda de cima--*/
  border-left:1px solid #ccc;/*--borda esquerda--*/
  border-right:1px solid #ccc;/*--borda direita--*/
  border-bottom:1px solid #ccc;/*--borda de baixo--*/
  border-radius:5px;/*--inclinação das bordas--*/
  color:#000;/*--cor da fonte--*/
  font:13px 'Play';/*--fonte e tamanho--*/
  padding:2px 2px 2px 2px;/*--distância do texto em relação as extremidades--*/
  display:block;
  margin-bottom:5px;
 }

 Eu nomeei como "caixa", mas você pode mudar para o nome que quiser desde que mude o nome na tag.
 Faça as alterações da forma que desejar seguindo as instruções logo à frente de cada propriedade. Agora vamos ao código para se usar na postagem:

<caixa>Texto à aparecer dentro da caixa de códigos</caixa>

Links úteis
Gradient com CSS3