スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
RSSフィード twitter Google Bookmarks スポンサーサイトをはてなブックマークに登録 はてなブックマーク
タグ /

今のうちにチェックしておきたいCSS3 ボタンのサンプルでよく分かるその特徴

CSS3 button

動作しないブラウザがある以上は今すぐは難しいかもしれませんが、CSS3ボタンのサンプル集です。フォトショップなどで編集していた部分も、これからはCSSで指定できてしまうんですね。これは今のうちにチェックしておいた方がいいかも。

CSS3をボタン作成ツールで体感

※CSS3未対応のブラウザでは正常に動作しませんのでご注意を

Button Maker

CSS3がどんなものか、実際に触れることで堪能できます。

個人的には、ドロップシャドウやグラデーションの色合いが素晴らしいと思う。

Button Maker

CSS3プロパティジェネレーター

フォトショップのような感じでグラデーションが細かく設定出来ます。これもCSS3の特徴ですね。

CSS3プロパティジェネレーター

Source Photoshopライクな操作で手軽に作れるCSS3ジェネレーター

CSS3ボタンのサンプル集

building beautiful buttons with css gradients

こちらも画像を使わずにCSSだけでグラデーションなどを表現

building beautiful buttons with css gradients

CSS3 Box-Shadow with Inset Values -- The Aqua Button ReReVisited!

コードが見事なのでメモ。アクアボタンまでできるんですね。

The Aqua Button ReReVisited!

HTML:

CSS:

Cool Sprites -- Free overlapped CSS menu using CSS Sprites

透過をCSSで表現

Cool Sprites -- Free overlapped CSS menu using CSS Sprites

Create a Slick Menu using CSS3

こんな微妙な光加減まで調節できる

Create a Slick Menu using CSS3

Make your buttons look super awesome

角に丸みを付けたり

Make your buttons look super awesome

Shiny Happy Buttons

グラデーションで立体感を付けることも可能

Shiny Happy Buttons

CSS3はまだ実用的な段階には至っていませんが、普及するようになれば、サイトの表現力がグッとアップしそうです。その時は、もっとサイト構築が楽しくなりそうですね。

以下の記事もすごく参考になるので、よろしければどうぞ

Source css3を直感で学べそうなフリーのジェネレーターを公開しているCSS3 Sandbox

Source [CSS]CSS3で何ができるの? という時にみておきたいサイト集

関連記事

RSSフィード twitter Google Bookmarks 今のうちにチェックしておきたいCSS3 ボタンのサンプルでよく分かるその特徴をはてなブックマークに登録 はてなブックマーク
タグ / CSS
コメント一覧
コメントを残す


管理者にだけ表示を許可する

 | BLOG TOP | 

人気記事

スポンサードリンク

新着記事

プロフィール

日刊ウェブログ式を運営するナカタと申します。まだ開設して日も浅い拙いブログですが、どうぞよろしくお願いします。

リンク

LOOMICDESIGN

タグクラウド

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。