Dandole estilo a las textarea

0

Posteado en ,

Las textareas normales son algo "frias" por no decir que no tienen nada de color y se ven mal, cuando hago los tutoriales relacionados con codigos html y tengo que usar textareas usaba el tipico textarea blanco y con fondo blanco como este de abajo

Pero bueno el caso es que agregue un par de codigos en el css y le di un estilo mejor.
para los que lo quieran simplemente deben pegar los siguientes codigos antes de ]]></b:skin>



aqui van los codigos:
Codigo 1:

.textareaestilo1 {width:300px;height:100px;background:url("http://lh3.ggpht.com/_nubSpqDFl2Y/StdYJ-wQ1kI/AAAAAAAAA9c/0cRqOHpKCZQ/s640/textura_pasarlascanutas_2573.jpg") repeat-y;}
Resultado 1:

Codigo 2:Añadir imagen
.textareaestilo2 {font-size: 14pt;font-weight: bold;letter-spacing: 5px;
background:url("http://lh5.ggpht.com/_nubSpqDFl2Y/StdYy7tChQI/AAAAAAAAA9g/H6gw8thI500/madera10.jpg") repeat-y ;}
Resultado 2:
Texta area con estilo
Codigo 3:

textareaestilo3 {font-size: 13pt;font-weight: bold;letter-spacing: 5px;
background:url("http://img225.imageshack.us/img225/7308/papel20arrugadokm8.jpg");}
Resultado 3:
Text area de papel
Codigo 4:

.textareaestilo4 {font-size: 12pt;font-weight:letter-spacing: 5px;
background:url("http://2.bp.blogspot.com/_nubSpqDFl2Y/Stdbt1bJGAI/AAAAAAAAA90/q4_-UOSq1Js/s400/agua-burbujas.jpg");}
Resultado 4:


Codigo 5:

.textareaestilo5 {font-size: 12pt;font-weight:letter-spacing: 5px;
background:url("http://4.bp.blogspot.com/_nubSpqDFl2Y/Stdd9d-BGaI/AAAAAAAAA-E/cuGdY0a4Zrg/s1600-h/brown-paper-1-th.jpg");}
Resultado 5:


Codigo 6:
.textareaestilo6 {font-size: 12pt;
background:url("http://img142.imageshack.us/img142/1904/spiral13bk.gif"); color: #FFFFFF;"}
Resultado 6:

Y ya esta?
si, despues de que añadimos que codigo que queremos antes de ]]></b:skin>
procedemos a hacer uso de ellos de la siguiente manera, cuando hacemos la textarea le añadimos una clase con el nombre de el codigo antes de el punto y obtenemos el estilo que le dimos por ejemplo:
para hacer el primer estilo tendriamos que añadir
<textarea class="textareaestilo1">Aqui va el texto</textarea>

0 comentarios:
Publicar un comentario

No dudes en dar tu opinion ni en preguntar, recuerda suscribirte a mi Feed