どうも!LSSです!!
先日の記事、
にいただいたブクマで、
- tn198403s ばってん。なるほど強調するのに良さそうです。これを応用すれば丸(楕円)とかもできるのでしょうか?あるいは、カーソルを載せたら×や〇が表示されるとか…。すみません、使い途をいろいろ想像しちゃいました。
とのコメントをいただきました。
なるほど、対になる「〇」があれば、簡単なクイズとか作れそうですね^^
という事で、作ってみました。
青い〇
あいうえお かきくけこ さしすせそ
コード
あいうえお <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は本当、色々奥が深いですねぇ。
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^