CSSグラデーションのちょっとしたテクニック #1
リリースを間近にひかえたFirefox 3.6で対応されるので、そこかしこで取り上げられているCSSによるグラデーション。基本的な書き方はIntroducing CSS Gradientsやcss gradients in Firefox 3.6を始めとして腐る程あるのですっ飛ばすとして、実際にボタン等で利用する時にどうすれば簡単に書けそうかということをちょっと考えてみようとかいう話。勢いで#1とかつけてしまった……。 button要素にCSSによるグラデーションをかけるには以下のように書くことになる。 button { background-image: linear-gradient(top, rgb(204, 204, 204), rgb(102, 102, 102)); background-image: -moz-linear-gradient(top, rgb(204, 204
CSS3を使ったボタンを簡単に作成できるサイト「CSS3 Button Generator」 | ライフハッカー・ジャパン
「CSS3 Button Generator」は、CSS3を使ったボタンが、誰にでも簡単に作れちゃうサイトです。色や影やグラデーションをお好みに応じて設定できますよ。さらに、他のユーザが作ったボタンも閲覧可能です。コードもはき出してくれるので、コピペですぐに利用できます。 以下に使ってみた様子を載せておきます。 まずは、CSS3 Button Generatorにアクセスしましょう。 色などを設定します。テキストの影など細かい部分も調整できます。 右側に、コードが自動的に生成されるので、コピペして使いましょう。さらに「SAVE」すると、他のユーザと共有できます。 他のユーザが作ったボタンがずらり。いいなーと思うボタンがあれば、そのコードも取得できます。ボタン作成を考えている方は、是非お使いください。 CSS3 Button Generator [via delicious] （カメきち）
ページの端っこに常に表示させるボタン実装用jQueryプラグイン「EdgeButton」:phpspot開発日誌
Plugins | jQuery Plugins ページの端っこに常に表示させるボタン実装用jQueryプラグイン「EdgeButton」。 サイト巡回しているとたまに見かける、ブラウザの端っこについている次のようなボタンを簡単に実装できるjQueryプラグインです。 押下時に「ページの上にスクロールさせる」機能を実装できユーザビリティ的には上げられそうな場面がありそうです。 利用法としては、次のような感じです。 $(element).edgeButton({ buttonText: "ボタンのテキスト", buttonPrefix: "ボタンのプレフィックス", buttonDirection: "ボタンの配置位置 right, left で指定", buttonFunction: "ボタン押下時の動作指定" }); 自前でやるとなると、ボタンを配置して固定してクリック時にスクロールして
12 Excellent CSS3 Button and Menu Techniques - Web Design Ledger
37 Comments I use a few CSS3 tricks on my blog and it’s important to not completely base your design off of CSS3 as there are still some browser compatibility problems and some people may not be seeing what you think they are. (*ahem* IE). That is true. Now, being 2 years later, IE has gotten better (still bad, but better). IE9 supports css3 and using the PIE library, you can design in css3 with s
CSSで色指定が可能な立体的でクールなボタン実装サンプル:phpspot開発日誌
Liquid & Color Adjustable CSS Buttons - CSS/XHTML/Photoshop Tutorial When working on a large site with multiple buttons, it can be quite tedious to make all the buttons in Photoshop.CSSで色指定が可能な立体的でクールなボタン実装サンプル。 次のようなクールなボタンが作れます。background-color の指定でボタンの色が変えられるのでなかなか良いです。 だめかと思われたIE6でも動作してます。 追記） CSSのみでIE6.0対応しているわけでなく、一部ＪａｖａＳｃｒｉｐｔを使用しているみたい。 ご連絡いただきましてありがとうございました。 関連エントリ CSSでクールなボタンを作るまとめ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]CSS3を使用した素敵なボタンを実装するチュートリアルの決定版
Photoshop Vip » 保存版！クリックしたくなる「ボタン」デザインのPhotoshop用無料PSDファイル42個まとめ