#notes {
	width: 400px;
	background-image: url('noteTop.png');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position-x: center;
	background-position-y: 0;
}	

#notes_content{
	display: block;
	width: 340px;
	min-height: 100px;
	background: none;
	border:none;
	background-image: url('noteBottom.png');
	background-repeat: no-repeat;
	background-size: 100% auto;
	background-position-x: center;
	background-position-y: 100%;
	padding: 30px;
	outline: 0;
	overflow: hidden;
	
	-webkit-transition: height 0.5s ease-out;  /* Saf3.2+, Chrome */
	-moz-transition: height 0.5s ease-out;  /* FF4+ */
	-ms-transition: height 0.5s ease-out;  /* IE10? */
	-o-transition: height 0.5s ease-out;  /* Opera 10.5+ */
	transition: height 0.5s ease-out;	
}


#notes_content_hidden{
	display: block;
	width: 440px;
	min-height: 100px;
	background: none;
	padding: 30px;
	outline: 0;
	visibility: hidden;
	position: fixed;
}

CSS for a blog post on creating styled mobile textareas

CSS for textarea post

CSS