CSSの参考になるアイデアが満載！2016年スタイルシートを使ったテクニックのまとめ
Post on:2016年12月21日
sponsors
2016年も、CSSの進化がすごかったですね。
CSSを使ったアニメーション、レスポンシブ対応のレイアウトや配置が簡単にできるFlexbox、ナビゲーションやメニュー、パネルやカードなど、さまざまな素晴らしいアイデアを取り入れたスタイルシートを使ったテクニックを紹介します。
各デモは「Run Pen」をクリックすると、動作します。
大きいサイズで楽しみたい時は、その下のリンクをクリックしてください。
See the Pen Puzzle Grid Gallery by Goran Rakic (@golle404) on CodePen.
Puzzle Grid Gallery
ジグソーパズルのピースのようにデザインされた画像ギャラリー。ホバーすると組み合わさって画像が生成されます。
See the Pen CSS responsive grid of hexagons by web-tiki (@web-tiki) on CodePen.
CSS responsive grid of hexagons
レスポンシブ対応の六角形・ヘキサゴンのレイアウト。各パネルのホバーエフェクトも気持ちいいです。
See the Pen Ken Burns Effect fullscreen without js by Nicola Pressi (@ibanez182) on CodePen.
Ken Burns Effect fullscreen without js
画像をフルスクリーンで次々にズームアウトして表示させます。
See the Pen Animation & Layers by Anaislab (@Haru89ka) on CodePen.
Animation & Layers
レイヤーをアニメーションさせ、幻想的なデザインを作り出します。
See the Pen SUPER BEST 🙀 FLEXBOX GRID 🌭 MIXIN EVR! 🔥 by Josh (@iamjoshellis) on CodePen.
SUPER BEST 🙀 FLEXBOX GRID 🌭 MIXIN EVR! 🔥
Flexboxのグリッドを使ったカード型レイアウト。それぞれのカードには楽しいアニメーションが実装されています。
See the Pen Flexbox playground by Gabi (@enxaneta) on CodePen.
Flexbox playground
Flexboxでどういうレイアウトができるのか、各プロパティはどのように挙動するのかが分かる遊び場。
See the Pen Responsive Comic Book Layout by Chris Smith (@chris22smith) on CodePen.
Responsive Comic Book Layout
Flexboxで実装されたマンガのコマ割り風にデザインされたカード型レイアウト。
See the Pen Responsive flexbox grid without media query by Behzad AM (@behzad) on CodePen.
Responsive flexbox grid without media query
Flexboxを使い、Media Queries無しで実装されたレスポンシブ対応の画像ギャラリー。
See the Pen Using flexbox to make responsive widgets without media queries. With a fixed width column by Mark Stickling (@mkstix6) on CodePen.
Using flexbox to make responsive widgets without media queries.
解説記事: Flexboxの特性をうまく使い、Media Queries無しでレスポンシブ対応のレイアウトを作成するCSSのテクニック
See the Pen CSS-only Sliding Panels using transforms by Shaw (@shshaw) on CodePen.
CSS-only Sliding Panels using transforms
中央分割のレイアウト。各コンテンツをホバーする時のトランフォームのアイデアが面白いです。
See the Pen SVG background by Tom Carrington (@visualunderground) on CodePen.
SVG Background
コンテンツの区切り線として、折れ線グラフのようなラインを配置します。
See the Pen image hover 63 effects by Mahesh (@maheshambure21) on CodePen.
image hover 63 effects
画像をホバーすると、テキストをアニメーションで表示されるエフェクトが63種類用意された超軽量のスタイルシート。
See the Pen z-index playground by Hornebom (@Hornebom) on CodePen.
z-index playground
プロダクト写真にz-indexを変更して、詳細情報をアニメーションで表示します。
See the Pen Image zoom on hover - portfolio websites by Dylan (@dwinnbrown) on CodePen.
image zoom on hover
シンプルなHTMLで実装、パネルをホバーすると画像だけがズームするエフェクト。
解説記事: シンプルなHTMLで実装できる！パネルの背景画像だけをズームさせるテクニック
See the Pen cube service box by RahulDhiman (@rahuldhiman) on CodePen.
cube service box
軽快なアニメーションで3Dのボックスが回転します。
See the Pen Slider Parallax Effect by Manuel Madeira (@mmadeira) on CodePen.
Slider Parallax Effect
プロダクトの写真にシャドウを与えた、パララックスのエフェクトがかっこいいスライダー。
See the Pen Card by Helen (@semenchenko) on CodePen.
Card
ふわふわしたアニメーションが楽しい、斜めにデザインされたパネル。
See the Pen Pure CSS Responsive Square by James Thomas Almond (@jamestalmond) on CodePen.
Pure CSS Responsive Square
レスポンシブ対応の1:1の正方形を天地左右の中央に配置します。
See the Pen CSS Responsive Circles with Vertically-Centered Text by Chris Bracco (@cbracco) on CodePen.
CSS Responsive Circles with Vertically-Centered Text
レスポンシブ対応のサークルを描き、テキストを天地左右の中央に配置します。
See the Pen Text in a border by Rico Sta. Cruz (@rstacruz) on CodePen.
Text in border
ボーダーの途中にテキストを配置します。
See the Pen Expanding Column Layout by Ettrics (@ettrics) on CodePen.
Expanding Column Layout
ロード時も、ホバー時も、クリック時もアニメーションがかっこいいパネル型レイアウト。
See the Pen Single page CSS only vertical accordion layout by Rachel Reveley (@rachelreveley) on CodePen.
CSS only vertical accordion layout
アニメーションで開閉する水平型のアコーディオン。レスポンシブ対応で、狭い時はナビゲーションが縦になります。
css tabs
デザインも、アニメーションもかわいいタブ型コンテンツ。
See the Pen Sticky Pointers by Utku (@TeorikDeli) on CodePen.
Sticky Pointers
かわいいポインターをナビゲーションに使った省スペースコンテンツ。
See the Pen CSS Accordion by Matthew Scott (@matthewsco1_) on CodePen.
CSS Accordion
パネル全体の高さは可変、幅はレスポンシブ対応、各アイテムの中身は少なかったり多かったり、開閉はアニメーション、そんなアコーディオンをピュアCSSで実装。
See the Pen Rotating menu by Oleg Frolov (@Volorf) on CodePen.
Rotating menu
ナビゲーションの各アイテムをホバーすると、くるくるっと気持ちいいアニメーションで回転させます。
See the Pen CSS Only Expanding Menu by Rab Rennie (@Rabrennie) on CodePen.
CSS Only Expanding Menu
ハンバーガーアイコンをタップすると、コンテンツを押し出すようにナビゲーションが表示されます。
See the Pen Dropdown Menus by Kevin (@kkrueger) on CodePen.
Dropdown Menus
うねうねしたラインが面白いドロップダウン型のナビゲーション。
See the Pen luxury buttons by Daniel Box (@dbox) on CodePen.
luxury buttons
美しいホバーエフェクトを備えたボタン。
See the Pen Three Simple CSS Button Hover Effects by Dronca Raul (@rauldronca) on CodePen.
Three Simple CSS Button Hover Effects
半透明の美しいエフェクトを備えたボタン。
See the Pen Micro Interaction Button by Phil Hoyt (@philhoyt) on CodePen.
Micro Interaction Button
微細な動きを取り入れた、アニメーションが気持ちいいボタン。
See the Pen Buttons css hover effect by deineko (@deineko) on CodePen.
Buttons css hover effect
落書き風デザインのボタンにあった楽しいホバーエフェクト。
See the Pen Adaptive Pricing Table by Alex (@VoloshchenkoAl) on CodePen.
Adaptive Pricing Table
各アイテムをホバーすると、拡大表示される価格表のテーブル。
See the Pen Simple Responsive Table in CSS by Matt Smith (@AllThingsSmitty) on CodePen.
Simple Responsive Table
シンプルなHTMLで実装された、レスポンシブ対応のテーブル。
See the Pen Styling <ol> numbers by Charley Pugmire (@puglyfe) on CodePen.
Styling <ol> numbers
クリーンなHTMLで数値文字参照を使わずに、丸数字を実装するスタイルシートのテクニック。
解説記事: 順序付きリスト、ol要素を丸数字で実装するスタイルシートのテクニック -spanや①は無し
See the Pen CSS only scroll indicator by Mike (@MadeByMike) on CodePen.
CSS only scroll indicator
CSSのみで実装するスクロールのインジケーター。JavaScriptとか使わないと無理だと思っていましたが、できるんですね。
See the Pen Flat design amusement park svg by Lina (animation powered by CSS) by Vladimir Gashenko (@gxash) on CodePen.
Flat design amusement park svg by Lina (animation powered by CSS)
最後はCSSアニメーションの力作。イラストはSVGで描画されています。
sponsors
