どうも！LSSです！！
このブログを古くから読んでくださっている方はご存知かもですが、カテゴライズされていないものの「きんきらきんのきーん」シリーズというものがあります。
CSSで「黄金の輝き」をイメージしたグラデーションを目指したもので、
枠だったり文字だったり、を白・黄色・茶色・黒などの色のグラデーションで表現しようという試みです。
今回、conic-gradientを色々いじっているとたまたま出来上がったので、久しぶりの「きんきらきんのきーん」最新作を公開しますｗ
クセが強すぎる黄金背景
コード
<div style="
width: 300px;
height: 160px;
background:
conic-gradient(from 270deg,#eedd88 89.9deg,transparent 90deg) 5px 5px/20px 20px,
conic-gradient(from 315deg,white,yellow,brown,black,brown,yellow,white) 0 0/20px 20px;
padding: 5px;
font-weight: bold;
font-size: 300%;
text-shadow: 1px 1px 0px white;
">黄金背景</div>
コード中、赤太字部分だけが
この背景模様を描いている部分となります。
それ以外の部分について。
width: 300px;
height: 160px;
黄金背景を置く要素の幅と高さ、黄金背景の１マスが縦横ともに20ピクセルなので、20の倍数で指定するとピッタリおさまります。
padding: 5px;
内部余白を5ピクセルとっています。（中に入れる文字が枠際に密着しないようにするため）
font-weight: bold;
font-size: 300%;
text-shadow: 1px 1px 0px white;
文字サイズを太く、大きく（300%）、更に右下に白い影をつけて境目が分かりやすいようにしています。
※というぐらいしないと、文字が読みづらいほどクセが強い背景になってしまいました^^;
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
