【CSS】GOLDEN BALL【小ネタ】
どうも！LSSです！！
小ネタ、なんですが、CSSでちょっと思いついた簡単なネタがあって、やってみたらすんなりいけました^^
簡単なコードですが、結構綺麗に描けていますね。
GOLDEN BALL
コード
<p style="width: 130px; height: 130px; border-radius: 50%; background-color: gold; background-image: radial-gradient(circle at 30% 30%,white,yellow,brown);"> </p>
ついでにSILVER BALL
コード
<p style="width: 130px; height: 130px; border-radius: 50%; background-color: silver; background-image: radial-gradient(circle at 30% 30%,white,#cccccc,#444444);"> </p>
border-radius:50%;を使って円を描く
事ができるのは知っていましたが、その背景にradial-gradientがうまく当てはまるんですね。
簡単なコードですが、少し解説すると、
width: 130px;height: 130px;
ボールの大きさを設定しています。
それぞれ、幅・高さで同じ数値にする事でボックス実体は正方形になり、後述のborder-radiusの効果で円になります。
border-radius: 50%;
ボックスを角丸にするborder-radiusですが、このように50%で指定すると「ボックスサイズの半分の長さ」を半径とする事になります。
%で指定する事で、ボックスサイズが変わってもそのサイズに応じた角丸になるんですね^^
background-color: gold;
この記述は実はなくても構いません。
もしグラデーション等に対応していないブラウザで見た時に、代わりに表示される色を指定しています…が、今やほとんどのブラウザで対応しているのでは？
background-image: radial-gradient(circle at 30% 30%,white,yellow,brown);
実際に色を決めているのはこちらの記述になります。
「円の中心は左上から見て右に30%、下に30%の位置」
「色は中心から白・黄色・茶色」
の円形グラデーション、を背景にするように、という指定ですね。
この「円形グラデーション」が円の形状にうまくマッチして、立体的な球っぽく見えるようになりました^^
もちろん、色を変更して様々なカラーボールを作る事もできます！
改変使用例
例えばこんな風に、
pタグではなくspanタグにstyle指定を入れて
行頭を飾るのもいいかもですね^^
コード
<p><span style="width: 20px; height: 20px; border-radius: 50%; background-color: gold; background-image: radial-gradient(circle at 30% 30%,white,yellow,brown);"> </span>例えばこんな風に、</p>
<p><span style="width: 20px; height: 20px; border-radius: 50%; background-color: silver; background-image: radial-gradient(circle at 30% 30%,white,#cccccc,#444444);"> </span>pタグではなくspanタグにstyle指定を入れて</p>
<p><span style="width: 20px; height: 20px; border-radius: 50%; background-color: #cf9682; background-image: radial-gradient(circle at 30% 30%,white,#dfa692,#cf9682);"> </span>行頭を飾るのもいいかもですね^^</p>
※<span>と</span>の間に全角スペースを入れています。（pタグの場合は半角スペースでもOKでしたが）
余談：ゴールデンボールって何？
サッカーに、そういう名前の賞があるそうです。
あと、関係はあるようなないような、昔の野球用品店のCMを見つけたので貼っておきますね。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
