CSS3入門道場

グラデーション

repeating-linear-gradient

repeating-linear-gradientを使い、グラデーションをリピート表示することができます。サンプルで見てみましょう。

ご覧の通り、20%地点でblueとなり、1つ分のグラデーションは終了しますが、続けて100%を満たすために、再度同じグラデーションが繰り返し表示されることになります。続けて、pxを使ったサンプルです。

この場合は、20pxの地点までblueになるようにグラデーションします。その後は、このグラデーションをリピートします。グラデーションとは言え、次のようにして、グラデーション効果をなくすこともできます。

redが0px→20pxまで、blueが20px→40pxという指定になります。この為、グラデーションの無い色のリピートとなります。

これを応用して、国旗などもCSSのみで作成できるようになります。参考、Flags with CSS3 Gradients

ところで、背景画像にはサイズ(background-size)が指定できました。この機能を絡めると、linear-gradientだけでもリピート効果を出すことが出来ます。以下サンプルです。

色には透過色を利用しています。そして、背景画像のサイズを横・縦とも50pxにしました。これでタイルのような壁紙が出来上がりました。

以下は、iPhoneの設定画面風の壁紙サンプルです。

75%地点までtransparentで、下の背景色(background-color: #c5cbd2)が透けて見えるようにしています。残りの25%を薄い白の透過色(rgba(255, 255, 255, 0.1))にしています。そしてその7pxが、横にリピート表示されています。

その昔、個人のホームページでは当たり前のように画像の壁紙が使われていましたが、今はCSSだけで壁紙が作れそうですね。CSSだけで作られた背景画像集、CSS3 Patterns Galleryなども参考にしてみて下さい。

Copyright 2015 CSS3入門道場 All Rights Reserved.