📃 🖊️ 완전히 반응하는 HTML+CSS 스티커 메모

소규모 사이드 프로젝트를 위해 HTML과 CSS를 사용하여 스티커 메모를 만들었습니다.



스티커 메모의 모양과 느낌을 재현하기 위해 가장 중요한 부분은 곡률을 올바르게 만드는 것이었습니다. 나는 이것을 달성하기 위해 SVG와 clipPath를 사용했습니다. 곡률을 지원하려면 약간의 조명 효과를 추가해야 했습니다. 선형 그라디언트로 이것을 달성했습니다.

하지만 가장 어려운 점은 그림자를 올바른 방향으로 배치하는 것이었습니다. 스티커가 실제로 벽에 그림자를 드리우는 것처럼 보여야 하지만 스티커 부분이 벽에 직접 닿기 때문에 그림자를 드리우지 않아야 합니다.

응답성은 백분율 및 적응형 글꼴 크기가 있는 패딩을 사용하여 달성됩니다. 그림자 크기와 위치 지정도 고려해야 합니다. 백분율 단위로 인해 서로 다른 뷰포트에서 다르게 동작하기 때문입니다.

마크업은 다음과 같습니다.

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

다음은 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;
  }
}

그게 다야, 좋은 주말 되세요!


여가 시간에 기술 기사를 씁니다. 이 게시물을 재미있게 읽으셨다면 buying me a coffee을 고려하십시오!