HTMLとCSSで装飾を作ってみました。
以下のコードを参考にしました。ありがとうございます！若干アレンジさせていただきました。
Qiita
紙っぽいかわいいWebサイト作りたい - Qiita
かわいいWebサイトが作りたいWeb上でグラフィックデザインっぽい表現をしてるサイト大好き！思いついたら追加する「版ズレ」風版ズレ ＝ 印刷の際に、色の版がズレて出力さ...
See the Pen HTMLとCSSでかわいい装飾 by hiro (@hirochanpon) on CodePen.
HTML
<div class="paper-text">
<p class="text01" aria-label="MAGMAG">
<span>M</span><span>A</span><span>G</span><span>M</span><span>A</span><span>G</span>
</p>
</div>CSS
.paper-text {
display: grid;
justify-content: center; /* 中央揃え */
gap: 20px;
}
.paper-text > p.text01 > span {
display: inline-block;
margin-left: -10px; /* 少し重ねる */
font-size: 20px; /* 基本のフォントサイズ */
line-height: 50px; /* 中央に配置 */
text-align: center; /* 文字中央揃え */
color: #000;
border-radius: 0%; /* 丸くする */
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3); /* 影を少し追加 */
opacity: 0.9;
width: 50px; /* 基本の丸サイズ */
height: 50px;
transform: rotate(0deg);
transition: transform 0.2s;
}
/* M */
.paper-text > p.text01 > span:nth-child(1) {
width: 70px;
height: 70px;
font-size: 30px;
line-height: 70px;
background-color: #feff33;
transform: rotate(-2deg);
}
/* A */
.paper-text > p.text01 > span:nth-child(2) {
width: 50px;
height: 50px;
font-size: 20px;
line-height: 50px;
background-color: #33CCFF;
transform: translateY(-5px);
}
/* G */
.paper-text > p.text01 > span:nth-child(3) {
width: 60px;
height: 60px;
font-size: 24px;
line-height: 60px;
background-color: #FF34CC;
transform: rotate(3deg);
}
/* M */
.paper-text > p.text01 > span:nth-child(4) {
width: 55px;
height: 55px;
font-size: 22px;
line-height: 55px;
background-color: #99FF33;
transform: translateX(-5px);
}
/* A */
.paper-text > p.text01 > span:nth-child(5) {
width: 45px;
height: 45px;
font-size: 18px;
line-height: 45px;
background-color: #FF3333;
transform: translateY(5px);
}
/* G */
.paper-text > p.text01 > span:nth-child(6) {
width: 60px;
height: 60px;
font-size: 24px;
line-height: 60px;
background-color: #fcacf1;
transform: rotate(1deg);
background-color: #FF33FF;
}
/* ホバーアニメーション */
.paper-text > p.text01 > span:hover {
transform: scale(1.2) rotate(5deg);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}かわいい装飾いいですね！
