Pure CSS3 post it note
I've been ill the last couple of days which meant I couldn't really focus on anything too heavy. So with being awake half the night I thought I should just play around CSS3 and it didn't take long till I came up with a pure CSS3 Post-it note made with no images. The only extra library I have used in this demo is Google Fonts for the script text. Code after the note:
1<link href=' http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
2<style>
3p.postit a{
4 color: black;
5 font-family: 'Reenie Beanie', arial, serif;
6 font-size:50px;
7 text-decoration:none;
8 text-shadow: 3px 3px 3px #AAA; }
9
10p.postit {
11 margin:100px auto;
12 text-align:center;
13 width:750px; }
14
15p.postit{
16 border:1px solid yellow;
17 height:300px;
18 line-height:300px;
19 width:400px;
20 background-color: rgba(60, 132, 198, 0.8);
21 background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#FFFAAE), to(#FFF057));
22 background-image: -moz-linear-gradient(#FFFAAE 0%, #FFF057 90%);
23 border-top-color: #FFF057;
24 border-right-color: #FFF057;
25 border-bottom-color: #FFF057;
26 border-left-color: #FFF057;
27 -webkit-box-shadow: #AAA 0px 10px 16px;
28 -moz-box-shadow: #AAA 0px 10px 16px; /* FF 3.5+ */}
29</style>
30<p class="postit">
31<a href="http://www.andyjarrett.com/blog" title="Andy Jarretts Blog">Back soon!</a>
32</p>
2<style>
3p.postit a{
4 color: black;
5 font-family: 'Reenie Beanie', arial, serif;
6 font-size:50px;
7 text-decoration:none;
8 text-shadow: 3px 3px 3px #AAA; }
9
10p.postit {
11 margin:100px auto;
12 text-align:center;
13 width:750px; }
14
15p.postit{
16 border:1px solid yellow;
17 height:300px;
18 line-height:300px;
19 width:400px;
20 background-color: rgba(60, 132, 198, 0.8);
21 background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#FFFAAE), to(#FFF057));
22 background-image: -moz-linear-gradient(#FFFAAE 0%, #FFF057 90%);
23 border-top-color: #FFF057;
24 border-right-color: #FFF057;
25 border-bottom-color: #FFF057;
26 border-left-color: #FFF057;
27 -webkit-box-shadow: #AAA 0px 10px 16px;
28 -moz-box-shadow: #AAA 0px 10px 16px; /* FF 3.5+ */}
29</style>
30<p class="postit">
31<a href="http://www.andyjarrett.com/blog" title="Andy Jarretts Blog">Back soon!</a>
32</p>
Quick discaimer - I have no ideas which browsers this works in. All I can tell you is that it looks good in Chrome and Safari!
| Tweet |
Comments (3) | 
Print |
Send |
2105 Views
| If you like what you see on the website and/or this post has helped you out in some way please consider donating to help keep me in beer vodka. The donations are made through Paypal, which accepts almost any credit card or eCheck. |
Posted By fredo @
7/13/10 12:37 AM
surely it needs a little up-curved corner?
Posted By Jason Langdon @
7/14/10 7:13 AM
Doesn't look the same in IE8 as it does in Firefox 3.6.3 The yellow gradient is missing and the drop shadow isn't there.
Posted By Anselm Bradford @
7/15/10 1:54 AM
Check out the wwdc 2010 session "CSS Effects, Part 1: UI Elements and Navigation" on iTunesU. They demo creating a CSS3 post-it note with curved corners.
[Add Comment]