【コピペでOK】グラデーションフレーム
記事IT・テクノロジー
今回はCSSでグラデーションの枠を作ってみました。
もしよかったら参考にしてみて下さいね🎵
完成見本1️⃣
ボーダーに見えますが、実はグラデーションの四角の上に、ひとまわり小さい白い四角が置いてあります。
html1️⃣
<div class="colorful-border">
<p>セール開催中！！</p>
</div>
CSS1️⃣
<style>
.colorful-border {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: linear-gradient(30deg, #7bffff, #ff7);
padding: 0.5rem;
}
.colorful-border p {
font-size: 2rem;
letter-spacing: 0.5rem;
color: tomato;
font-weight: bold;
background: #fff;
width: 100%;
height: 100%;
margin: 0;
padding: 2rem;
}
</style>
完成見本2️⃣
グラデーションの大きさをアニメーションを使って変えることで、ゆらりと色が変化して見えるボーダーとなっています。
↓
html2️⃣
<div class="colorful-border02">
<p><span>☆</span>NEW ITEM<span>☆</span></p>
</div>
CSS2️⃣
.colorful-border02 {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: radial-gradient(circle at center, rgb(247, 166, 12) 0%, rgb(255, 34, 87) 10%, rgb(154, 39, 238) 60%, rgb(35, 102, 247) 100%) center center;
padding: 0.5rem;
animation: loop 5s linear infinite;
}
＠keyframes loop {
0% {
background-size: 100%;
}
50% {
background-size: 300%;
}
100% {
background-size: 100%;
}
}
.colorful-border02 p {
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
letter-spacing: 0.5rem;
color: #000;
font-weight: bold;
background: #fff;
width: 100%;
height: 100%;
margin: 0;
padding: 2rem;
}
.colorful-border02 p span {
font-size: 70%;
}
</style>
⭐️アットマークは半角のアットマークに置き換えて下さい。😉
【参考サイト】
CSS グラデーション ジェネレーター
https:// front-end-tools.com/generategradient/
いかがでしたか？今回は以上になります。お疲れ様でした🌷
