loading...
Cover image for 📃 🖊️ Fully responsive HTML+CSS Sticky note

📃 🖊️ Fully responsive HTML+CSS Sticky note

thormeier profile image Pascal Thormeier Updated on ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode

That's it, have a nice weekend!

Posted on by:

thormeier profile

Pascal Thormeier

@thormeier

Passionate full stack web developer, he/him.

Discussion

pic
Editor guide