css3-and-jquery-tutoria

CSS3&jQueryでお洒落でカッコよく実装できるチュートリアル12選

  • このエントリーをはてなブックマークに追加

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

CSS3 and jQuery

タブメニュー


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

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


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

アコーディオン


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

画像スタイダー


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

CSSのみで立体ボタン


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

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


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

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


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

ホバーエフェクト


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

3Dギャラリー


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

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


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

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


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

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


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

おすすめ記事

  1. 縦や横の動きが面白いパララックス効果を用いたwebサイト
  2. クリエイティブでカッコイイ!メニューブックデザイン
  3. ガールズ系で可愛いアワード参考webデザインのまとめ
  4. 素敵なwebサイトのデザインを研究してみる(NEVER、LINE編)
  5. Google Maps APIの特設公式サイトが面白い!

関連記事

PAGE TOP