📃 🖊️ 完全応答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を考慮してください!