Caixa para códigos HTML - "textarea" para os íntimos - coloridas e legais!

Também quebrei a maior cabeça procurando, achei, mastiguei e tá aí pra vocês, macacada!

Os manjadores colocam aquelas textarea - que são aquelas áreas de texto livre na postagem, geralmente usadas para postar códigos HTML sem que haja erros - coloridas maneiras nas postagens com códigos, mas eu nunca parei pra me perguntar como funciona esse tipo de paranauê. Como faz?
O método é simples:

1. Durante sua postagem, mude para o modo HTML da sua área de postagem. Não adianta, não funciona no modo 'escrever'!

2. Escolha o seu estilo favorito, copie o código e poste no local indicado -  TYPE YOUR TEXT AREA IN HERE - o seu texto ou código.

Ocean Blue text area

<textarea name="code" rows="2" cols="50" style="background: #EFF5FB; color: #000; border: 1px solid #ccc; border-left: 20px solid #0174DF; line-height: 1.5em; padding: 5px; -moz-border-radius: 7px;"> TYPE YOUR TEXT AREA IN HERE </textarea>


Sirius Black Text area

<textarea name="code" rows="3" cols="42" style="background: #000; color: #fff; border: 2px inset #ccc; line-height: 1.5em; padding: 0 7px; -moz-border-radius: 5px;"> TYPE YOUR TEXT AREA IN HERE </textarea>


Candy Text area

<textarea name="code" rows="2" cols="40" style="background:#E0ECF8; color:#FF0000; border-bottom: 4px solid #FE2E2E; border-right: 4px solid #01DF01; border-top: 4px solid #01DF01; border-left: 4px solid #FE2E2E; line-height:1.5em; padding:5px; -moz-border-radius:10px;"> TYPE YOUR TEXT AREA IN HERE </textarea>


Dark Pinky Text area

<textarea name="code" rows="2" cols="42" style="background: #F8ECE0; color: #848484; border: 2px ridge #7F4500; line-height: 1.5em; padding: 5px; -moz-border-radius-topleft: 15px; -moz-border-radius-bottomright: 15px;"> TYPE YOUR TEXT AREA IN HERE </textarea>


Fresh Purple Text area

<textarea name="code" rows="2" cols="42" style="background:#AC58FA; color:#fff; border:3px double #ffaf; line-height:1.5em; padding:5px;"> TYPE YOUR TEXT AREA IN HERE </textarea>


Green Lines text area

<textarea name="code" rows="2" cols="42" style="background:#A9F5A9; color:#295F00; border:2px #295F00 dashed; line-height:1.5em; padding:5px;"> TYPE YOUR TEXT AREA IN HERE </textarea>


Orange Dark Text area

<textarea name="code" rows="2" cols="42" style="background: #FAAC58; color: #FFEFF9; border: 3px dotted #FFEFF9; line-height: 1.5em; padding: 5px;"> TYPE YOUR TEXT AREA IN HERE </textarea>

• Copie os códigos

3. Pronto!
O legal é que você pode customizar tudo, desde os tamanhos - "rows" para linhas, "cols" para colunas, "padding" para espaços, "border" para estilo de linha e "line-height" para a espessura da mesma  - às cores.

Para conseguir o código hexadecimal da cor que você quer, copie no campo HEX nesta color wheel da Adobe antecipado pelo caractere '#' e faça o seu próprio Frankenstein!

Apenas tome cuidado em verificar se o seu código vai sair todo certinho no post. Por hoje é só, macadada. ☺


Texto e códigos originalmente publicados pelo site all-blogger-tools.blogspot.com.br

• Tweet
• Share
• Share
• Share
• Share

DisseIzabela Wilson

Graduada em Design Gráfico, ilustradora, artefinalista, colorista digital e curiosa de plantão. Apaixonada por qualquer coisa a respeito de animação e arte, tradicional ou digital.

Related Post

• O conta-gotas do Photoshop pega a cor do fundo. E agora? Rapaz, essa me deixou de cabelo branco por uns dois dias. Quem me conhece sabe que sou coloris
• Imagem com link para assinatura no Mozilla Thunderbird Sim! É possível inserir sua assinatura personalizada com logo e link incorporado no Mozilla
• Tutorial: Como ter uma shoutbox no meu bloguim?Fácil! Algumas pessoas me perguntaram como conseguir uma shoutbox como essa aí na barra lateral, qu
• Botões flutuantes sem mexer no HTML do blog? Sim, isso existe! Ei, macacada! =D Esse post é a continuação do anterior que fala sobre os Botões de Compartilhame