CSS3入門道場

グラデーション

実践サンプル

iPhoneアプリ風アイコン

実践サンプルでは、iPhoneアプリ風のアイコンを見て行きます。今まで見てきたグラデーションは、背景画像に対して設定していましたが、CSS3では背景画像を複数設定することができました。ですので、グラデーションも複数設定することができます。ですが、ここでは複数のグラデーションではなく、他と組み合わせる例を見て行きます。まずはグラデーションの土台を作ります。以下になります。

緑の背景色適用前と後の比較です。グラデーションでは、透過色を利用しています。255,255,255は、白で、0,0,0は、黒です。これらの白・黒に対して不透明度を設定し、背景色も見えるようになります。では、このグラデーションの中心点を50% -70%の位置に移動します。

実際のiPhoneの場合、もっと深い切り込みだと思いますが、ここでは控えめにしています。最後にこれを利用して、iPhoneアイコン風のリンクとしてみます。

実際のサンプル

さて、上記では背景色と組み合わせて見ましたが、背景画像ということは、いわゆる他の(普通の)背景画像とも組み合わせることができます。ここでは、パフェの画像と組み合わせてみます。HTMLやCSSは、上記を少し変更していますが、ポイント部分は、background-image: で、url(画像URL) も指定している所です。

実際のサンプル

iPhoneアプリ風ナビゲーション

最後は、iPhoneアプリ風ナビゲーションを紹介します。色の章で透過色を使ったサンプルを見ました。今回は更にグラデーションを加えて、よりリアルな表現にしています。こうすることで、「緑」という基本色を変更すると、ヘッダーの色もボタンの色も同時に変わります。

実際のサンプル

非常に長いのでポイント部分だけ述べておきますと、親要素のヘッダーと子要素のボタン共に、上下半分に分かれて2つのグラデーションを効かせています。また、親要素も透過色にすることで、その下にあるコンテンツが見えるようにしています。画面サイズの小さいスマートフォンなどで有効に活用できます。

Copyright 2015 CSS3入門道場 All Rights Reserved.