CSSパズル 第二問！
どうも！LSSです！！
に続き、第二問目を作ってみました！
いくつかの選択肢から選ぶだけなので、CSSが分からなくてもサンプルの変化を見ながら、正解に辿り着くという遊び方ができます^^
なお、全ての選択肢が正解になった時、「正解です！！」と赤い文字が出てきます。
CSSパズル 第二問！
第二問です
左が見本です。
下記コードの選択項目を選んで、右が見本と同じになるようにしてください。
下記コードの選択項目を選んで、右が見本と同じになるようにしてください。
コード
<div style="
display: inline-block;box-sizing:border-box;width: 140px;height: 80px;
: 10px;
border:;
border-color:;
background:
linear-gradient(,#000000,#804000,#ffff00,#ffffff,#ffff00,#804000,#000000);
text-align:;
">第二問です</div>
display: inline-block;box-sizing:border-box;width: 140px;height: 80px;
: 10px;
border:;
border-color:;
background:
linear-gradient(,#000000,#804000,#ffff00,#ffffff,#ffff00,#804000,#000000);
text-align:;
">第二問です</div>
現在のコード
現在の選択肢から作ったコードは↓になります。（選択肢を変更すると、こちらもリアルタイムに変化します。）
謝辞
今さらなんですが…この「CSS指定をパズルにしよう」というアイデアは、
の記事にいただいた、
↑くろいぬさんのコメントがきっかけでした^^
ありがとうございます！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
うーんこれはパズルに応用出来そうですね。