今朝は、とてもきれいな青空だったので、都庁と青空を撮りました。
そこで思ったことですが、これをWebで再現しようとしたらどうなるのだろう・・・ということで、ちょいと作ってみました。
上の方の色(#82b4f1) | グラデーションで再現? | 下の方の色(#b2e1ff) |
もう少し大きくしてみました。
今日の快晴を再現? |
う~ん、ちょっとはそれっぽいかな。でも、さすがに自然の色を出すのは難しいですね。
ちなみに、今回のソースコード(上側)は以下になります。
<table border="1" height="100"> <tr> <td align="center" style="background:#82b4f1;">上の方の色(#82b4f1)</td> <td align="center" style="background:-moz-linear-gradient(top, #82b4f1, #b2e1ff); background:-webkit-gradient(linear, left top, left bottom, from(#82b4f1), to(#b2e1ff));">グラデーションで再現?</td> <td align="center" style="background:#b2e1ff;">下の方の色(#b2e1ff)</td> </tr> </table>
グラデーションって、こうやって作るのですね。
初めて知りました。
◆参考にしたURL
http://www.css-lecture.com/log/css3/css3-gradient.html
コメント