Pesquisando, encontrei,
bem explicado,
e ,
postando estou,
para que possa eu ,
sempre ter bem perto ,
e todos vocês que aqui vierem
excelente
matéria
de
Jaqueline,
um amor de pessoa,
e penso que todos deveriam conhecer o
blog dela,
que tem diversas matérias,
bem didáticas.
Portanto, antes de mais nada,
fonte e créditos , do presente post, em homenagem a Jaqueline, e seu:
customize-sua-propria-caixa-de-texto.htmlCustomize sua própria caixa de texto
Primeiro vocês devem entender o <textarea>. Este é o html que permite inserir textos e códigos html sem que eles sejam modificados pela codificação do seu Blogger. Desta forma, tudo o que vocês escreverem entre <textarea> ficará exatamente do jeito que vocês colocarem. Vejamos a codificação simples de uma caixa de texto:
<textarea rows="2" cols="20"> SEU TEXTO AQUI </textarea>
A caixa de texto ficará assim:
"Muito fácil não é mesmo? Agora vamos continuar analisando o código que eu passei acima. Notem que rows, determina a altura de sua caixinha e cols, determina a largura. Desta forma, vocês podem deixar a sua caixinha com a largura e a altura que preferirem e se o texto contido dentro dela ultrapassar o espaço, aparecerão barras de rolagem para que seus leitores possam copiar tudo o que está lá dentro sem problemas. Até agora nada de mais, então vamos aprender a dar cores para o fundo, a borda e o texto.
Para isso vocês devem aplicar a variável " style".
Para isso vocês devem aplicar a variável " style".
Tudo o que vier após o style dará forma à sua caixinha. Vejamos algumas definições:
Vejam o código de uma caixinha de texto de fundo azul, borda vermelha e texto azul escuro:
- Cor do fundo: você utilizará o background-color
- Cor da linha: você utilizará o border
- Cor do texto: você utilizará color
- Engrossar a borda: utilize a pontuação em pixel antes de definir a cor no border
Vejam o código de uma caixinha de texto de fundo azul, borda vermelha e texto azul escuro:
<textarea rows="2" cols="20" style="border: 5px solid rgb(255, 0, 0); background-color: rgb(248, 248, 255); color: rgb(0, 0, 128);"> SEU TEXTO AQUI </textarea>
Notem que após o style, devemos colocar um sinal de igual e abrir aspas. As definições que vierem dentro do " style" ficarão separadas por ponto e vírgula. A borda está definida em 5px solid, sendo que o 5 vocês podem trocar por outro número qualquer e, as cores estão em Java Script e são representadas por rgb(definição da cor) mas, se vocês quiserem colocar as cores também em html não há problemas. O código ficaria assim:
<textarea rows="2" cols="20" style="border: 5px solid #FF0000; background-color: #F8F8FF; color:#000080;"> SEU TEXTO AQUI </textarea>
O resultado continuará sendo o mesmo. Para verem as cores que podem ser aplicadas, visitem esta Tabela de Cores que considero bem completa. Agora, uma prova final para que não tenham dúvidas com relação a barra de rolagem:
"Prontinho! Este é o código banner do Super DicaSSS, vejam que apareceu a barra de rolagem. Vamos customizar? Agora vocês podem ter sua caixinha de texto nas cores e tamanhos que preferirem."
0 comentários:
Postar um comentário
Mensagem do formulário de comentário: