ヒーローイメージにCSSで実装するグラデーションを組み合わせたサンプル - NxWorld

ヒーローイメージとはファーストビューでドーンと表示される大きなイメージのことで、海外だけでなく国内でも取り入れているサイトを見かけることが多くなってきました。 そんなヒーローイメージにCSSで実装したグラデーションを組み合わせたサンプルです。 グラデーションを重ねる 単純に画面いっぱいに表示した背景画像の上にグラデーションを重ねたものです。 HTMLは.heroを指定したdiv要素のみを使用し、CSSは下記のように記述します。 .hero { height: 100vh; background: linear-gradient(-45deg, rgba(229,93,135,.7), rgba(95,195,228,.7)), url(background.jpg) center center / cover no-repeat; }

[jed_lee]

ヒーローイメージにCSSで実装可能なグラデを組み合わせるテクニック。ニッチではあるが、何か特殊なアクション時につかうかもしれないのでメモ。

[hopekuson]

これはぐっとくる

[s99e209]

背景画像の上にCSS3でグラデーションを重ねる方法。（画像だけでなくコンテンツ部分にも適用可）

[k_gobo]

赤青黄緑ピンク金白黒のようなニチアサグラデのことかと思いました。

[z1a2nh]

ヒーローイメージにCSSで実装するグラデーションを組み合わせたサンプル

[kussun]

霧っぽい使い方いいな。

[yfnt]

ヒーローイメージにCSSで実装するグラデーションを組み合わせたサンプル | NxWorld