タグ

CSSとsampleに関するmoqadaのブックマーク (6)

  • シンプルにクールで使用感のよいボタンを作るサンプル:phpspot開発日誌

    Particletree Rediscovering the Button Element Creating a consistent interface for your users is a constant struggle for every application designer. シンプルにクールで使用感のよいボタンを作るサンプル。 次のようなボタン、あったらつい押したくなりそうです。 フラットなデザインで、押した感じが心地よいです。 単純に、ボタンタグで <button type="submit" class="positive"><img src="/images/icons/tick.png" alt=""/>Save</button>  のように定義してスタイルしている感じで、マークアップとCSSが公開されています。 ボタン作成の際の1参考にできそう。

  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
  • JavaScriptを使わずにやるimg要素のロールオーバーサンプル

    題の前に、CSS Sprite をグローバルナビゲーションで使うのは何かが違うと思うのはボクだけかしら?(テキストをtext-indentで飛ばして、ロールオーバーさせるタイプの事を指してます) 昔作ったサンプルでそんなようなのがありました。 横並びメニューのロールオーバーをJavaScriptを使わずCSSで実現 CSS Spriteを有効に活用する場面は、あくまでも背景画像として配置されているものを一枚画像にして管理する点にあると思ってて、例えば以下のような場合。 ページタイトルの背景画像がページ毎に変わる場合に全ページのページタイトル用画像を一枚でまとめる。 アイコン+テキストという組み合わせの場合に、アイコンを背景として使う。 その他、来背景として使う予定だった画像を一枚にまとめる。 とかが、ぱっと浮かびました。 んで、グローバルナビゲーションに限っては、img要素で配置する事

    JavaScriptを使わずにやるimg要素のロールオーバーサンプル
  • 新規でサイトを作るのに使えそうなの一式。Ver 2|CSS HappyLife

    新しいdigiper staff blogが始まりました。 PICTOGRAM CHANNEL - ピクトグラム チャンネル タイトルまんま、ピクトグラムを扱ってるサイト。社員ブログに型は無いので書きたいのを自由に書けるんです。 何気に、同じ職種なので負けないように頑張ります。っていう宣戦布告。 さて、以前公開した新規でサイトを作るのに使えそうなの一式。(あの人のパクりじゃないんだからっ!)を自分も使ったりしてたのですが、なんだかいけてない部分が目立ってきたので、修正してみました。 Ver2って言うのは、区別したいだけでたぶん中身はそこまで変わってません。 むしろ人によっては前のが相性が良いかもしれませんので、お好きなのを使ってもらえると幸いです。 えっと、ダウンロードは以下よりお願いします。 新規でサイトを作るのに使えそうな一式。Ver 2をダウンロード(zip:18kb) ちなみにダウ

    新規でサイトを作るのに使えそうなの一式。Ver 2|CSS HappyLife
    moqada
    moqada 2008/06/11
    テンプレートとcssのセット
  • CSS・JSを活用して高度なUIを作成するサンプル集「The Highly Extensible CSS Interface」:phpspot開発日誌

    The Highly Extensible CSS Interface CSS・JSを活用して高度なUIを作成するサンプル集「The Highly Extensible CSS Interface」。 デモサイトのようなリッチなUIを実現するためのサンプル集 Part I: The Foundation Part II: CSS Selectors & jQuery Part III: Adding Ajax Interactivity Part IV: Testing for Extensibility jQuery、Ajaxなどを活用してページを作成していく部分はページ作りにおいて非常に参考に出来る部分が多いです。 IE7, FireFox2, Safari2.x 以降が推奨環境となっているようです。

    moqada
    moqada 2008/04/04
    なかなか使えそう
  • 100%ピュアCSSのレイアウトサンプルが見られる『750 pixel Pure CSS Layouts』 – creamu

    CSSのサンプルから簡単にサイトが作りたい。 そんなあなたにおすすめなのが、『750 pixel Pure CSS Layouts』。100%ピュアCSSのレイアウトサンプルが見られるサイトだ。 このサイトでは、750px、900px、および100%(ブラウザいっぱい)のサイズのCSSレイアウトがたくさん紹介されている。 サイドバーも左だけのもの、右だけのものや、3カラム、4カラムなどがあってとても参考になる。 CSSはリンク先のソースを見ればOKだ。 100%ピュアCSSのレイアウトサンプルが見られるサイト、チェックしてぜひ使ってみてはいかがだろうか。 いろいろとインテリアショップを見に行って部屋のレイアウトを変えてみた。すごくよくなって気持ちいい☆

    moqada
    moqada 2008/03/27
    750px, 900px, 100%のcssレイアウトサンプルが観れる
  • 1