📃 🖊️ Fully responsive HTML+CSS Sticky note

For a small side project I created a sticky note using HTML and CSS:

To replicate the look and feel of a sticky note, the most important part was to get a curvature right. I used SVG and clipPath to achieve this. To support the curvature, I needed to add some lighting effect. I achieved this with some linear gradient.

The hardest thing was to position the shadow the right way, though. It should look like the sticky is actually throwing a shadow on the wall, but the sticky part shouldn't throw a shadow, since it's touching the wall directly.

Responsiveness is achieved using a padding with percentage and adaptive font size. The shadow size and positioning also need to be taken into account, since they behave differently on different viewports due to percentage units as well.

Here's the markup:

<div class="sticky-container">
  <div class="sticky-outer">
    <div class="sticky">
      <svg width="0" height="0">
        <defs>
          <clipPath id="stickyClip" clipPathUnits="objectBoundingBox">
            <path
              d="M 0 0 Q 0 0.69, 0.03 0.96 0.03 0.96, 1 0.96 Q 0.96 0.69, 0.96 0 0.96 0, 0 0"
              stroke-linejoin="round"
              stroke-linecap="square"
            />
          </clipPath>
        </defs>
      </svg>
      <div class="sticky-content">
        Hello! I'm a<br>
        sticky note!
      </div>
    </div>
  </div>
</div>

And here's the CSS:

/* Some positioning and ratios */
.sticky-container {
  max-width: 270px;
  position: relative;
}

.sticky-outer {
  display: flex;
  padding-top: 92.5925926%;
  position: relative;

  width: 100%;
}

.sticky {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* Shadow behind the sticky note */
.sticky:before {
  box-shadow: -2px 2px 15px 0 rgba(0, 0, 0, 0.5);
  background-color: rgba(0, 0, 0, 0.25);
  content: '';
  width: 90%;
  left: 5px;
  height: 83%;
  position: absolute;
  top: 30%;
}

/* The sticky note itself */
.sticky-content {
  background: linear-gradient(
    180deg,
    rgba(187, 235, 255, 1) 0%,
    rgba(187, 235, 255, 1) 12%,
    rgba(170, 220, 241, 1) 75%,
    rgba(195, 229, 244, 1) 100%
  );
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Kalam', cursive;
  font-size: 1rem;

  clip-path: url(#stickyClip);
}

/* Add responsiveness */
@media screen and (min-width: 640px) {
  .sticky:before {
    height: 79%;
    width: 90%;
  }
  .sticky-content {
    font-size: 1.25rem;
  }
}

@media screen and (min-width: 768px) {
  .sticky:before {
    height: 75%;
    width: 90%;
  }
  .sticky-content {
    font-size: 1.5rem;
  }
}

@media screen and (min-width: 1024px) {
  .sticky:before {
    height: 73%;
    width: 90%;
  }
  .sticky-content {
    font-size: 1.875rem;
  }
}

That's it, have a nice weekend!

---

I write tech articles in my free time. If you enjoyed reading this post, consider buying me a coffee!

Comments

[Aatif G.]

Great job!
I tried a longer sticky text but the note is of fixed size with fixed shadow. The overflowing text goes out of bound.

[Pascal Thormeier]

Thank you! Yes, that's an unfortunate drawback of the design. The clippath also plays a role, as it dictates the general shape of the sticky. You could enlarge it by adjusting the max-width in the CSS part to fit more text, though.