🌊 シーグラス文房具シリーズ：Vol.1
波に揉まれて丸くなった、宝石のようなシーグラス。
あの「マットな透明感」を再現したWeb素材を3回に渡ってお届けします。
今回は、デスクトップを彩る「付箋（ふせん）」のコードを配布します。
第1弾：付箋
第2弾：水滴ペン
第3弾：海のしおり
1. コバルトブルー
Cobalt Blue
<div style="width:100%; max-width:300px; min-height:120px; padding:30px; box-sizing:border-box; word-break:break-all; backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.4); border-radius:40% 60% 50% 50% / 35% 45% 55% 65%; box-shadow:inset 4px -4px 12px rgba(255,255,255,0.3), 8px 8px 20px rgba(0,0,0,0.08); background:rgba(40,110,180,0.85); color:#fff; display:flex; align-items:center; justify-content:center; text-align:center;">
ここにメモを入力
</div>2. アンバー
Amber
<div style="width:100%; max-width:300px; min-height:120px; padding:30px; box-sizing:border-box; word-break:break-all; backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.4); border-radius:40% 60% 50% 50% / 35% 45% 55% 65%; box-shadow:inset 4px -4px 12px rgba(255,255,255,0.3), 8px 8px 20px rgba(0,0,0,0.08); background:rgba(180,100,40,0.85); color:#fff; display:flex; align-items:center; justify-content:center; text-align:center;">
ここにメモを入力
</div>3. ホワイト
White
<div style="width:100%; max-width:300px; min-height:120px; padding:30px; box-sizing:border-box; word-break:break-all; backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.4); border-radius:40% 60% 50% 50% / 35% 45% 55% 65%; box-shadow:inset 4px -4px 12px rgba(255,255,255,0.3), 8px 8px 20px rgba(0,0,0,0.08); background:rgba(245,250,255,0.9); color:#556b72; display:flex; align-items:center; justify-content:center; text-align:center;">
ここにメモを入力
</div>
コメント