Caixas para Códigos Numeradas

 

Heey Catwalkers.

Trouxe um tutorial, que da minha parte achei super interessante, é aquela caixinha que os blogs de HTML tem, como está:

Exemplo...

Como o código textarea, você não precisa escrever o código normal e depois editá-lo na parte de HTML, você só coloca o seu código dentro das tags <pre> e </pre>.

Para ter o pre, basta adicionar o código no seu CSS:

pre {
  width: 500px; /* Tamanho da largura */
  background:url(http://s7.postimage.org/bzbvruti3/psdtextarea1.jpg); /* Imagem de fundo */
  background-repeat:no-repeat; /* Sem repetição nas linhas - Não altere*/
  color:#787169; /* Cor da fonte */
  display:block; /* Quebra de linhas - Não altere */
  font-size:12px; /* Tamanho da fonte - Não altere*/
  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace; /* Fonte */
  line-height:17px; /* Medida de comprimento das entrelinhas - Não altere*/
  text-align:left; /* Alinhamento (Esquerda) do texto - Não altere*/
  border:#e8dccf solid 1px; /* Borda */
  margin:1em 0; /* Espaço externo - Não altere*/
  padding:0 20px 0 26px; /* Espaço interno - Não altere */
  overflow:auto; /* Elemento escondido com borda de rolagem - Não altere */
}

E pronto. Está tudo explicado no código, se tiver alguma dúvida deixe no comentário... ;)

Beijos, Bea :)

Obs: Eu havia me esquecido de colocar os créditos, encontre-o originalmente aqui. Desculpe-me por isso!