A. Poner una imagen de fondo o color en la textarea.
<textarea name="textarea" rows="6" cols="19" style="background-image:url(URL DE LA IMAGEN);background-repeat: repeat">TEXTO A TU ELECCIÓN</textarea>
<textarea name="textarea" rows="6" cols="19" style="background-color: #COLOR DEL FONDO;">TEXTO A TU ELECCIÓN</textarea>
B. Cambiar el color de el texto.
Ejemplo
[Codigo + Resultado]
<textarea name="textarea" rows="6" cols="19" style="background-color: #COLOR DEL FONDO; color: #COLOR DEL TEXTO">TEXTO A TU ELECCIÓN</textarea>
<textarea name="textarea" rows="6" cols="19" style="background-image:url(URL DE LA IMAGEN);background-repeat: repeat; color: #COLOR DEL TEXTO">TEXTO A TU ELECCIÓN</textarea>
C. Aplicar estilos mas complejos.
La base para aplicar un estilo es esta
<textarea class=estilotextarea>TEXTO A TU ELECCIÓN</textarea>
Pero no tan rápido e.é, aun no tenemos definido un estilo de textarea así que en pocas palabras tendremos que ir a Plantilla>Editar HTML y daremos clic sobre el área de todo el HTML de nuestro blog y ejecutaremos el comando Ctrl+f saldrá un recuadro en la parte superior derecha en el que pondremos ]]></b:skin> y finalmente daremos en nuestro teclado Enter
Arriba de ]]></b:skin> pondremos lo siguiente
Arriba de ]]></b:skin> pondremos lo siguiente
.estilotextarea {width:400px;height:100px; /*ANCHO Y ALTO*/ border-top: 2px solid #000000; /*BORDE DE ARRIBA*/ border-right: 2px dotted #000000; /*BORDE DERECHO*/ border-bottom: 2px double #000000; /*BORDE DE ABAJO*/ border-left: 2px dashed #000000; /*BORDE DE LA IZQUIERDA*/ border-radius: 5px; /*BORDES REDONDEADOS*/ background-color:#ffffff; /*COLOR DEL FONDO*/}
Lo que se encuentra en morado, es lo que pueden editar a su gusto.
Cuando acaben de editar, para terminar de "instalar" el estilo le dan clic en Guardar plantilla
Les recuerdo que pueden tener varios estilos de textarea pero tendrán que cambiar el nombre, quiero decir, si ya tienes un estilo llamado .estilotextarea al otro no le podras poner ese mismo nombre.
Cuando acaben de editar, para terminar de "instalar" el estilo le dan clic en Guardar plantilla
Les recuerdo que pueden tener varios estilos de textarea pero tendrán que cambiar el nombre, quiero decir, si ya tienes un estilo llamado .estilotextarea al otro no le podras poner ese mismo nombre.
D. Ponerle un efecto/hover
E. Otros efectos.
Textarea transparente: El color del fondo dependerá del fondo de la pagina. Tienes que remplazar la linea background-color: #ffffff; del código anterior, por la siguiente:
F. ¿Como se ponen?
Para las que no sepan que es un hover, citare la definición
wikipedia:
El efecto Hover consiste en
la alteración del aspecto de un elemento de la interfaz gráfica cuando se sitúa
el puntero sobre el mismo, pero no se ha seleccionado aun.
Para una mejor
comprensión y como mejor se los puedo explicar yo, simplemente pasa el mouse por
las blockquotes que has visto en esta lección (y que seguramente ya has notado)
y veras como en ellos aparece una sombra. Pues lo mismo puedes hacer para tu
textarea con el código a continuación!! :D
Para esto simplemente tienes que copiar el código siguiente y editar lo que se encuentra en morado ^^
.estilotextarea {width:400px;height:100px; /*ANCHO Y ALTO*/ border-top: 2px solid #000000; /*BORDE DE ARRIBA*/ border-right: 2px dotted #000000; /*BORDE DERECHO*/ border-bottom: 2px double #000000; /*BORDE DE ABAJO*/ border-left: 2px dashed #000000; /*BORDE DE LA IZQUIERDO*/ border-radius: 5px; /*BORDES REDONDEADOS*/ background-color:#ffffff; /*COLOR DEL FONDO*/} .estilotextarea:hover{ border-top: 4px solid #000000; /*BORDE DE ARRIBA*/ border-right: 4px dotted #000000; /*BORDE DERECHO*/ border-bottom: 4px double #000000; /*BORDE DE ABAJO*/ border-left: 4px dashed #000000; /*BORDE DE LA IZQUIERDA*/ border-radius: 8px; /*BORDES REDONDEADOS*/ background-color:#ffffff; /*COLOR DEL FONDO*/ -webkit-transition: 1.0s; -moz-transition: 1.0s; -webkit-box-shadow: 0px 0px 8px #000000; /*COLOR DE SOMBRA*/ -moz-box-shadow: 0px 0px 8px #000000; /*COLOR DE SOMBRA*/ box-shadow: 0px 0px 8px #000000; /*COLOR DE SOMBRA*/}
Textarea transparente: El color del fondo dependerá del fondo de la pagina. Tienes que remplazar la linea background-color: #ffffff; del código anterior, por la siguiente:
background-color: transparent;Textarea con fuente predeterminada: El texto que escribas en la textarea tendra una fuente diferente. Solo agrega el siguiente codigo:
font-family: NOMBRE DE LA FUENTE;font-size: 0pt;font-weight: bold;letter-spacing: 5px;
Edita
F. ¿Como se ponen?
¿Recuerdas la base que te di al principio? Si no, aqui te la pongo nuevamente ^^
<textarea class=estilotextarea>TEXTO A TU ELECCIÓN</textarea>
Es muy simple, solo tienes que poner el nombre que le hayas colocado al textarea (o remplazar lo que se encuentra remarcado). En este caso el nombre que le pusimos al textarea es el mismo que se encuentra en el ejemplo por lo que no es necesario cambiar nada y ya puedes estrenar tu textarea :D, pero, si por ejemplo tu le cambiaste el nombre a .Textareakawaii lo único que tendrías que hacer es remplazar, quedando así:
<textarea class=Textareakawaii>TEXTO A TU ELECCIÓN</textarea>
Con ese mismo metodo de cambiar nombres a las textareas puedes tener muchas y no siempre que todas sean iguales :D Solo recuerda cambiar el nombre ^^
Les recuerdo (y es algo que ya hemos visto en la parte 1) puedes añadir las propiedades "rows" y "cols", así como la selección automática, botón de selección , etc. Supongo que ya saben, cualquier duda sobre eso, edito ^^
Puuuff.........Eso fue largo xD pero en fin, hemos terminado!! Ya saben cualquier duda me la dejan en los comentarios y tratare de responderla lo antes posible<3.
Espero que esto les halla sido de ayuda y nos vemos en la próxima entrada, besos!! <3
Puuuff.........Eso fue largo xD pero en fin, hemos terminado!! Ya saben cualquier duda me la dejan en los comentarios y tratare de responderla lo antes posible<3.
Espero que esto les halla sido de ayuda y nos vemos en la próxima entrada, besos!! <3
No hay comentarios.:
Publicar un comentario