🔥 デザインの鍵はネガティブスペースにある！5つの効果と実例40選 | Workship MAGAZINE(ワークシップマガジン)

Material Designのカードの実装例。 See the Pen Material cards FlexBox by diego valobra pirolab on CodePen. カードを使ったシンプルなホバーエフェクト。実用性も高いと思います。画像のキャプションを表示するのにもいいですね。 See the Pen Simple CARD hover effect by YaroslavW YaroslavW on CodePen. a要素一つだけで実装されたリンクにさまざまなエフェクトを与えます。 See the Pen Pure CSS Single Element Link Styles by Matthew Shields MatthewShields on CodePen. こちらはJavaScriptも使用したタイムラインで、スクロールに合わせて変化するので、より分かりやすいです。 See the Pen Codevember - Dynamic Article Timeline ES6 by Karl Saunders Mobius1 on CodePen. ナビゲーションのアクティブなアイテムのみにエフェクトを与えます。こういう仕組みの多くはラジオボタンを使いますが、そこは無理しないで、JavaScriptに任せる方がスマートです。 See the Pen Toggle Buttons with CSS Underline Animation by Josh Jennings jenningscreate on CodePen. by Lewi Hussey Lewitje on CodePen. レスポンシブ対応のパンくず。今まで見たことがないデザインで、垂直方向に場所は取りますが、面白いアイデアです。 See the Pen Breadcrumbs Navigation by Andreas Storm andreasstorm on CodePen. 見た目シンプルな垂直型のメニューですが、ホバー時にかわいいエフェクトが隠されています。 See the Pen Menu by Shalini Gandhi shalinigandhi on CodePen. ラジオボタンをこういうデザインにする発想はなかったです。 See the Pen Radio Button Group with Gradient by Alexi Taylor alexitaylor on CodePen. 上記の別バージョン。デスクトップ時はデザイン違いで構造は一緒ですが、スマホ時の表示が異なります。 See the Pen Pure CSS News Timeline - Responsive by Md Nahidul Islam nahidul on CodePen. スクロールすると、ヘッダとコンテンツの境界線がアニメーションで変化します。 See the Pen Curve SVG Background Animation by Arman armantaherian on CodePen. CSSのみで実装された進捗ステップ。経過する時のアニメーションまでしっかり用意されています。 See the Pen CSS only order process steps by Jamie Coulter jcoulterdesign on CodePen. パララックス、視差効果の多くはページのスクロール時に背景とコンテンツに使用されているのを多く見かけます。これはカードが回転する時に使用されており、カードとコンテンツが立体的に見えます。 See the Pen Parallax Flipping Cards by Tyrell Rummage tyrellrummage on CodePen. デフォルトの棒グラフはホバーすると、アニメーションで3Dに表示されます。 See the Pen Exploded isometric via CSS 3D transforms by Scott Henderson scootman on CodePen. 弾むように追従する気持ちいいホバーエフェクト。 See the Pen Attract hover effect by Louis Hoebregts Mamboleoo on CodePen.

See the Pen CSS Paper Text by Mattia Astorino equinusocio on CodePen. 最後はネコ好きにはたまらない、紐につかまった猫がぶらぶらするプリローダー。HTMLを見ると、ものすごい数のdivが使用されています。 See the Paypal button css codepen CSS: Cat Swinging on String by David Khourshid davidkpiano on CodePen.

Material Designのボタンの実装例。 See the Pen Material Design Buttons by Ravikumar Chauhan rkchauhan on CodePen. レスポンシブ対応のタイムライン。タイムラインはリスト要素で実装されています。 See the Pen Pure CSS News Timeline - Responsive by Md Nahidul Islam nahidul on CodePen. スクロールすると、4枚のパネルがそれぞれ異なる動きでアニメーションします。 See the Pen Friction. これもCSSのみで実装されており、非常に軽快なアニメーションを楽しめます。 See the Pen Hearthstone Style Card Hover by Jack Rugile jackrugile on CodePen.