css post it note

The 100% CSS Post-it® Note

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

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

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:

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.

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

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 😛

And there we have it. The final code for the Post-it class looks like this:

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

Here is our shape. It’s a long rectangle that has been skewed to have more acute angles.

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.

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:

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

…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)

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.

Talk with us more about how our combination UI/UX design team can help you creatively design your next project.

Alex Krasny on linkedin
Alex Krasny
Content Marketing Specialist at MentorMate
Front-end Developer, Social Media Acrobat & Blogger

Alex Krasny comes from a design and advertising background with a long history of personal blogging. Alex has worn many hats at MentorMate starting with graphic designer and ending up in a hybrid position we call Creative Marketing Specialist.

When not developing CMS websites for clients or writing blog posts at MentorMate he is probably researching new or long-forgotten ways to tie a necktie.
6 replies
  1. Philippe M.
    Philippe M. says:

    AWESOME article !
    This is a great visual effect and I can already think of spots where a client would love it.
    Thanks for the post, Every new day i see new powers of the CSS.

    Reply
  2. Tom
    Tom says:

    Great post (it)! Well explained.

    Works fine in Chrome, but in Firefox (14.0.1) it doesn’t show the nice shadow effect in the corner, which is a pitty.

    Thanks!

    Reply
    • Alex Krasny
      Alex Krasny says:

      It looks like the latest Firefox update changed how it looks at skew, it now uses a matrix system… I just spent some time messing with it and seemingly recreated the effect using the new matrix transformation. Please use this code for the :after and see if it works for you:

      .postit:after {
      content: "";
      position:absolute;
      z-index:-1;
      right:-0px; bottom:20px;
      width:200px;
      height: 25px;
      background: rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 2px 15px 5px rgba(0, 0, 0, 0.40);
      -webkit-box-shadow: 2px 15px 5px rgba(0, 0, 0, 0.40);
      -o-box-shadow: 2px 15px 5px rgba(0, 0, 0, 0.40);
      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);
      }

      Reply
  3. Walter
    Walter says:

    I love this. I’m still finishing off a total redesign for my website, and added some post-its as a background to some new videos, and thought they looked pretty cool. But again as you mentioned, I did try some beautiful CSS multicolored backgrounds which still just will not work in IE… sigh. Thanks for the code, will definitely use in my next site!!

    Reply

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">