CSSメモ

グラデーション応用 ページ15

##

そして、ここからは上級者向け。
便利な設定を軽く紹介します。詳しい事は、文字数の関係で省きますので、ぜひ！調べてみてください。

画像にグラデーションを重ねる

{background:linear-gradient(色設定),url(画像URL)}
と設定します。グラデーションの色はrgbaで透明な色にしないと背景が見えません。
透明な色は、CSS辞典で紹介されています。

あと、透明からグラデーションにする場合は注意が必要です。
一部のブラウザ(safariなど)では、linear-gradient(transparent,#カラーコード)とすると、一部が黒となってしまいます。
少し専門的な話になりますが、safariなどのブラウザでは、transparentがrgba(0,0,0,0)となっているためです。きっと、ちょっとCSSに詳しい人ならわかるはず。

なので、
{background:linear-gradient(rgba(255,255,255,0),#カラーコード)}
と設定します。

どの色をどこまで使う？という設定

グラデーションは、どの色をどれくらいまで使うか、ということまで設定できます。
例として、4色(赤→黄色→緑→青)のグラデーションを用意しました。
{
background:linear-gradient(#f00 10%,#ff0 45%,#008000 65%,#00f 100%);
}
こんな感じで、背景に対して、何%までその色を使うか、というのをカラーコードの後に付け加えるだけです。
適当にパーセントを設定しています。適当にいじって使ってくださいね。
150%という感じで、100%以上の値も設定できます。
これを活かせば、すごいデザインが作れると思います。
私は、読み込み中が残念な感じなのであまり使った事はないです。

ちなみに、このグラデーションを応用すると、背景に線を一本だけ引いたり、ということもできますが、ちょっと長くなってしまうので、ここでは触れません。
気になったら調べてみるのもいいかもしれませんね。

##

円形グラデーション→←CSSだけでグラデーション

→ 目次へ｜作品を作る｜感想を書く
他の作品を探す