CSS3 が主要ブラウザに対応したことから、これまではむずかしかったアイデアやコンセプトも、手軽にスタイリングできるようになってきています。今回は、背景デザインにスパイスを加えるエフェクト用コードスニペットを、コード共有サイト CodePen からピックアップしまとめています。
コピペで利用できる手軽なものから、これってどう表現するんだろうという面白スタリングまで、注目をあつめるテクニックを中心に揃えています。デザイン制作に悩んだときに活用してみてはいかがでしょう。
詳細は以下から。
背景デザインを楽しくする、参考にしたい HTML/CSS スニペットまとめ
※ デモが動かないときは、「RETURN」ボタンをクリックすることで、再読み込みされます。
※ ページの読み込みに多少時間がかかります、すこし待ってからスクロールするとスムーズに表示されます。
古い映画のようなグリッチ感を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.
縦方向に無限スクロールする背景イメージを、trasnalte3dとbackground-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.
背景をレイヤー状に重ねた、@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.
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.
シンプルに背景にグラデーションを追加したいときに。
See the Pen Gradient CSS background by Bruno Braes (@xhibit) on CodePen.
美しく変化するグラデーション背景を作成するときに。
See the Pen Animated Background Gradient by Mario Klingemann (@quasimondo) on CodePen.
方眼紙状のグリッドラインを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.
文字テキストに合わせて背景をクリッピングするテクニック。
See the Pen CSS background clipping by Sandesh Damkondwar (@sandeshdamkondwar) on CodePen.
文字テキストに合わせて、背景デザインをアニメーションさせるテクニック。
See the Pen Animated text fill by Daniel Riemer (@zitrusfrisch) on CodePen.
斜めに入るスリットラインを表現できるスタリング方法で、各セクションを分割することができます。
See the Pen Another Skewed CSS Background by Matthew Craig (@mcraig218) on CodePen.
Canvasに描かれた、和柄を連想する円形パターンの背景デザイン。
See the Pen Wall Pattern by Tim Holman (@tholman) on CodePen.
幾何学模様のポリゴンスタイルを、ヌルリと動かした背景スタイリング。
See the Pen SVG triangulation by zessx (@zessx) on CodePen.
ボケエフェクトをアニメーション付きで再現した、キラキラと美しいCanvasをつかったレイアウト。画面をクリックするたびに、異なる色合いに切り替わります。
See the Pen Canvas Bokeh Generation by Jack Rugile (@jackrugile) on CodePen.
