CSSの素晴らしいアイデアが満載!2015年スタイルシートのテクニックのまとめ

今年もCSSの進化がすごいです! 次のプロジェクトに使ってみたくなるようなワクワクする素晴らしいアイデア満載のスタイルシートのテクニックを紹介します。

CSSアニメーションはより洗練され、単に要素を動かして楽しむだけでなく、意味のある動きとしてより効果的に利用されるものが目立ちました。

デモのキャプチャまずは、アニメーションの表現もここまでできるのかと驚いた「Marvel Logo animation」から。
※一部は、実際に動作するデモのコードを埋め込んでいます(全部をコードにしたらページが重すぎました)。

デモのキャプチャ

Marvel Logo animation | pure CSS

このアニメーションはぜひ、ブラウザでいっぱいに表示して楽しんでください。

Product Magnification without JavaScript

商品写真を拡大してぐりぐり動かすのをスクリプト無しで実装。仕組みは、divで3x3の透明グリッドを作成し、そのエリアのホバー時に画像のポジションとスケールを変形させています。

デモのキャプチャ

Jelly button

ぷるぷるしてると、ついクリックしたくなりますね。

デモのキャプチャ

Accidental cool effect 2

今年はCSSのフィルタを使ったデモも数多く、ようやく実用性がでてきた感じです。

デモのキャプチャ

CSS background change on scroll

中央に固定配置された要素は、スクロールするとその背景に合わせて色が変化します。

デモのキャプチャ

Misty Background

背景にアニメーションで動く霧をかけます。

デモのキャプチャ

CSS Scroll Jacking Demo Using :hover

ホバーしているセクションエリアだけスクロールコンテンツを見せます。

デモのキャプチャ

CSS gradient backgrounds

画像は一切無し、CSSグラデーションで実装された背景。

デモのキャプチャ

Responsive pure CSS background

レスポンシブ対応で、CSSで実装された背景がアニメーションします。

デモのキャプチャ

moving objects

divで実装されたさまざまな形がアニメーションで動きます。

CSS Cube Flip

キューブに実装された文字がくるっと回転します。かわいい!

Elastic Animation CSS Only

ゴムひものようにしなやかな動きでラインが弾みます。「Elastic Animation」を採用しているサイトも数多く見かけました。

morphing search input

虫眼鏡アイコンがモーフィングのアニメーションで検索ボックスに変形します。

デモのキャプチャ

labyrinth

マウスを動かすと美しい幾何学模様をCanvasで描きます。

デモのキャプチャ

Responsive Hexagon Grid

レスポンシブ対応の六角形のグリッドレイアウト。

デモのキャプチャ

Newspaper Style Design

レスポンシブ対応の新聞レイアウト。アニメーションGIFとか動画を組み合わせると面白いですね。

デモのキャプチャ

CSS Diamond Mesh Navigation

ダイヤモンド型のグリッドにメッシュ状に配置されたナビゲーション。

Blurry Menu

ホバー時に現在位置以外をブラーさせます。他にもいろいろ使えそうです。

Flipside

ボタンの上下左右、4つのポイントをクリックするとそれぞれその方向にくるっと回転するボタン。一方向にしか動かないボタンだと違和感がでることがありますが、どの動作をしても自然な動きを体験できるので、こだわりたい実装ですね。

デモのキャプチャ

Monocle List

スクロールすると、リストで実装された各アイテムを拡大表示します。

Modal Animations

モーダルボックスを表示するさまざまなアニメーション。ひと昔前と比べると、動きがかなり洗練されています。

デモのキャプチャ

Cards Menu Concept

カード型メニューの新しいコンセプトで、大きいスクリーンでも小さいスクリーンでも機能します。

デモのキャプチャ

Pure CSS Color Tabs (no label)

タブ型ナビゲーションのコンテンツスライダー。

デモのキャプチャ

Simple Content Reveal

大胆に斜めにレイアウトされたタブ型コンテンツ。

デモのキャプチャ

Selected styles in CSS

こんなボーダーもできるんですね!

CSS Border transitions

ボタンを囲むボーダーにさまざまなアニメーションを適用。

デモのキャプチャ

Expanding Card | Material Design

ボタンをクリックすると、Material Designのカードコンポーネントに拡大します。

Springy popup card

左右をクリックすると、少し弾む心地よいアニメーションでスライドします。

デモのキャプチャ

PURE CSS INTERACTIVE MAP

CSSで実装されたインタラクティブなマップコンテンツ。しかもレスポンシブ対応です。

デモのキャプチャ

UI Statistic Pop Out CSS

各パネルをホバーすると拡大表示します。

デモのキャプチャ

Trial Form

美しく実装されたフォーム。

デモのキャプチャ

Text input love

フォームのインプット要素をかわいいアニメーションで楽しませます。

Animated Hover Highlight

テキストを気持ちいいアニメーションでハイライト表示。使ってるサイト、たまに見ますね。

Animated hover effect

ハイライトとはちょっと違いますが、これもテキストのホバー時のかわいいエフェクト。

デモのキャプチャ

CSS Loading Spinners

CSSで実装されたシンプルでかっこいいローディング用のスピナー。

デモのキャプチャ

Pure CSS Progress

ゼリーのように美しく実装されたプログレスバー。一番下のリキッドタイプがすごいです!

デモのキャプチャ

Fallout 4 Pip-Boy in CSS

こんなページのローディングにでてきたら見いっちゃいますね。

デモのキャプチャ

pen#PwLXXP

最後は、CSSのコーディングの様子を再現したデモ。
いやー、CSSってすごい!

top of page

©2016 coliss