【いますぐつかえるCSS3/JavaScriptコードサンプル】グーグルマップ、ボタン、アニメーション、スポットライトなど。

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

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

グーグルマップAPIをつかった美しい地図表示

グーグルマップにひと工夫してオシャレな地図をつくるなら是非オススメしたいサンプル。
API をつかって座標指定やマーカーの設置をやってます。
ラベル自体は border-radius と animation くらいなので、すぐに真似できる秀逸なサンプルですね。

See the Pen Typography Thingy in CSS | (Used to be) A Problem with Firefox by Steven Sinatra (@diagramatics) on CodePen.

ボタンがプログレスバーも兼ねているフォームサンプル

「Save Location」ボタンをクリックするとボタン自身の背景がプログレスバーのように変化します。
見た目的にも面白いですし、こういったアニメーションはユーザにとってもわかりやすいので真似したい発想ですね。
コードは angular をつかっているので慣れていないとわかりずらいかも。

See the Pen Button Save Animation by Heather Buchel (@hbuchel) on CodePen.

クリックしたところから波紋が広がるアニメーションリスト

リストをクリックすると波紋が広がるだけ……なんですが、波紋が広がるアニメーションがカッコイイ。
秀逸なのはクリックした箇所から波紋がはじまるところで、クリック箇所にボックスをオーバーレイで追加してあげているようです。
すばらしい。

See the Pen Ripple Click Attempt by Miguel Ferreira (@angus) on CodePen.

ちょっとした動画のイントロみたいな CSS アニメーション

ホームページレイアウトを簡略化したコンテンツ要素が次々とあらわれて見ていて楽しいアニメーション。
アニメーション要素はすべて CSS で、フェードやスライドもスクリプトなしで実装されています。

See the Pen Homepage Animations by Flip Stewart (@flipstewart) on CodePen.

紙がめくれた感じのボタン集

ボックスに影をつけて紙がめくれたようなエフェクトをつけるサンプルがたくさん。
この手のエフェクトはつかえそうで意外につかいどころがないんですが、これだけ種類があればどこかで役に立つかもしれません。

See the Pen 3D Paper button effects by Ashley Nolan (@ashleynolan) on CodePen.

radial-gradient をつかってスポットライト風の背景色をつくる

radial-gradient(円形グラデーション)をつかうと CSS だけでこんな風にできますというデモ。
こういうシンプルだけど使いやすいデモを見ると CSS3 でホント可能性が広がったなーと思ったりします。

See the Pen Cool gradient by SomeStuffer (@SomeStuffer) on CodePen.

skewをつかって背景を傾斜変形させる

コンテンツのボックス背景を斜めにしてビジュアルに変化を加えるTIPSです。
外側のボックスを skew で傾けてから、内側のボックスだけ傾きを戻すのがポイント。

See the Pen Skewed background with CSS by Jose L Pimienta (@pipozoft) on CodePen.

マウスオーバーで形が変わるCSSアイコン

三本線アイコンにカーソルを合わせるとバツアイコンにアニメーションします。
before、after 擬似要素と box-shadow をつかった教科書通りのキレイな CSS アイコンアニメーションです。

See the Pen Sibling Selector Style Change on Hover by Alex Bergin (@abergin) on CodePen.

counter-increment をつかった行番号の表示サンプル

なんの変哲もない counter-increment をつかったデモです。
取り立ててかわったところはありませんが、counter 系はちょっとクセがあるのでトラブった時の参考までに。

See the Pen CSS-only (dynamic) line numbers by elomatreb (@elomatreb) on CodePen.