今回の記事ではHTML5/CSS3でグラデーションのかけかたをご紹介します。グラデーションをかけることによって、様々なデザインを表現することが出来ます。
実際のHTML5/CSS3ではこのようなります。
グラデーションをかけることで自然な印象になる
例えば、りんごなどの球体のものはわかりやすいかと思います。グラデーションがかかっていますよね。私たちが実際に見ているものは単色というものはほとんどありません。光の当たり具合によって、それぞれの場所の色が微妙に異なっているのです。
グラデーションにより違和感を感じるものもある
こうした球体のもならばグラデーションをしっかりかけると自然な印象になるのですが、平面状のものにしっかりとしたグラデーションをかけると違和感を感じるものです。ですので、Webデザインのような平面の多いものではグラデーションは薄くかけるべきだとの声も聞かれます。
ソースコード
上記のソースコードです。iPhoneやMacのような、Apple製品のような雰囲気のグラデーションにしてみました。コピペOKです。
以上、「HTML5/CSS3 グラデーションのかけかた」についてでした。
