Textarea 1 (Tutorial CSS)

Ahora nos movemos al territorio del textarea, en una entrada pasada expliqué en qué consiste (para ver la entrada haz click

aquíTutorial Textarea HTML

).

Le he estado tomando un poco el ritmo a esto del CSS, y esta vez no me demoré ni tramité tanto para hacer el textarea, espero seguir así y mejor :'D

Nuevamente y como será costumbre, alojé los códigos en CodePen. El resultado será el siguiente:

See the Pen Textarea 1 by ChuckAileron (@ChuckAileron) on CodePen.

Si lo vas a usar en tu blog o usarás el tutorial, por favor deja los créditos correspondientes.

Para tener este tipo de textarea en tu blog deberás ir a Diseño → Edición de HTML, ahora presiona Ctrl + F y aparecerá un buscador de palabras. Busca lo siguiente textarea { y reemplaza todo su código CSS con lo siguiente (haz click en el cuadro):

textarea{ width: 250px; color: white; font-family: "Consolas"; margin-left:20px; padding: 10px 10px 10px 10px; line-height:1.6; position: relative; font-size:14px; text-align: left; color: white; text-shadow: 2px 1px 2px rgba(255, 255, 255, 0.5); background: white; opacity: 0.8; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-transition: all 0.7s ease; transition: all 0.7s ease; } textarea:focus{ background: black; color: white; opacity: 1; border-left:10px solid #0069D3; /* color del borde de la izquierda */ -webkit-box-shadow: 5px 5px 2px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 5px 5px 2px 0px rgba(50, 50, 50, 0.75); box-shadow: 5px 5px 2px 0px rgba(50, 50, 50, 0.75); }

Y ya está :D En el preview lo dejé de azul pero en el blog de rojo y tal vez se pregunten: "¿Por qué chucha lo puso dos veces?". Bueno, es que en el preview como tiene fondo de color, se nota más la opacidad del textarea, es solo eso :B. En el CSS puse en comentarios la parte que puedes editar para personalizar el color del borde. Ojalá sea de su agrado, ya que de por si a mí me gusta hacer esto por mera diversión, pero si a alguien le sirve pues, bienvenido sea (pero da los créditos, no seas basura :v).

~Recuerda dar los créditos correspondientes si usarás el código o pondrás el tutorial en tu blog o web~