May 11, 2012 The 100% CSS Post-It® Note Who doesn’t love Post-it notes? After extensive CSS study I have come to realize that some things can be done with CSS alone. Here is how it is done. 100% CSS Post-It® Check it out! I have updated the final code to function properly with the Firefox14 update from July 2012. Firefox stopped using transform skew, and moved to transform matrix code. -Alex Who doesn’t love Post-it notes? In my previous life, before I started learning CSS, I would ask myself “how can I make a convincing looking Post-it note in Photoshop?” After extensive CSS study and research I have come to realize that some things can be done with CSS alone. That’s right, the post it you see on the right is 100% CSS. Go ahead, check it out. Here is how it is done. I broke the instructions up into key elements so the uninitiated can get a feel for how I constructed everything. The process itself might be helpful for some people – it was certainly helpful for me. If you aren’t interested in my life story, feel free to skip to the end for a quick ‘plug and play’ code snippet. Making the Post-it margin: 25px; width: 250px; min-height:250px; max-height:250px; padding-top:35px; This is the basic square that will be built around your content. The height is somewhat complicated because I want the text to begin lower on the Post-it rather than at the top. To ensure the padding doesn’t add any height while still lowering the text, set a min and max parameter on the height. The Yellow Hex Color background: #ffff88; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */ background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ This is where much of the magic happens. When you think of a Post-it note you probably think of the yellow hex color, right? It’s true, but we need to think in 3D terms. It needs a yellow gradient that fades at a 45-degree angle into a slightly lighter color at the bottom right. This will help with creating a “peeled up” illusion later on. I just used this amazing tool (http://www.colorzilla.com/gradient-editor) to make mine. This code looks like a huge mess, but it’s mostly due to cross-browser support. Speaking of cross-browser support, Internet Explorer 6-9 does not like diagonal gradients so this website provides a nice fallback and converts our diagonal gradient into a horizontal gradient. This is not optimal so I recommend changing the last line of code here: filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffff88',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ Either make startColorstr and endColorstr the same number (which will turn off the gradient and make the Post-it a solid color) or change GradientType from 1 to 0 (this will make the gradient vertical instead of horizontal). I chose to remove the gradient. border:1px solid #E8E8E8; border-top:60px solid #fdfd86; I am doing something special with the border. You could easily give this a 1px light grey border and it would look fine, however, Post-its have that sticky glue-like substance on top that, when in use, has a slightly different look than the rest of the Post-it. I created a thick top border that is nearly the same color as the yellow I used. The effect is so slight you almost can’t tell it’s there, but anyone who does will surely appreciate it. Font Styling font-family:'Reenie Beanie'; font-size:22px; text-align:center; This is my font styling. Consider putting a script font on your post it, something like Marker Felt or Comic Sans, or preferably something interesting from the Google Font API like Reenie Beanie seen here. A Peeled Corner Although Post-its are square, the bottom corners tend to peel off the surface a bit when stuck to something. This 3D effect is subtle, but adds a ton to the feel of the note. This is the code to make only the bottom right corner look peeled for most browsers. As usual, sorry IE users. border-bottom-right-radius: 60px 5px; And there we have it. The final code for the Post-it class looks like this: .postit { line-height: 1; text-align:center; width: 275px; margin: 25px; min-height:250px; max-height:250px; padding-top:35px; position:relative; border:1px solid #E8E8E8; border-top:60px solid #fdfd86; font-family:'Reenie Beanie'; font-size:22px; border-bottom-right-radius: 60px 5px; display:inline-block; background: #ffff88; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */ background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */} I know what you are thinking. Where is the shadow? Well, the shadow is actually a different piece of CSS. We’re doing more than simply adding a box shadow around the note. We could do that, but then it would look like the Post-it is floating rather than stuck on the wall. Creating a non-box shadow is a bit of a workaround. We are actually going to be making a shape, giving that shape a shadow, and carefully adjusting that shape/shadow so only about 5% of it is visible. Sounds easy, right? I used this website to fine tune my effect (http://www.wordpressthemeshock.com/css-drop-shadow). It took me some playing to get it right, but I am happy with the result. The Bottom Corner Shadow content: ""; width:200px; height: 25px; -moz-transform: matrix(-1, -0.1, 0, 1, 0, 0); -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0); -o-transform: matrix(-1, -0.1, 0, 1, 0, 0); -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0); transform: matrix(-1, -0.1, 0, 1, 0, 0); Here is our shape. It’s a long rectangle that has been skewed to have more acute angles. position:absolute; right: 0px; bottom:20px; z-index: -1; This positioning hides the box behind our Post-it and makes sure it stays underneath. I ran into an interesting problem when using this on a template sites like the one you are on now. The negative z-index actually put the shadow behind the background, making it invisible. I am not sure if this will be the case on other CMS sites, or other templates, but to get around this problem you simply need to give your background a z-index of 0. background: rgba(0, 0, 0, 0.2); box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40); Finally, the shadow. It takes a bit of tweaking to make it show up just right. Also you might have noticed that box-shadow is commented out. This is the IE workaround. IE doesn’t support rotation or skew so the shape that is actually making our shadow doesn’t cast the correct shadow. Without a box-shadow, it is just hidden under the yellow not not bothering anyone. The shadow website I provided above wants you to put together your inline code in a funny way. After you wrap your content in the .postit class, you need to make another empty div just to hold the box shadow. Like this: Here is my postit content That is a bit clunky and I always want to do less inline work, so I put my own spin on things. Instead of making a separate class for the cornershadow, which would look like this: .cornershadow { content: ""; position:absolute; z-index:-1; right: 0px; bottom:9px; width:125px; height: 25px; background: rgba(0, 0, 0, 0.2); -moz-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40); -webkit-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40); -o-box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40); /* box-shadow: 40px 27px 5px rgba(0, 0, 0, 0.40); */ -moz-transform:skew(10deg,10deg) translate(-45px,-15px); -webkit-transform:skew(5deg,5deg) translate(-45px,-15px); -o-transform:skew(5deg,5deg) translate(-45px,-15px); transform:skew(10deg,10deg) translate(-45px,-15px) } The above code is now obsolete as browsers have moved to using matrix over skew. Here is functionally equivalent code, also updated in the final code. -Alex content: ""; position:absolute; z-index:-1; right:-0px; bottom:20px; width:200px; height: 25px; background: rgba(0, 0, 0, 0.2); box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40); -moz-transform: matrix(-1, -0.1, 0, 1, 0, 0); -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0); -o-transform: matrix(-1, -0.1, 0, 1, 0, 0); -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0); transform: matrix(-1, -0.1, 0, 1, 0, 0); …I used the pseudo class :after to simply put the cornershadow code after all postit class divs! So now all you need to do is make a div class=”postit” and put whatever you want in it! The complete code: (Updated July 2012) .postit { line-height: 1; text-align:center; width: 275px; margin: 25px; min-height:250px; max-height:250px; padding-top:35px; position:relative; border:1px solid #E8E8E8; border-top:60px solid #fdfd86; font-family:'Reenie Beanie'; font-size:22px; border-bottom-right-radius: 60px 5px; display:inline-block; background: #ffff88; /* Old browsers */ background: -moz-linear-gradient(-45deg, #ffff88 81%, #ffff88 82%, #ffff88 82%, #ffffc6 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(81%,#ffff88), color-stop(82%,#ffff88), color-stop(82%,#ffff88), color-stop(100%,#ffffc6)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* IE10+ */ background: linear-gradient(135deg, #ffff88 81%,#ffff88 82%,#ffff88 82%,#ffffc6 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff88', endColorstr='#ffffc6',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } .postit:after { content: ""; position:absolute; z-index:-1; right:-0px; bottom:20px; width:200px; height: 25px; background: rgba(0, 0, 0, 0.2); box-shadow:2px 15px 5px rgba(0, 0, 0, 0.40); -moz-transform: matrix(-1, -0.1, 0, 1, 0, 0); -webkit-transform: matrix(-1, -0.1, 0, 1, 0, 0); -o-transform: matrix(-1, -0.1, 0, 1, 0, 0); -ms-transform: matrix(-1, -0.1, 0, 1, 0, 0); transform: matrix(-1, -0.1, 0, 1, 0, 0); } And the inline code: Check out this Post-it It’s 100% CSS! If you want to further increase your Post-it fun consider separating the colored gradient and borders into its own class, naming that class .yellow. Then create a class for other Post-it colors like .blue, .pink, .orange, and so on. That way you get to name your div class=”postit pink” and get different colors. You can also give your Post-its a rotation (like the one I have at the beginning of this post) by wrapping it in a div and giving that div rotate transformation. Tags Culture Share Share on Facebook Share on LinkedIn Share on Twitter Share Share on Facebook Share on LinkedIn Share on Twitter