daily pastebin goal
31%
SHARE
TWEET

HTML5 Sticky Notes App CSS

a guest Jul 24th, 2013 503 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2.  
  3. body {
  4.         background-color: #dbdbdb;
  5.         font-size: 100%;
  6. }
  7.  
  8. form input#note_content {
  9.         width: 350px;
  10. }
  11.  
  12. /* sticky note */
  13.  
  14. ul#stickies li {
  15.         display: block;
  16.         list-style: none;
  17.         z-index: 1;
  18.         float: left;
  19.         margin: 30px;
  20.         padding: 15px 15px 50px 15px;
  21.         width: 200px;
  22.         height: 200px;
  23.         border: 1px solid #bfbfbf;
  24.     background-color: LightGoldenRodYellow;  /* use #fafad2 if name doesn't work */
  25.         color: black;
  26.         text-decoration: none;
  27.         -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  28.         -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  29.         -o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  30.         box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
  31.         -webkit-transition: all 0.5s ease-in;
  32.         -moz-transition: all 0.5s ease-in;
  33.         -o-transition: all 0.5s ease-in;
  34.         -ms-transition: all 0.5s ease-in;
  35.         transition: all 0.5s ease-in;
  36.         overflow: hidden;
  37. }
  38.  
  39. ul#stickies li span.sticky {
  40.         font-family: Verdana, Helvetica, sans-serif;
  41.         font-size: 200%;
  42. }
  43.  
  44. /*
  45.  * rotation
  46.  */
  47. ul#stickies li:nth-child(even) {
  48.         -webkit-transform: rotate(2deg);
  49.         -moz-transform: rotate(2deg);
  50.         -o-transform: rotate(2deg);
  51.         -ms-transform: rotate(2deg);
  52.         transform: rotate(2deg);
  53. }
  54.  
  55. ul#stickies li:nth-child(odd) {
  56.         -webkit-transform: rotate(-1deg);
  57.         -moz-transform: rotate(-1deg);
  58.         -o-transform: rotate(-1deg);
  59.         -ms-transform: rotate(-1deg);
  60.         transform: rotate(-1deg);
  61. }
  62.  
  63. ul#stickies li:nth-child(3n) {
  64.         -webkit-transform: rotate(1deg);
  65.         -moz-transform: rotate(1deg);
  66.         -o-transform: rotate(1deg);
  67.         -ms-transform: rotate(1deg);
  68.         transform: rotate(1deg);
  69. }
  70.  
  71. /*
  72.    Transform demo
  73.    Uses the transition (defined above) to ease in.
  74. */
  75. ul#stickies li:hover {
  76.         -webkit-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4);
  77.         -moz-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4);
  78.         -o-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.4);
  79.         -webkit-transform: rotate(0deg) scale(1.25);
  80.         -moz-transform: rotate(0deg) scale(1.25);
  81.         -o-transform: rotate(0deg) scale(1.25);
  82.         -ms-transform: rotate(0deg) scale(1.25);
  83.         transform: rotate(0deg) scale(1.25);
  84.         z-index: 10;
  85. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top