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!
Comments
surely it needs a little up-curved corner?
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.
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.
Yes, very nice, but does not work at all on IE. All that is seen is a yellow outline box. So long as websites need to support users visiting in IE, this is an issue.
