HTML・CSSでつくる影付きのめくれた付箋3選

メモや補足として使える「付箋ボックス」のデザインスニペットをまとめました。影をつけることで、より現実世界の付箋に近いデザインにしています。ちなみに用途こそ限られますが、かわいい系のサイトと特に親和性が高いのが特徴です。コピペだけで導入可能&色のカスタマイズも可能なので、ぜひ楽して他サイトと差別化を図ってみてください。

横長の付箋

横長の付箋の単色バージョン

単色

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);
}
横長の付箋の右に色付きバージョン

右に色付き

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);
}

正方形の付箋

正方形の付箋の単色バージョン

単色

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);
}