Create a CSS3 post-it note without images



In this article we will look at how we can create a CSS3 post-it note, AKA a sticky note using only CSS. No images!

Before we proceed, let’s look at what we will be creating:

post-it-note

In this case, I used it to style a blockquote containing a nice Albert Einstein quote! You can use it on other elements too, though.

The HTML

Let’s look at the HTML for the post-it note. We will need a blockquote for the text, in which we place a cite for the author. We will also need an i-tag for the pin and a container for positioning.

<div class="quote-container">
  <i class="pin"></i>
  <blockquote class="note yellow">
    We can't solve problems by using the same kind of thinking we used when we created them.
    <cite class="author">Albert Einstein</cite>
  </blockquote>
</div>

Styling the CSS3 post-it note

Now let’s see how we need to style the CSS3 post-it note.

First of all, we will need a nice font! I chose to use the Satisfy google font.

@import url(http://fonts.googleapis.com/css?family=Satisfy);

Now we need to style the container and give it position:relative in order to be able to style the pin and note relatively from it.

The basic styling for the note is simple. Change the font, add some padding and finish off with a box shadow. Lastly we will also give the cite a bit margin and align it to the right.



.quote-container {
  margin-top: 50px;
  position: relative;
}

.note {
  color: #333;
  position: relative;
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  font-family: Satisfy;
  font-size: 30px;
  box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
}

.note .author {
  display: block;
  margin: 40px 0 0 0;
  text-align: right;
}

You can now add a separate class for the color and the rotation. ie: yellow.

.yellow {
  background: #eae672;
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  transform: rotate(2deg);
}

Adding the pin

Now all that’s left is make our pin! We will use the :before and :after pseudo-class selectors so that we can use only one element for the pin.

First, let’s do some positioning and create the small metal part of the pin.

.pin {
  background-color: #aaa;
  display: block;
  height: 32px;
  width: 2px;
  position: absolute;
  left: 50%;
  top: -16px;
  z-index: 1;
}

Next, using CSS3 gradients and box-shadow, we will make the ball top of the pin and it’s shadow.

.pin:after {
  background-color: #A31;
  background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.3), hsla(0,0%,0%,.3));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1),
              inset 3px 3px 3px hsla(0,0%,100%,.2),
              inset -3px -3px 3px hsla(0,0%,0%,.2),
              23px 20px 3px hsla(0,0%,0%,.15);
  content: '';
  height: 12px;
  left: -5px;
  position: absolute;
  top: -10px;
  width: 12px;
}

And finally we create and rotate the shadow of the metal part of the pin.

.pin:before {
  background-color: hsla(0,0%,0%,0.1);
  box-shadow: 0 0 .25em hsla(0,0%,0%,.1);
  content: '';

  height: 24px;
  width: 2px;
  left: 0;
  position: absolute;
  top: 8px;

  transform: rotate(57.5deg);
  -moz-transform: rotate(57.5deg);
  -webkit-transform: rotate(57.5deg);
  -o-transform: rotate(57.5deg);
  -ms-transform: rotate(57.5deg);

  transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
}

So now we have a post-it note that’s being pinned by a cool pure CSS3 pin with a rotated shadow.

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+13Share on StumbleUpon4Share on Reddit0Share on LinkedIn5Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!