【いますぐつかえるCSS3/JavaScriptコードサンプル】フレームインフレーム、グラデーション、動画マスク、ショートカットメニュー、テーブルデザインなど

P1110340

NIJILOGがネットで見つけた素晴らしいコードを紹介する【いますぐつかえるCSS3/JavaScriptコードサンプル】
思わず人に紹介したくなるほどのクオリティの作品ばかりですので是非コードも合わせてみてくださいね。

※タイマーをつかっている作品などはデモがうまく動かないことがあります。デモ内右下をマウスオーバーしてRERUNを押すか、直接プレイグラウンドで見てみてください。

iframeをつかって3D風にホバーエフェクトを実現した、なんだかスゴイやつ

タイトルの意味がよくわからん感じになっていますが、なんといっていいやらわからないコードサンプル。
これでiframeの中身がきっちりスクロールできる(iframeだからあたりまえか)ところがビックリ。
アイデア賞ですね。

See the Pen 3D iframe-based previews by Le Roux Bodenstein (@lerouxb) on CodePen.

複数の背景画像を重ねた上に、さらにグラデーションを掛ける

CSS3で可能になった複数背景画像を重ねがけしています。
CSSだけでレイヤーみたいなことが出来るようになるとデザインの幅が広がりますね。

See the Pen Multiple fullscreen backgrounds by Luke (@lucaspark) on CodePen.

Youtube動画の上に三角形のマスクを掛けるサンプル

背景に動画をつかうクールなデザインが増えていますが、その応用のようなコード。
動画再生にはJQuery tubularをつかっています。

See the Pen Video background with solid shape over it by Jorge Epunan (@juanbrujo) on CodePen.

画面いっぱいに広がるショートカットメニュー

モバイルファーストが極まったようなメニューです。
ユーザビリティ的にもすばらしいですが、ちょっとクセになりそうな動きが気持ちいいです。

See the Pen Full Page Intro & Navigation by Cody House (@codyhouse) on CodePen.

レスポンシブなテーブルデザイン

スマホサイズになるとレイアウトが変更されて見やすくなります。
テーブルはレスポンシブと相性があまり良くないので参考にしたいです。

See the Pen Responsive Data Table by RB (@superguru) on CodePen.

虫眼鏡みたいなレンズを配置するエフェクト

技術的には大したことはないんですが、デザインが目を引いたのでピックアップ。
レンズの出来はかなりいいんですが、さすがに拡大まではしてくれません。

See the Pen Greyscale Magnifying glass effect by Hugo Darby-Brown (@hugo) on CodePen.

CSSオンリーのラベルリボン

CSSだけでつくるリボンのコードがあちこちで見られるようになりましたが、これはかなり凝った部類です。
ラインやストライプが入っていて芸が細かいですね。

See the Pen Single Element Pure CSS3 Ribbon from CodePlayer by Stephanie Cunnane (@Stephanie_Cunnane) on CodePen.