06. 魔法の古文書（羊皮紙）
時を経た古い手帳のような、独特のムラと歪んだ縁を再現。明朝体で書くと物語が始まります。
大切な記憶を、
このページに記して。
このページに記して。
コードをコピー
<div style="position:relative;display:inline-block;padding:30px 40px;color:#4a3b2a;background:radial-gradient(circle at 30% 30%,#f2e6d0,#e6d5b8);box-shadow:2px 3px 15px rgba(0,0,0,0.3);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;border:1px solid #d4c4ae;font-family:serif;text-align:center;"><style>.p-tail::after{content:'';position:absolute;bottom:-12px;left:50px;border:12px solid transparent;border-top-color:#e6d5b8;}</style><span class="p-tail">メッセージ</span></div>07. 終焉の古文書（ボロボロ版）
端が焦げたようなダメージ加工。歴史を感じさせる重厚なデザインです。
数千年の時を越えて。
コードをコピー
<div style="position:relative;display:inline-block;padding:30px 40px;color:#3d2b1f;background:#dcc8ab;box-shadow:inset 0 0 30px #a68d71,2px 5px 15px rgba(0,0,0,0.4);border-radius:10px 50px 20px 80px;border:2px solid #8b7355;font-family:serif;"><style>.o-tail::after{content:'';position:absolute;bottom:-15px;right:40px;border:15px solid transparent;border-top-color:#8b7355;}</style><span class="o-tail">メッセージ</span></div>08. 霞む和紙（磨りガラス風）
後ろが美しくボケる、透過和紙。カバーブロックとの相性が抜群に「やばい」です。
静寂の中に溶け込む。
コードをコピー
<div style="position:relative;display:inline-block;padding:25px 35px;background:rgba(255,252,245,0.7);backdrop-filter:blur(6px);border:1px solid rgba(200,180,150,0.3);border-radius:2px;">ここに文字</div>09. 夕暮れの薄紙（アンバー透過）
温かみのある琥珀色の透け感。夕景やウッド調の写真に載せると、驚くほど馴染みます。
夕日の光を、そのまま閉じ込めて。
コードをコピー
<div style="position:relative;display:inline-block;padding:20px 30px;background:rgba(243,229,200,0.6);backdrop-filter:blur(4px);border-radius:10px;border-left:5px solid #d4a373;color:#5c4033;">メッセージ</div>10. 氷の和紙（透明付箋）
透明すぎて白背景だと消えちゃう🫥？ でも、背景がある場所では最高に凛とした美しさを放ちます。
澄み渡る、冬の朝。
コードをコピー
<div style="position:relative;display:inline-block;padding:15px 40px;background:rgba(255,255,255,0.4);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.8);border-radius:50px;color:#334155;">メッセージ</div>✨ 重ねて使う、魔法。
白背景で見えにくい透明付箋も、中に色付き付箋を「重ねる」だけでこんなに立体的に！
重ね技、完成！
※詳しい組み合わせテクニックは、次回の「アレンジ編」で解説予定です！
ご利用規約（免責事項）
- 本素材（コード）は、個人・商用を問わず無料でご利用いただけます。
- 著作権は放棄しておりません。コードの再配布、販売、自作発言はご遠慮ください。
- 動作確認はしておりますが、お使いの環境によりデザインが崩れる場合があります。本素材の使用によって生じたトラブルや不具合について、当ブログは一切の責任を負いかねます。
- 個別のカスタマイズ方法や不具合に関するサポートは行っておりません。
コメント