どうも！LSSです！！
すっかり寒くなりましたね。
こたつやヒーター、エアコンなどの暖房器具が恋しくなる今日この頃。
…それはそれとして、最近「炎っぽいものを描こうと思ったら、色遣いはどうするのが良いか」みたいな事を考えていて、それをCSSで試してみる事にしました。
これを見た方が炎をイメージしてくれて、気持ち温まっていただければ^^…と、こじつけておきますｗ
FireCard
コード
<style>
.fire{
width:300px;
height:184px;
padding:10px;
font-size:120%;
font-weight:bold;
color:black;
border:10px double #00000080;
border-radius:5px;
background-image:
conic-gradient(from 93deg at -20% -10%,#000000,#ff0000,#ff8800,#ffff00,#ffffff,#ffffff,#ffff00,#ff8800,#ff0000,#000000 55deg);
}
</style>
<div class="fire">Little Strange Software</div>
「炎」に関わるのは一部分のみ
色々コード書いていますが、「炎」ぽさをめざしているのは、
background-image:
conic-gradient(from 93deg at -20% -10%,#000000,#ff0000,#ff8800,#ffff00,#ffffff,#ffffff,#ffff00,#ff8800,#ff0000,#000000 55deg);
この部分のみとなります。
conic-gradient の検索結果 - Little Strange Software
その存在を知ってからやたらと当ブログで使用している、conic-gradientをまた使っています。
今回の書式は、
background-image:conic-gradient(from 開始角度 at 中心の横位置 中心の縦位置 ,色々な色をカンマ区切りで羅列 グラデーションとなる角度);
という感じで書きました。
開始角度
グラデーションが始まる角度で、今回は「93deg」としています。
「deg＝度」で、一周360degとなる角度の単位、0degが時計の12時方向（真上）を指し、そこから93度 時計回りに回転した位置から、グラデーションが始まります。
（3時方向よりちょい下、って事になります）
中心の横位置 中心の縦位置
時計回りに回転するグラデーション、その中心位置を指定します。
今回は幅・高さに対する%（パーセンテージ）で指定しました。
指定を省略した場合は「50% 50%」で、枠の中心が回転の中心になります。
今回は「-20% -10%」としたので、「左端よりさらに幅の20%分左、上端よりさらに高さの10%分上」という枠外の位置を中心って事にしました。
色々な色をカンマ区切りで羅列
グラデーションになる、色を色々並べています。
今回でいうと、
#000000,#ff0000,#ff8800,#ffff00,#ffffff,#ffffff,#ffff00,#ff8800,#ff0000,#000000
の部分で、「黒、赤、オレンジ、黄色、白、白、黄色、オレンジ、赤、黒」という順に並んでいます。
グラデーションとなる角度
色の羅列の最後から半角スペースをあけて、「55deg」を指定しました。
これにより、グラデーション全体の幅は「55度」となり、その範囲内で均等に「色々な色」が並んでグラデーション化します。
93degから始まり、55degのグラデーションなので、終了角度は「93+55=148deg（度）」という事になります。
まぁ、炎というよりは…
アニメにありそうな「熱線攻撃」みたいな形状ですが^^;
あと、
border:10px double #00000080;
カードの周囲を、double（二本線）のborderで囲むと、その二本線の隙間がbackground-imageの影響を受けていますね。
border-imageの当て損ないみたいな感じですが…これはこれでいいかな、と。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
