Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】黒地に金文字・改【小ネタのさらに小ネタ】

背景をさらにちょっと凝ってみました。

 

 どうも!LSSです!!

 

↑この間 投稿した、 

というCSS小ネタですが、さらにちょっと付け足してみました。

小ネタのさらに小改変?

 

 

コード

<div style="border-radius: 15px; box-shadow: 2px 2px 20px 0px #ffff80 inset; background-image: linear-gradient(45deg,#040404,#141414); background-size: 7px 7px; border: 6px gold ridge; font-size: 200%; font-weight: bold; padding: 0.6em; color: gold; text-shadow: -1px -1px 0px lightyellow,1px 1px 0px brown,8px 6px 10px gold;">背景をさらにちょっと凝ってみました。</div>

 

赤文字部分を付け足してみました。

 

box-shadowは外側の金枠から内側にぼーんやりと広がる影(少し左と上が大きくなるようにしています)。

文字にも元々2種類の目立たない影を付けていましたが、それと別に位置をはっきりずらした、ぼんやり影も足してみました。

 

 

ちょっとゴージャスな感じ?

コンセプトが自分でもよく分からなくなってきましたw

えーと…元々は「黒に金ブチを付けたら映えるかな?」と思ってやってみたんでした。

 

あと、前回の記事を書いた後に、

tn198403s.hatenablog.jp

カメさん(id:tn198403s)さんが、元々のわずか1ピクセルずらした影の色を変えてみるのを試してくださっています^^

(っと、今気づきましたが、設定された投稿日時がLSSの10歳の誕生日ですねw)

 

わずか1ピクセルですが、だいぶ雰囲気変わりますね!

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^