HTML・CSSでつくる影付きのめくれた付箋3選【コピペで完成】

  • HTML
  • CSS
  • レスポンシブ対応

横長の付箋

単色

単色

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1
デザインを調整する
背景色
文字色
おしゃれな付箋デザイン
step2
HTMLをコピペする
HTML
<div class="fusen-001">おしゃれな付箋デザイン</div>
step3
CSSをコピペする
CSS
.fusen-001 {
    display: inline-block;
    position: relative;
    padding: .5em 1.3em .5em 1em;
    background-color: #a9ceec;
    color: #333333;
}

.fusen-001::before {
    position: absolute;
    bottom: -1px;
    right: 9px;
    z-index: -1;
    transform: rotate(5deg);
    width: 70%;
    height: 50%;
    background-color: #d0d0d0;
    content: "";
    filter: blur(4px);
}
右に色付き

右に色付き

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1
デザインを調整する
右先端の色
文字色
おしゃれな付箋デザイン
step2
HTMLをコピペする
HTML
<div class="fusen-002">おしゃれな付箋デザイン</div>
step3
CSSをコピペする
CSS
.fusen-002 {
    display: inline-block;
    position: relative;
    padding: .5em 1em;
    border-right: 27px solid #2589d0;
    background-color: #f5f5f5;
    color: #333333;
}

.fusen-002::before {
    position: absolute;
    bottom: 2px;
    right: -20px;
    z-index: -1;
    transform: rotate(5deg);
    width: 100%;
    height: 50%;
    background-color: #d0d0d0;
    content: "";
    filter: blur(4px);
}

正方形の付箋

単色

単色

  1. デザイン調整
  2. HTMLをコピペ
  3. CSSをコピペ
  4. 完了
step1
デザインを調整する
背景色
おしゃれな付箋デザイン おしゃれな付箋デザイン おしゃれな付箋デザイン おしゃれな付箋デザイン
step2
HTMLをコピペする
HTML
<div class="fusen-003">
    おしゃれな付箋デザイン
    おしゃれな付箋デザイン
    おしゃれな付箋デザイン
    おしゃれな付箋デザイン
</div>
step3
CSSをコピペする
CSS
.fusen-003 {
    display: flex;
    align-items: center;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 2em 2.2em;
    background-color: #a9ceec;
    color: #333333;
}

.fusen-003::before {
    position: absolute;
    bottom: -5px;
    right: 7px;
    z-index: -1;
    transform: rotate(5deg);
    width: 70%;
    height: 50%;
    background-color: #d0d0d0;
    content: "";
    filter: blur(4px);
}