HTML5/CSS3 グラデーションのかけかた

HTML5/CSS3でグラデーション

今回の記事ではHTML5/CSS3でグラデーションのかけかたをご紹介します。グラデーションをかけることによって、様々なデザインを表現することが出来ます。

例えば、りんごなどの球体のものはわかりやすいかと思います。見事にグラデーションがかかっていますね。私たちが実際に見ているものは単色というものはほとんどありません。光の当たり具合によって、それぞれの場所の色が微妙に異なっているのです。

こうした球体のもならばグラデーションをしっかりかけると自然な印象になるのですが、平面状のものにしっかりとしたグラデーションをかけると違和感を感じるものです。ですので、Webデザインのような平面の多いものではグラデーションは薄くかけるべきだとの声も聞かれます。

実際のHTML5/CSS3ではこのようなります。

上記のソースコードです。iPhoneやMacのような、どこかAppleな雰囲気のグラデーションにしてみました。どうぞコピーして使ってください。

以上、「HTML5/CSS3 グラデーションのかけかた」についての記事でした。

Let's share SNS