プログラミング

プログラミング

【フリーソースコード】オーバーサイズドのユニークな背景デザインのためのCSSスニペット10選!

3,859 views

読了時間 : 約2分57秒

ディスプレイにHDが登場し4Kとなった今日では、スクリーンの殆どを占める背景が主流になりつつあります。とても印象的な視覚効果があり、サイトの情報発信の助けになる背景デザインの重要性が増しているのです。

CSSと少々のJavaScriptを使った背景デザインは、単に写真やテクスチャを張り付けるよりずっと素晴らしい効果があります。

本記事では、面白みのある背景デザイン10選を実例をお見せしながらご紹介します。

(イメージをクリックするとCodePenが見られます。)

 

なお、背景デザインの関連する話題については以下の記事を参照してください。

いつもの「白背景」から飛び出そう!Webデザイン5つの背景トレンド【2017年版】

デザイナー必見!jQueryスクリプトを使って背景色をアニメーションにする方法

【遊べて実用もできるソースコード】必見!CSSとJacvascriptで作るパララックススクローリングのコードスニペット11選!

UIの背景色を暗くするのはユーザーにとって良いことなの?悪いことなの?

 

 

1. CSS Blend Mode による色調変化

スクロールするにつれ、固定されたエレメントの色が変化するように見えるクールな背景デザインです。CSS mix-blend-modeプロパテイが背景によって色調を変化させています。

 

 

2. スクロールアニメーション

かつての横スクロールするテレビゲームを思い出させるこのテクニックは、CSS transformと少々のJSを使い、二つの異なるイメージを反対方向に移動させています。

 

 

3. 斜め効果の背景デザイン

現在最もホットでトレンデイな斜めのバックグラウンドです。印刷物では簡単にできますが、ウエッブではとても面倒なデザインでした。今ではHTML/CSSを使う事により、手間いらずで出来上がります。

 

 

4. 変わる画像の背景デザイン

ごく簡単なCSSを少し使い、複数の画像がスムーズに変わっていくバックグランドで、従来のJavaScriptを使ったものよりずっと軽くなっています。

 

 

5. アニメーションするグラデーション

アニメーションの背景デザインは、気を付けないと目障りになってしまいますが、この背景は微妙に変化するアニメーションなので邪魔になりません。JavaScriptによりお好みのグラデーションカラーを選べます。

 

 

6. スクロールでぼやける背景デザイン

ヘッダーやニュース記事で、まずはその画像に注目してもらいたい場合に有効なテクニックです。jQueryを使い、スクロールするとbackground-sizeプロパテイが変わることでテキストを読みやすくしています。

 

 

7. フェイドインするオーバーレイのあるヒーローイメージ

幅一杯のヒーローイメージをオーバーレイにより色調を変え、フェードインアニメーションによりスムーズにフェイドインさせ、最後にラスタースクロール効果を加えています。比較的少ないコードで、JSを使っていないのにとてもモダンな見た目になっています。

 

 

8. ズームしてパンする背景デザイン

最近よく見る背景効果で、パネルにホバーすると背景画像がズームし、更にカーソルの動きに合わせてフレームが上下左右に移動します。背景にインタラクテイブな要素を与えて、ユーザーを飽きさせない効果があります。

 

 

9. ホバーで現れる背景デザイン

マウスの位置によりスプリットスクリーンの背景が現れる例です。ビフォアフター写真のように比較させるのに最適のデザインです。

 

 

10. スクロールで色が変わる背景デザイン

単に濃い色を使うだけで、どれだけ訴求力が忘れがちですが、この背景デザインはスクロールで色を変えることで更にインパクトを増しています。シンプルなテクニックですが、画像を重視したデザインに匹敵する視覚効果があります。

 

 

最先端の背景デザイン

 

背景はもう単なるフレームコンテンツではなく、コンテンツそのものとして機能しています。背景デザインによりユーザーエクスペリエンスがどう変わるのか、今回ご紹介したテクニックを試してみてはいかがでしょう。

 

 

関連記事

いつもの「白背景」から飛び出そう!Webデザイン5つの背景トレンド【2017年版】

デザイナー必見!jQueryスクリプトを使って背景色をアニメーションにする方法

【遊べて実用もできるソースコード】必見!CSSとJacvascriptで作るパララックススクローリングのコードスニペット11選!

UIの背景色を暗くするのはユーザーにとって良いことなの?悪いことなの?

 

 

※本記事は、10 Snippets for Creating Unique CSS Background Effectsを翻訳・再構成したものです。

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

dポイント最大10%『4・5・6月の金・土曜限定!』
■キャンペーン期間:2020/4/1日(水)0:00 ~ 6/30(火)23:59

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ