タグ

ブックマーク / www.simplexsimple.com (7)

  • Error 404 - SIMPLE*SIMPLE ~ ウェブ職人のための小粋なネタ帳 ~

    スクロールしても消えないドロップシャドウの作り方 July 30, 2007 4:40 PM written by Gen Taguchi メモ書きもかねてエントリー。ページをスクロールしていってもページの上や下にドロップシャドウを貼り付けておく方法。 ↑ このようなドロップシャドウですが・・・。 ↑ スクロールしても付いてきます。 サイトに立体的な効果をつけたいときに使えそうですね。いろいろ応用も利きそうです。 なお、PNGの透過部分を使っているのでInternet Explorerでは動きません。実際に動いているデモはこちらから。 詳しい作業ステップは以下のサイトからどうぞ。 » Scrolling Drop Shadows | Zooiblog Info: デザイン全般 | 固定リンク | コメント (0) | トラックバック (2) | ↑ この記事のトラックバックURL (

  • プログラマー、デザイナー、システム管理者のためのツール箱『tlbox』 | SiMPLE*SiMPLE

    すでに各所で既出ですがメモとして。 便利なツール類をまとめて保存しておけるtlboxですが、ウェブデザイン用にくわえ、システム管理者のツールも揃ったようですね(前からありましたっけ?) これは使えそうですね。ツールを勉強することで新しい機能を知ることもできますしね。 ご利用は以下からどうぞ。 » tlbox – System Administration Tools

    プログラマー、デザイナー、システム管理者のためのツール箱『tlbox』 | SiMPLE*SiMPLE
    mac10
    mac10 2007/06/12
  • CSSと画像でちょっと凝ったエフェクトがかかったボタンを作る方法 | SiMPLE*SiMPLE

    クリックするとボタンがへこみ、さらにラベルのテキストが1px下がってくれる、というちょっと凝ったエフェクトがかかったボタンの作り方が紹介されていました。 簡単な画像とCSSで実現できますよ。 ↑ このようなボタンをクリックすると・・・。 ↑ このようなエフェクトがかかります。 詳しい設置の方法は以下からどうぞ。ちょっとした小技ですが、知っておくと便利ですね。 » How to make sexy buttons with CSS

  • Error 404 - SIMPLE*SIMPLE ~ ウェブ職人のための小粋なネタ帳 ~

    検索結果が複数ページある場合のスマートな見せ方 April 3, 2007 4:15 PM written by watanabe CDやDVDのジャケットを検索できるAllCDCoversには、随所におっとするようなインターフェースの工夫が見られます。100SHIKI PR Board参加ブログであるsta la staでも紹介されていましたが、その検索結果が複数ページにわたっている場合の表示が印象的だったので、エントリー。 » AllCDCovers 検索結果が複数ページにわたっている場合、自分が見たい結果があるページを探すためには、一ぺージずつ見ていくか、「ここらへんか」と推測してページを選んでいくかしなければなりません。でも、このAllCDCoversでは、ページ番号にマウスをのせると、「○○~○○」とそのページの最初と最後のものを表示してくれます。 ↑ ページ番号にマウスをのせる

  • フォントの色と大きさと背景色の微妙な関係 | S i M P L E * S i M P L E

    フォントの色と大きさと背景色の微妙な関係 December 26, 2006 10:00 AM written by 8maki 12月1日からクリスマスまで、日替わりでウェブ制作のちょっとしたTipsを紹介する「24 ways」が今年も開設されているようです。 その24 waysから一つご紹介。 » 24 ways: Cheating Color フォントの色と大きさと背景色についてのTipsです。 わかりやすく例を出していきましょう。 架空の会社のロゴを例にしてご説明します。まず、大きいフォントで「Double Dagger」という社名があり、その下に小さいテキストが入っています。よくあるデザインですよね。さて、このデザインについて見ていきましょう。 ■ 薄い背景に明るいフォントの場合 さて、下に2つのロゴがあります。 左のロゴは色の統一感のルールに従って社名とテキストを同じ色にしてい

  • 『ウェブ2.0 HOW-TO デザインガイド』がよくまとまっています | S i M P L E * S i M P L E

    なんだか前にもこういうまとめを紹介しましたが、また良くまとまっているのがあったのでご紹介。 Web design scratchのサイトで「Web 2.0 how-to design guide」なるまとめがありました。 » Web 2.0 how-to design guide 15の項目でまとめられていますね。 Simplicity(とにかくシンプルに!) Central layout(真ん中に寄せるレイアウトで) Fewer columns(段組は少なめに) Separate top section(トップ部分は分けて目立たせよう!) Solid areas of screen real-estate(レイアウトにはメリハリをつけて) Simple nav(ナビゲーションはシンプルに!) Bold logos(ロゴは大きめに!) Bigger text(フォントも大きめに) Bold

    『ウェブ2.0 HOW-TO デザインガイド』がよくまとまっています | S i M P L E * S i M P L E
  • Web 2.0のデザインパターン | S i M P L E * S i M P L E

    Web 2.0のデザインパターン November 24, 2006 12:15 PM written by Gen Taguchi メモ書きにてエントリー。訳しただけだけど。 Pixel Acresにて「The visual design of Web 2.0」という記事があがっています。Web 2.0っぽいサイトのデザインをパターン化したものです。見た目がすべてではありませんが、とっても重要なのは間違いないです(「見た目いけてないから他のサイト行こうっと」はよくありますよね・・・)。 さて、ではポイントをば。 ■ グレーの次はグリーンだ! 明るいグリーンが流行です。下記サイトをみてもそうですよね。 ■ 角丸命! Rounded Cornersは新しい標準す。 ■ 「無料!」印がキーワード まずはトライアルができるのがWeb 2.0の特徴。無料の文字もいれときましょう。 ■ は?素材集す

  • 1