Advanced Search

CSS for textarea post

/ Published in: CSS
Save to your folder(s)
CSS for a blog post on creating styled mobile textareas

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. #notes {
  2. 	width: 400px;
  3. 	background-image: url('noteTop.png');
  4. 	background-repeat: no-repeat;
  5. 	background-size: 100% auto;
  6. 	background-position-x: center;
  7. 	background-position-y: 0;
  8. }	
  9.  
  10. #notes_content{
  11. 	display: block;
  12. 	width: 340px;
  13. 	min-height: 100px;
  14. 	background: none;
  15. 	border:none;
  16. 	background-image: url('noteBottom.png');
  17. 	background-repeat: no-repeat;
  18. 	background-size: 100% auto;
  19. 	background-position-x: center;
  20. 	background-position-y: 100%;
  21. 	padding: 30px;
  22. 	outline: 0;
  23. 	overflow: hidden;
  24.  
  25. 	-webkit-transition: height 0.5s ease-out;  /* Saf3.2+, Chrome */
  26. 	-moz-transition: height 0.5s ease-out;  /* FF4+ */
  27. 	-ms-transition: height 0.5s ease-out;  /* IE10? */
  28. 	-o-transition: height 0.5s ease-out;  /* Opera 10.5+ */
  29. 	transition: height 0.5s ease-out;	
  30. }
  31.  
  32.  
  33. #notes_content_hidden{
  34. 	display: block;
  35. 	width: 440px;
  36. 	min-height: 100px;
  37. 	background: none;
  38. 	padding: 30px;
  39. 	outline: 0;
  40. 	visibility: hidden;
  41. 	position: fixed;
  42. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.