Created
May 20, 2015 13:31
-
-
Save matchaxnb/a2ca6fd61081a63957cf to your computer and use it in GitHub Desktop.
Sticky note (post-it) w/ Compass
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <div class="sticky"> | |
| <div class="sticky-inside"> | |
| <p>My text goes here hey hey hey !<br /> | |
| Whatever you may say</p> | |
| <div class="sticky-bottom"> | |
| </div> | |
| </div><!-- inside --> | |
| </div><!-- sticky --> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $sticky: #fefdca; | |
| $stickydark: #7f7f66; | |
| $sline: rgba(107,190,255, 1); | |
| @mixin stickynote { | |
| @include background-image(linear-gradient( | |
| to bottom, | |
| $sticky, | |
| $sticky 40px, | |
| $sline 41px, | |
| $sline 42px, | |
| $sticky 43px, | |
| $sticky 80px, | |
| $sline 81px, | |
| $sline 82px, | |
| $sticky 83px, | |
| $sticky 120px, | |
| $sline 121px, | |
| $sline 122px, | |
| $sticky 123px, | |
| $sticky 160px, | |
| $sline 161px, | |
| $sline 162px, | |
| $sticky 163px, | |
| $sticky 200px, | |
| $sline 201px, | |
| $sline 202px, | |
| $sticky 203px, | |
| $sticky 240px, | |
| $sline 241px, | |
| $sline 242px, | |
| $sticky 243px, | |
| $sticky 280px, | |
| $sline 281px, | |
| $sline 282px, | |
| $sticky 283px, | |
| $sticky 320px, | |
| $sline 321px, | |
| $sline 322px, | |
| $sticky 323px, | |
| $sticky 360px, | |
| $sline 361px, | |
| $sline 362px, | |
| $sticky 363px, | |
| $sticky 400px, | |
| $sline 401px, | |
| $sline 402px, | |
| $sticky 403px, | |
| $sticky 440px, | |
| $sline 441px, | |
| $sline 442px, | |
| $sticky 443px, | |
| $sticky 480px, | |
| $sline 481px, | |
| $sline 482px, | |
| $sticky 483px, | |
| $sticky 100% | |
| )); | |
| @include box-shadow(0 30px 30px rgba(0,0,0,0.6)); | |
| } | |
| .sticky { | |
| width:320px; | |
| height:320px; | |
| @include stickynote; | |
| .sticky-inside { | |
| position:relative; | |
| p { | |
| padding:0.5em; | |
| padding-top: 1.5em; | |
| font-size:25pt; | |
| line-height: 1.2em; | |
| font-family: 'Indie Flower', cursive; | |
| color:#333; | |
| } | |
| .sticky-bottom { | |
| height:37px; | |
| width:37px; | |
| right:0px; | |
| bottom:0px; | |
| position:absolute; | |
| z-index:2; | |
| background-color: rgba(0,0,0,0.3); | |
| @include background-image(linear-gradient(135deg, $stickydark, | |
| $stickydark 50%, $sticky 70%, $sticky 88%, white 88%, white 100%)); | |
| @include box-shadow(-6px -8px 10px 0px rgba(50, 50, 50, 0.25)); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment