Textareas básicos
Textarea básico
<textarea>Seu conteúdo aqui</textarea>
Largura da textarea
<textarea style="width:300px;"></textarea>
Altura da textarea
<textarea style="width:300px;height:150px;"></textarea>
Textarea básico com scrool vertical
<textarea cols="20" rows="5"wrap="hard">Seu conteúdo aqui</textarea>
Textarea básico com scrool horizontal
<textarea cols="20" rows="5"wrap="off">Seu conteúdo aqui</textarea>
Textárea básico scrool vertical com fundo cinza
<textarea cols="20" rows="5"wrap="hard"disabled="yes">Seu conteúdo aqui</textarea>
Textareas coloridas e com bordas
<textarea style="background:#000;width:200px;height:50px;"></textarea>
<textarea style="background:#000;width:200px;height:50px;border:0px;"></textarea>
<textarea style="background:#000;width:200px;height:50px;border-radius:15px;"></textarea>
<textarea style="background:#000;width:200px;height:50px;border: 3px solid #ff00ff;border-radius:10px;"></textarea>
<textarea style="background:#000;width:200px;height:50px;border: 3px dotted #ff00ff;border-radius:10px;"></textarea>
Textareas com efeito e fonte
1- Esse textarea tem letras em formato diferente e na cor branca.
<style>
.estilotextarea1 {background:#000;width:200px;height:50px;color:#fff;font-family: Garamond,verdana;font-size: 12pt;font-weight: bold;letter-spacing: 5px;border-radius:10px;}
</style>
<textarea class="estilotextarea1">Seu conteúdo aqui</textarea>
2- Esse textarea, também tem letras em formato diferente e na cor vermelha e com efeito ao clicar.
<style>
.estilotextarea2 {background:#000;width:200px;height:50px;color:#fff;font-family: Garamond,verdana;font-size: 12pt;font-weight: bold;letter-spacing: 5px;border-radius:10px;}
</style>
<textarea class="estilotextarea2"style="color: red;"cols="50" onclick="this.value='copie e cole este efeito que vc acobou de ver em sua página html'"onmouseout="this.value='Clique'" rows="5">Clique</textarea>
3- Esse textarea, tem borda picotada e fonte no formato diferente.
<style>
.estilotextarea3 {background:#000;width:200px;height:50px;color:#ff00ff;font-family: Garamond,verdana;font-size: 12pt;font-weight: bold;letter-spacing: 5px;border: 3px dotted #ff00ff;border-radius:10px;}
</style>
<textarea class="estilotextarea3">Seu conteúdo aqui</textarea>
4- Esse textarea, tem borda sólida e fonte no formato diferente na cor vermelha e com efeito onclick.
<style>
.estilotextarea4 {background:#000;width:200px;height:50px;color:#ff00ff;font-family: Garamond,verdana;font-size: 12pt;font-weight: bold;letter-spacing: 5px;border: 3px solid #ff00ff;border-radius:10px;}
</style>
<textarea class="estilotextarea4"style="color: red;"cols="50" onclick="this.value='copie e cole este efeito que vc acobou de ver em sua página html'"onmouseout="this.value='Clique'" rows="5">Clique</textarea>
5- Esse textarea, tem borda picotada branca e fonte no formato diferente na cor vermelha e com efeito Onclick.
<style>
.estilotextarea5 {background:#000;width:200px;height:50px;color:#ff00ff;font-family: Garamond,verdana;font-size: 12pt;font-weight: bold;letter-spacing: 5px;border: 3px dotted #fff;border-radius:10px;}
</style>
<textarea class="estilotextarea5"style="color: red;"cols="50" onclick="this.value='copie e cole este efeito que vc acobou de ver em sua página html'"onmouseout="this.value='Clique'" rows="5">Clique</textarea>
6- Outset
<textarea style="background:#ACFA58;width:200px;height:50px;border: 3px outset #86B404;border-radius:10px;"></textarea>
7- Inset
<textarea style="background:#ACFA58;width:200px;height:50px;border: 3px inset #86B404;border-radius:10px;"></textarea>
8- Ridge
<textarea style="background:#ACFA58;width:200px;height:50px;border: 3px ridge #86B404;border-radius:10px;"></textarea>
textarea=É a marcação do campo onde escreve (expansível).Textarea básico
<textarea>Seu conteúdo aqui</textarea>
Largura da textarea
<textarea style="width:300px;"></textarea>
Altura da textarea
<textarea style="width:300px;height:150px;"></textarea>
Textarea básico com scrool vertical
<textarea cols="20" rows="5"wrap="hard">Seu conteúdo aqui</textarea>
Textarea básico com scrool horizontal
<textarea cols="20" rows="5"wrap="off">Seu conteúdo aqui</textarea>
Textárea básico scrool vertical com fundo cinza
<textarea cols="20" rows="5"wrap="hard"disabled="yes">Seu conteúdo aqui</textarea>
Textareas coloridas e com bordas
<textarea style="background:#000;width:200px;height:50px;"></textarea>
<textarea style="background:#000;width:200px;height:50px;border:0px;"></textarea>
<textarea style="background:#000;width:200px;height:50px;border-radius:15px;"></textarea>
<textarea style="background:#000;width:200px;height:50px;border: 3px solid #ff00ff;border-radius:10px;"></textarea>
<textarea style="background:#000;width:200px;height:50px;border: 3px dotted #ff00ff;border-radius:10px;"></textarea>
Textareas com efeito e fonte
1- Esse textarea tem letras em formato diferente e na cor branca.
<style>
.estilotextarea1 {background:#000;width:200px;height:50px;color:#fff;font-family: Garamond,verdana;font-size: 12pt;font-weight: bold;letter-spacing: 5px;border-radius:10px;}
</style>
<textarea class="estilotextarea1">Seu conteúdo aqui</textarea>
2- Esse textarea, também tem letras em formato diferente e na cor vermelha e com efeito ao clicar.
<style>
.estilotextarea2 {background:#000;width:200px;height:50px;color:#fff;font-family: Garamond,verdana;font-size: 12pt;font-weight: bold;letter-spacing: 5px;border-radius:10px;}
</style>
<textarea class="estilotextarea2"style="color: red;"cols="50" onclick="this.value='copie e cole este efeito que vc acobou de ver em sua página html'"onmouseout="this.value='Clique'" rows="5">Clique</textarea>
3- Esse textarea, tem borda picotada e fonte no formato diferente.
<style>
.estilotextarea3 {background:#000;width:200px;height:50px;color:#ff00ff;font-family: Garamond,verdana;font-size: 12pt;font-weight: bold;letter-spacing: 5px;border: 3px dotted #ff00ff;border-radius:10px;}
</style>
<textarea class="estilotextarea3">Seu conteúdo aqui</textarea>
4- Esse textarea, tem borda sólida e fonte no formato diferente na cor vermelha e com efeito onclick.
<style>
.estilotextarea4 {background:#000;width:200px;height:50px;color:#ff00ff;font-family: Garamond,verdana;font-size: 12pt;font-weight: bold;letter-spacing: 5px;border: 3px solid #ff00ff;border-radius:10px;}
</style>
<textarea class="estilotextarea4"style="color: red;"cols="50" onclick="this.value='copie e cole este efeito que vc acobou de ver em sua página html'"onmouseout="this.value='Clique'" rows="5">Clique</textarea>
5- Esse textarea, tem borda picotada branca e fonte no formato diferente na cor vermelha e com efeito Onclick.
<style>
.estilotextarea5 {background:#000;width:200px;height:50px;color:#ff00ff;font-family: Garamond,verdana;font-size: 12pt;font-weight: bold;letter-spacing: 5px;border: 3px dotted #fff;border-radius:10px;}
</style>
<textarea class="estilotextarea5"style="color: red;"cols="50" onclick="this.value='copie e cole este efeito que vc acobou de ver em sua página html'"onmouseout="this.value='Clique'" rows="5">Clique</textarea>
6- Outset
<textarea style="background:#ACFA58;width:200px;height:50px;border: 3px outset #86B404;border-radius:10px;"></textarea>
7- Inset
<textarea style="background:#ACFA58;width:200px;height:50px;border: 3px inset #86B404;border-radius:10px;"></textarea>
8- Ridge
<textarea style="background:#ACFA58;width:200px;height:50px;border: 3px ridge #86B404;border-radius:10px;"></textarea>
9- Groove
<textarea style="background:#ACFA58;width:200px;height:50px;border: 3px groove #86B404;border-radius:10px;"></textarea>
10- Double
<textarea style="background:#ACFA58;width:200px;height:50px;border: 3px double #86B404;border-radius:10px;"></textarea>
11- Dashed
<textarea style="background:#ACFA58;width:200px;height:50px;border: 3px dashed #86B404;border-radius:10px;"></textarea>
Entenda melhor
onfocus= Ele focaliza o conteúdo para você copiar sem selecionar.
background=É a cor de fundo do campo onde escreve.
border-radius:10px=São as bordas arredondadas
border 3px dashed #ccc=São as bordas pontilhadas.
color: transparent=É a cor da letra que fica dentro do campo.
font-family: georgia=É o formato da letra.
font-size:15px= É o tamanho da letra.
height: 118px=É a altura do campo onde escreve.
width: 199px=É a largura do campo onde escreve.
onmouseover=Serve quando o cursor navegar em cima do objeto, seleciona o conteúdo ou faz o efeito sem clicar.
Textarea em foco
<textarea onfocus="this.select()" onmouseover="this.focus()" style="background-color: #5e610b; border-radius: 10px; border: 3px dashed #ccc;color: transparent; font-family: georgia; font-size: 15px; height: 118px; width: 199px;">Seu conteúdo aqui</textarea>
Textarea com imagem de fundo
<textarea onfocus="this.select()" onmouseover="this.focus()" style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKebvyC1SUc0OQK67gaJrB83nhXxPdwxJ2FWwtJBrEmZyX6iiPHZotcqSsf_o7ReGRsGuAFzWcpvCFBx22kSeWtLHWd004P7ZkOBP_rnnW33GnbNO5Tk1jCOB_425uXb2kaJ6tc4BETd8/s1600/comment1.png); border-radius: 10px; border: 3px dashed #4B610B; color: transparent; font-family: georgia; font-size: 15px; height: 118px; repeat: none; width: 199px;">Seu conteúdo aqui</textarea>
Textarea com efeito onclick
<style>
.estiloimagem {background:#000;width:199px;height:118px;color:#fff;font-family: Garamond,verdana;font-size: 12pt;font-weight: bold;letter-spacing: 5px;border-radius:10px;}
</style>
<textarea style="background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKebvyC1SUc0OQK67gaJrB83nhXxPdwxJ2FWwtJBrEmZyX6iiPHZotcqSsf_o7ReGRsGuAFzWcpvCFBx22kSeWtLHWd004P7ZkOBP_rnnW33GnbNO5Tk1jCOB_425uXb2kaJ6tc4BETd8/s1600/comment1.png"class="estiloimagem"style="color: red;"cols="50" onclick="this.value='copie e cole este efeito que vc acobou de ver em sua página html'"onmouseout="this.value='Clique'" rows="5">Clique</textarea>
Textarea com imagem e janela Pop pup
Textarea com imagem e janela Pop pup
Textarea redondo sem imagem com onfocus com efeito hover e fonte simples
Textarea redondo sem imagem com onfocus com efeito hover e fonte Indie
Textarea redondo sem imagem com onfocus com efeito hover e fonte Indie duas cores
Textarea redondo sem imagem com onfocus com efeito hover e fonte Indie colorido
Textarea com duas imagens
Textarea com efeito hover ampliar
Após copiar o código, Dê Ctrl + F e localize o (testarea) e substitua para (textarea) com X, foi colocado dessa forma para não dar conflito.
O maior Colorir textarea Simples
O maior Colorir fonte simples
Um comentário:
Tem como colocar esses modelos redondos no formulário ? ;)
Postar um comentário