HTML5+CSS3 サンプル集

【テンプレート一覧に戻る】

CSS3を使った美しい横メニューの作り方

2012.05.08.tue

参考サイト：http://weboook.blog22.fc2.com/blog-entry-318.html

画像を使わずCSS3で表現した横メニュー。
作り方を参考に再現してみる。

• html
• CSS
• JavaScript
• PHP
• Perl

グラデーションの配色はこのような感じ。

CSS3だけで動きのある縦並びメニューボタン

2011.12.01.thu

データ元：http://weboook.blog22.fc2.com/blog-entry-256.html#

簡単なコードで作れるメニュー。
ｊQueryを使うよりはるかに敷居の低いテクニックでできる。

• css3
• Javascript
• jQuery
• Google
• まとめ

ついでに枠ごと動くパターン。
Google Chromeでは滑らかに動くけど、Firefoxではカクカクしている。

• css3
• Javascript
• jQuery
• Google
• まとめ

クリックで画像が変化するボタン

2011.11.24.thu

データ元：http://img.usabilitypost.com/0812/active_button/index.html

ボタン自体もCSS3で作成。
マウスオーバーのないスマートフォンに役立つかもしれない。

リンクButton

次はアコーディオンメニー。

スクロールしてもついてくるSNSボックスの改良

2011.11.17.thu

データ元：http://webimemo.com/web/192

SNSアイコンの真横にあるリンクやマウスオーバー効果が無効になる問題を解消。

カーソルを当てて変化するボタン

2011.10.14.fri

CSS3とは関係ないけど、画像をスライドさせてマウスカーソルを当てるとボタンが変化するサンプルを作成。

使用するのは、上のように縦につなげた画像一枚。
画像を複数用意する必要がないのも利点。

aタグではなく、spanタグで表現しています。

マウスオーバーでアニメーションするメニュー

2011.09.27.tue

データ元：http://gihyo.jp/design/serial/01/imadoki_ui/0011

マウスカーソルを当てると背景色が現れるメニューリスト。

写真ギャラリー

2011.09.07.wed

データ元：http://designshack.co.uk/tutorialexamples/HoverEffects/Ex5.html

マウスカーソルを当てると明るく光るように見える。
なぜか上100pxくらい、写真にカーソル当てても無反応なエリアがある。
上部にPaddingを設けて回避。原因調査中。

解決！
右に置いている外部SNSへのリンクアイコンが干渉してた。

リボン風の見出し・その1

2011.8.29.mon

データ元：http://www.minimo.jp/?p=351

リボン風の見出し・その2

2011.8.29.mon

データ元：http://www.hyper-portfolio.com/article/?id=90

一つ目とは違う作り方。

SNSアイコンにマウスオーバー効果

2011.8.26.fri

データ元：http://weboook.blog22.fc2.com/blog-entry-284.html

スタイルシートにimg:hoverを追加。
簡単だった。

セロテープの表現

2011.08.25.thu

データ元：http://www.webdesignshock.com/css3-box-shadow/

キュゥべえ

2011.08.25.thu

データ元：http://jsdo.it/norahiko/m1WT

Page Top