ポケットラボ

CSS3とjQueryで実装できるお洒落なチュートリアルをまとめてみました。画像の表現方法、タブメニュー、ボタンなどをCSS3を使ってお洒落でカッコよく実装することができます。

CSS3 and jQuery

タブメニュー

DemoTutorial
タブメニューをCSS3を使ってとっても綺麗に魅せることができます。
タイプは4種類あり、どれも動きが滑らかでとても綺麗です。

画像を使ったナビゲーター

DemoTutorial
レスポンシブwebデザインにも対応している画像を使ったナビゲーター。
マウスを乗ってたときなどの動きなどもとても面白いです。

アコーディオン

DemoTutorial
demoでは３タイプあります。細かい動きなどとても綺麗です。
CSS3でこんな動きまでできちゃう驚きです。

画像スタイダー

DemoTutorial
上下左右などにスライドして画像が切り替わる画像スライダー。
こちらもCSS3を使っての実装になります。デモを見ていただくとわかるのですがとても滑らかで綺麗にスライドします。とっても素敵です。

CSSのみで立体ボタン

DemoTutorial
CSS3を使って作るボタン。立体的に見せるボタンのチュートリアル。
画像を一切使わずにCSSのみで作っております。すごい！

インタラクティブメニュー

DemoTutorial
windows8のデザインのようなインタラクティブメニュー。
クリックすると画面が広がるようになっています。

スウォッチブックメニュー

DemoTutorial
単語の暗記などに使ったスウォッチブックのようなメニューです。
使いドコロが難しいそうですが、インパクトがありますね！

ホバーエフェクト

DemoTutorial
画像ギャラリーなどに使えるホバーエフェクト。
縦横にマウスを移動させると、滑らかについてくるエフェクトです。

3Dギャラリー

DemoTutorial
ポートフォリオサイトなどに使えそうな3Dギャラリー。macのsafariライクなデザインです。

CSS3ギャラリーフィルターギャラリー

DemoTutorial
こちらもポートフォリオサイトで使えそうな画像ギャラリー。
カテゴリー別になっており、カテゴリーを選択すると選択された画像だけがわかりやすくなります。

マウスオンで背景がぼやける

DemoTutorial
マウスを乗せると、乗せたアイテム以外は、ぼやけるエフェクト。
とっても面白い動きです。

写真をフルスクリーンで複数枚で切り替わり表示

DemoTutorial
背景にフルスクリーンで表示し、動きを付けたりして複数枚の写真が切り替わる、フルスクリーンイメージスライダーです。
写真をフルスクリーンで使っているととてもインパクトがある上に、動きもあり、スライダー付き！なのでインパクト大ですね！