ヒーローイメージに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; }
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS Lecture: 有名サイトが使っているid名class名集めてきました！
