Posted By

tpryan on 01/10/12


Tagged


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

danfolt


CSS for textarea post


 / Published in: CSS
 

CSS for a blog post on creating styled mobile textareas

  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  

You need to login to post a comment.