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

2022/8/172022/8/17

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

横長の付箋

単色

背景色：#a9ceec
文字色：#333333

おしゃれな付箋デザイン

<div class="fusen-001">おしゃれな付箋デザイン</div>

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

右に色付き

右先端の色：#2589d0
文字色：#333333

おしゃれな付箋デザイン

<div class="fusen-002">おしゃれな付箋デザイン</div>

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

正方形の付箋

単色

背景色：#a9ceec

おしゃれな付箋デザインおしゃれな付箋デザインおしゃれな付箋デザインおしゃれな付箋デザイン

<div class="fusen-003">
    おしゃれな付箋デザイン
    おしゃれな付箋デザイン
    おしゃれな付箋デザイン
    おしゃれな付箋デザイン
</div>

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