タグ

ボタンに関するohnishiakiraのブックマーク (6)

  • css-lecture.com - css lecture リソースおよび情報

    This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

  • Twitter で使われている綺麗な CSS3 ボタンの様なものを実装する CSS のコード

    ちょっと綺麗なボタンを実装したいなと思っているのに中々簡単に実装できないことがあると思います。ジェネレーターを使ってもイマイチ作れなかったりする人もいると思います。 以下のコードを貼りつければ一瞬でこのような Twitter みたいなボタンを実装できます。社内ツールとか適当に作ってるサービスなどに組み込んでください。 form input[type=button], form input[type=submit] { color:#fff; text-align: center; background-color: #22AAFF; padding: 5px 10px; border-radius: 5px; /* CSS3 */ cursor: pointer; text-shadow: 0px 0px 2px #39d; background: -webkit-gradient(lin

  • fladdict » スマホのUI考 〜 ボタンについて

    SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ

  • 最近のインターフェイスデザインから学ぶ、7種類のボタンデザイン

    ユーザーのアクションを誘う購入や送信や検索ボタンなど、最近のインターフェイスデザインでよく見かける7種類のボタンデザインを紹介します。 Common elements used in interface button design [ad#ad-2] 下記は各ポイントを意訳したものです。 また、元記事ではそれぞれのボタンを作成するPhotoshopのチュートリアルも掲載されています。 1. テクスチャを使ったボタン 2. パターンを使ったボタン 3. 3Dを使ったボタン 4. 1ピクを使ったボタン 5. 背景をインデントしたボタン 6. グロウを使ったボタン 7. ハイライトを使ったボタン 1. テクスチャを使ったボタン テクスチャはボタンにわずかな奥行きを与え、クリックが可能であることが分かるようにする素晴らしいテクニックです。

  • ソーシャルブックマーク&投稿ボタンの設置方法 | SEOモード

    ©Owen W Brown 先週「Google+1」の発表がありましたが、その少し前にはTwitterが「フォローボタン」を出しており、最近は何かとソーシャルブックマークやソーシャルメディア関連のボタンを設置することが増えていますね。「いいね!」を付けて欲しいとか、はてなブックマークボタンを設置してほしいと、といった要望があって対応することも多くなっています。 必要になる度に探すのは手間なので、一か所で参照できるようメモをしていたのですが、せっかくなので少し内容に手を加えて共有したいと思います。 ※ボタンはそれぞれ1種類ずつしか掲載していませんので、違う種類はリンク先でご確認ください。

    ソーシャルブックマーク&投稿ボタンの設置方法 | SEOモード
  • CSS3を使ったボタンデザイン | チバのブログ

    CSS3の「これは!」という機能を紹介するエントリーの第2回。CSS3で作るボタンデザインを紹介します。 前回は画像を使わずに角丸を作るborder-radiusというプロパティの紹介だったのですが、ただの仕様書の写しのようになってしまいました...。 前回の反省も踏まえて、今回はサンプル付きで紹介したいと思います。 ボタンのデザインの参考にしたのはButton Design Showcaseというエントリー。 Button Design Showcaseの中から、CSS3で作れそうなものをいくつかピックアップしました。 ※サンプルはFirefox3.5~、Webkitでしか確認していません。 かっこいいボタンがいくつもあったのですが、CSS3の新機能を紹介できそうなボタンのデザインとして以下の3つを選びました。 アップル風のボタン 透過pngのグラデーションを使ったボタン RGBa

  • 1