Little Strange Software

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

【CSS/小ネタ】青い〇

 どうも!LSSです!!

 

先日の記事、

にいただいたブクマで、

  • tn198403stn198403s ばってん。なるほど強調するのに良さそうです。これを応用すれば丸(楕円)とかもできるのでしょうか?あるいは、カーソルを載せたら×や〇が表示されるとか…。すみません、使い途をいろいろ想像しちゃいました。 2021/11/07

とのコメントをいただきました。

 

なるほど、対になる「〇」があれば、簡単なクイズとか作れそうですね^^

という事で、作ってみました。

 

 

青い〇

あいうえお かきくけこ さしすせそ

 

 

コード

あいうえお <span style="background-image: radial-gradient(farthest-side,#0000ff00 80%,#0000ffaa 90%,#0000ff00 100%);">かきくけこ</span> さしすせそ

 

青太字部分が、今回の〇を描くコード、赤太字部分が〇がのる文字部分になります。

コピペして青太字部分以外を書き換えて使う事ができます^^

 

 

クイズ

さて、ここで問題です!

2021年11月7日、「はてなブログ」は何周年を迎えたでしょうか?

 

1周年 10周年 100周年

 

↑正解だと思うものにマウスカーソルをのせてみてくださいね。(スマホの方はタップ)

 

 

みたいなクイズのコード

<style>
.batten:hover{
background-image: linear-gradient(to top left,#ff000000 45%,#ff0000aa 50%,#ff000000 55%),linear-gradient(to top right,#ff000000 45%,#ff0000aa 50%,#ff000000 55%);
}
.maru:hover{
background-image: radial-gradient(farthest-side,#0000ff00 80%,#0000ffaa 90%,#0000ff00 100%);
}
</style>
<p>さて、ここで問題です!</p>
<p>2021年11月7日、「はてなブログ」は何周年を迎えたでしょうか?</p>
<p> </p>
<p><span class="batten">1周年</span> <span class="maru">10周年</span> <span class="batten">100周年</span></p>
<p> </p>
<p>↑正解だと思うものにマウスカーソルをのせてみてくださいね。(スマホの方はタップ)</p>

 

回答群をそれぞれspanタグで囲み、ハズレのものには「class="batten"」、正解のものには「class="maru"」を入れる事で、こうしたクイズが作れますね^^

 

 

あとがき

今回のコードに使用したradial-gradient、「farthest-side」というのを使ってみました。

これまたradial-gradientをこれまで散々使ってきていながら知らなかった値で^^;。

 

「中心からもっとも遠いを100%とするgradient」にする指定だそうです。

 

これを指定しなかった場合の初期値は「中心からもっとも遠いを100%とする」事になる、とか、radial-gradientの形状の初期値は「circle(円)」ではなく「ellipse(楕円)」のほうだとか。

gradientは本当、色々奥が深いですねぇ。

 

 

 

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

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