#cssbutton

手元の画像やオンラインの画像から、このグラデーションいいな、という箇所を抽出し、CSS3 グラデーションのスタイルシートを生成するオンラインツールを紹介します。

Gradient-Scanner

  Gradient-Scannerの使い方は簡単です。 まず、画像を「Browse」ボタンをクリックしてアップロードします。 ※画像は手元の画像だけでなく、URLでも指定できます。

使用した画像は「Clear blue Tropical Water」です。

画像から抽出するグラデーション箇所を指定します。

グラデーションを抽出したキャプチャ

抽出するバーは、縦横斜めに使用できます。

グラデーションを抽出するバーのキャプチャ

グラデーションの抽出が決まったら、「Next」ボタンをクリックします。

グラデーションを抽出したキャプチャ

CSS3 グラデーションのスタイルシートは、下部に生成されます。 また、抽出したグラデーションの色数が多いときは、バーをスライドすることで調整できます。

更に細かい調整をしたいときは、「Next」ボタンをクリックします。

グラデーションの調整画面のキャプチャ

グラデーションの調整画面では、各色の変更が可能です。

CSS3をはじめとする、スタイルシートのさまざまなテクニックを使って実装するナビゲーションを紹介します。 ※一部、jQueryを併用するものもあります。

The Apple.com navigation menu created using only CSS3 デモページ CSS3だけで実装したApple.com風のナビゲーション。

CSS3 Dropdown Menu デモページ CSS3で実装するドロップダウン型のナビゲーション。

Sexy CSS3 menu デモページ 縫い目風のかわいいデザインのナビゲーション。

  Create Windows 7 start menu using CSS3 only デモページ CSS3だけで実装したWindows7のスタートメニュー。

Creating a pure CSS dropdown menu デモページ CSSだけで実装したリスト要素のドロップダウン。

Awesome Cufonized Fly-out Menu with jQuery and CSS3 デモページ ダイナミックなアニメーションがたのしいナビゲーション（w/ jQuery）。

Slide Down Box Menu with jQuery and CSS3 デモページ ボックスがアニメーションで次々に表示されるナビゲーション（w/ jQuery）。

Halftone Navigation Menu With jQuery & CSS3 デモページ ハーフトーン（網点）のアニメーションが面白いナビゲーション（w/ jQuery）。

Making a CSS3 Animated Menu デモページ CSS3アニメーションを使ったナビゲーション。

CSS3 Minimalistic Navigation Menu デモページ アイコンからバーがアニメーションでスライドするナビゲーション。

Display social icons in a beautiful way using CSS3 デモページ CSS3アニメーションでツールチップをふんわり表示。

Animated Nav CSS3アニメーションでバーが延びるナビゲーション。

Flexible Nav CSS3アニメーションで伸縮しアイコンを表示するナビゲーション。

Vertical Sliding Nav 垂直方向にパネルがスライドするナビゲーション。

Fading Button Background Images With CSS3 Transitions デモページ 背景画像をフェードのアニメーションで変更するナビゲーション。

CSS3 dropdown menu デモページ IE6, 7も考慮した、CSS3で実装するドロップ。

Using CSS3 Transitions to create rich effects デモページ アニメーションで拡大・回転するナビゲーション。

Creating a Fancy menu using CSS3 and jQuery デモページbr /> グラデーションも美しいLave Lamp風ナビゲーション（w/ jQuery）。

CSS only 'Click droplist menu' クリックで開閉するメガドロップダウン。

CSS3 LightBox Menu アニメーションで開閉するLightbox風のドロップダウン。

iPad - Slide / Hide Menu アニメーションで順番にパネルが開閉するドロップダウン。

CSS3 - Playing Cards Menu 画像を使用しない、トランプを模したナビゲーション。

CSS3 animated dropdown menu#28 アニメーションとグラデーションが美しいドロップダウン。

Sweet tabbed navigation using CSS3 デモページ CSS3のさまざまなプロパティを使ったタブナビゲーション。

Flared Borders with CSS デモページ すその広がりもCSSで作成したタブナビゲーション。

Styling Full Width Tabs with CSS3 デモページ フルワイドのスタイリッシュなタブナビゲーション。

Breadcrumb Navigation with CSS Triangles デモページ 三角もCSSで作ったパンくず。

「We Love Buttons」は画像を使わずにCSS3だけでボタンを作れるCSSフレームワークです。

カラフルなボタンからdisabled状態のものまで、様々なボタンがありました。 Webkitに対応しているとの事なので、iPhoneやAndoroid用サイトにうってつけですね。

使い方

使い方は簡単で、CSSを読み込み後にクラスを指定するだけになっています。

1<a href="#URL" class="*****">Title</a>

個人および商用利用も可能との事。 覚えておいて損はなさそうです。

Website: http://www.wearepico.com/buttons/

まだまだ対応ブラウザの問題から、コーポレートサイトなどでは導入が難しいCSSですが、スマートフォンなど環境が整ってきたこともあり、利用し始めているという方も多いと思います。今日紹介するのは、角アール、シャドウなどCSS3を利用した表現を簡単に実装できるCSS UIフレームワーク「CSS3 Button UI」です。

予め、CSSが設定されており、簡単なクラスを割り当てるだけで、CSS3をのボタンを再現することができます。

詳しくは以下

コードの呼び出し例は以下のとおり。

上記は画像で貼り付けてありますが、マウスオーバーの処理もセットされていて、実用的に利用できそうです。その他にも角アールのものや文字の前に画像を表示させるものなどがセットされています。その他のデモは配布元の「CSS3 Button UI」からご覧ください。ボタンはCSS3でとお考えの方は是非どうぞ。

この方法、便利ですね。デザイナーさんの間では有名なのかな。

マウスを当てるとちょっと色が変わるボタンってありますよね。それを簡単につくる方法です。

↑ こういうヤツ。無駄にGIFアニメ作ってみた！

この方法、CSSのa:hoverクラスとopacityを使うことで画像も不要になっています。opacity指定ができるブラウザのみの対応になりますが、覚えておいても損はないかと。

コードの詳細は元サイトへどうぞ。

» 超シンプル！hover画像作る必要ナシ、CSSだけで、画像をロールオーバー！｜しらさかブログ

これ、Adobe使いにはいいかも。面倒なCSS3でのドロップシャドウとかそういうのをPhotoshopライクなインターフェースで作ってくれますよ。

↑ これはわかりやすいｗ。全部ブラウザからいけるのがポイント高いです。

↑ 左下からコードも取得できます。こちらもわかりやすいですな。

他にも似たようなツールがありますが、これが一番直感的なのではないでしょうかね。おすすめです。

» Layer Styles