【CSS】黒地に金文字【小ネタ】
どうも！LSSです！！
ちょっとCSSでやってみたい事があったのですが、その過程で出来たものを晒してみます^^
黒地に金文字
黒地に金って映えるかな？
コード
<div style="border-radius: 15px; background-color: black; 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;">黒地に金って映えるかな？</div>
背景をちょっと凝ってみた版
背景をちょっと凝ってみました。
コード
<div style="border-radius: 15px; 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;">背景をちょっと凝ってみました。</div>
やってみたかったのは、
きんきらきんのきーん♪
これを、角丸のフチに使用し、ridgeで盛り上がっているようにしたかったのです。
ところが、CSSは「border-image」を使用するとまず角丸の「border-radius」が無効になり、「ridge」も利かなくなる、との事^^;
ググってみると、強引に角丸として表示する方法までは出てきましたが、ridge効果はやっぱり乗らないそうで。
それでも、黒に金のフチや金文字はそれなりに映えるかな？と思い、ネタにしてみました。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
