タグ

cssとuiに関するkistame228のブックマーク (4)

  • 「吹き出し」をツールチップとして実装するjsいろいろ

    マウスオーバー等で吹き出しが 現れるツールチップのまとめです。 jQueryが殆どになります。 吹き出しは画像やcssを変更 すれば別の形状にする事も可能 なのでうまく活用したいですね。 吹き出し以外のツールチップを実装できるjsをお望みでしたら以下の記事が参考になりそうです。 15 jQuery Plugins To Create A User Friendly Tooltip 40+ Tooltips Scripts With AJAX, JavaScript & CSS vTip 凄く可視性が高い吹き出し。フェードインで表示し、マウスオーバーの間はマウスストーキングします。使いやすそう。対象がテキストでも画像でもOK。試しに入れてみました。以下のリンクにマウスをあわせるとバルーンが現れます。角はcssで丸くしました。デフォルト状態だとマウスカーソルにarrow部分が重なってしまうので

    「吹き出し」をツールチップとして実装するjsいろいろ
  • ブラウザー上で動く iPhone-style トグルスイッチ

    ここのところ「iPhoneアプリUIの大半(ひょっとしたらアプリすべて)をHTML+JavaScript+CSSで作ることはできないか?」に挑戦している私。 そのためにまずは部品作りからとりかかっているのだが、昨日から今日にかけて作ったのは、プログレス・バー、スライダー、トグルスイッチなどの「連続値・不連続値」を表示・入力用UIコントロールをウェブページ上で実現するためのJavaScriptライブラリ。 見た目(Look&Feel)はCSSを使って自由に指定できるように作りつつ、シンプルでありながらいろいろな場面で使い回しがきくライブラリを作りたかったので、何度もリファクタリングを繰り返してしまったが、なんとか形になってきた。 ということで、そのライブラリ(jTouchControl version 0.10)を使ったiPhone風トグルスイッチを公開。一応、Safari (4.0),

  • Styling even more form controls | 456 Berea Street

    This is a follow-up to my previous post about Styling form controls. For some background info and comments, you may want to read that post. In short, this is a reference that shows how differently form controls are rendered by different web browsers and operating systems. It also shows that little can be done to make form controls appear the same across browsers and platforms. I’ve taken screensho

  • DiggライクなUIを作る色々:phpspot開発日誌

    DiggライクなUIを作る色々。 Digg買収で競り合い、という話題はさておき、DiggのUIを実装するサンプル集。 Clean Tab Bar Digg-like using CSS - Diggライクなタブバーを作成 Digg-like navigation bar using CSS - Diggライクなメニューバー Simple CSS vertical menu Digg-like - Digg ライクなドロップダウン Diggのシンプルだけど洗練されたUIをサイトに入れてみたい場合に使えますね。 (一部ブラウザで動作しないものもあるので注意が必要です) Digg UI Library なんてのが出て欲しいですね。

  • 1