背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ

background-snippet

CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。

 

 

コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ

※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。

※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。

Pure CSS Cinema Effect

古い映画のようなグリッチ感をCSSのみで表現しています。

See the Pen Pure CSS Cinema Effect by Brad Colthurst (@bullerb) on CodePen.

 

 

 

Smooth hue rotation on scroll CSS only

CSS フィルタ機能を活用し、スクロールに応じて色合いを変化させるスタイリング。

See the Pen Smooth hue rotation on scroll CSS only by Thomas Podgrodzki (@Podgro) on CodePen.

 

 

 

Infinite Scrolling Background

縦方向に無限スクロールする背景イメージを、trasnalte3dbackground-positonの2種類でスタイリングしています。

See the Pen Infinite Scrolling Background by Josh Scarbrough (@Scarbrough9) on CodePen.

 

 

 

Marvel Logo animation | pure CSS

CSS のみで表現された映画のオープニングシーンで、@keyframe アニメーションをつかったスタイリング方法。

See the Pen Marvel Logo animation | pure CSS by Gregor Adams (@pixelass) on CodePen.

 

 

 

Waves

背景をレイヤー状に重ねた、@keyframe アニメーション。

See the Pen Waves by Rico Sta. Cruz (@rstacruz) on CodePen.

 

 

 

Ken Burns Effect fullscreen without js

JSなどを使わず CSS のみで表現された、動きのあるイメージスライダー Ken Burns エフェクト。

See the Pen Ken Burns Effect fullscreen without js by Nicola Pressi (@ibanez182) on CodePen.

 

 

 

A Blurred Overlay

Mac OS で利用されている、背景を半透明ガラス状にぼかす、シンプルだけど知らないと思いつかないスタイリング。

See the Pen A blurred overlay by Glenn Reyes (@glennreyes) on CodePen.

 

 

 

Responsive Background Image Fade on Scroll

フルスクリーン表示された背景イメージが、スクロールに応じてフェードアウトし、コンテンツがはじまる新しい魅せ方。

See the Pen Responsive Background Image Fade on Scroll by Dudley Storey (@dudleystorey) on CodePen.

 

 

 

Gradient CSS Background

シンプルに背景にグラデーションを追加したいときに。

See the Pen Gradient CSS background by Bruno Braes (@xhibit) on CodePen.

 

 

 

Animated Background Gradient

美しく変化するグラデーション背景を作成するときに。

See the Pen Animated Background Gradient by Mario Klingemann (@quasimondo) on CodePen.

 

 

 

CSS Background Grid Lines

方眼紙状のグリッドラインをCSSのみで描くスタイリングテクニック。

See the Pen CSS Background Grid Lines by disjunto (@disjunto) on CodePen.

 

 

 

-webkit-background-clip:text CSS effect

モダンブラウザで対応のbackground-clipを利用した、文字テキストのクリッピングテクニック。

See the Pen -webkit-background-clip:text CSS effect by Jintos (@Jintos) on CodePen.

 

 

 

CSS background clipping

文字テキストに合わせて背景をクリッピングするテクニック。

See the Pen CSS background clipping by Sandesh Damkondwar (@sandeshdamkondwar) on CodePen.

 

 

 

Animated text fill

文字テキストに合わせて、背景デザインをアニメーションさせるテクニック。

See the Pen Animated text fill by Daniel Riemer (@zitrusfrisch) on CodePen.

 

 

 

Another Skewed CSS Background

斜めに入るスリットラインを表現できるスタリング方法で、各セクションを分割することができます。

See the Pen Another Skewed CSS Background by Matthew Craig (@mcraig218) on CodePen.

 

 

 

Wall Pattern

Canvasに描かれた、和柄を連想する円形パターンの背景デザイン。

See the Pen Wall Pattern by Tim Holman (@tholman) on CodePen.

 

 

 

SVG Triangulation

幾何学模様のポリゴンスタイルを、ヌルリと動かした背景スタイリング。

See the Pen SVG triangulation by zessx (@zessx) on CodePen.

 

 

 

Canvas Bokeh Generation

ボケエフェクトをアニメーション付きで再現した、キラキラと美しいCanvasをつかったレイアウト。画面をクリックするたびに、異なる色合いに切り替わります。

See the Pen Canvas Bokeh Generation by Jack Rugile (@jackrugile) on CodePen.

 

 

サムネイル@ : Futuro Line Icons by Bloomua – Creative Market