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:
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!
