Web Designing 2010年6月号「特集1:1pxで変わるあなたのサイト」サンプル&リンク集
注意:圧縮データのダウンロードには、本誌の目次に掲載しているIDとパスワードが必要です。また、ダウンロードしたサンプルファイルに含まれている「readme.txt」をよく読み、注意してご利用ください。
カテゴリ:ナビゲーション
1px単位のポイント満載! なグローバルメニュー(P052)
角丸を輝かせる1pxの光! ツルッとしたボタンメニュー(P053)
カテゴリ:セレクトメニュー
jQueryを使って1pxプラスしたセレクトメニュー(P054)
カテゴリ:写真
たった1pxの「すきま」が写真を印象的に(P055)
※ダウンロード用サンプルデータにpsdファイルを同梱しています。1pxで魅せる写真のロールオーバー効果(P055)
カテゴリ:テキスト
1pxでできる見出しの装飾あれこれ(P056)
テキストリンクの下線に1pxの変化を(P056)
ロゴ・アイコン
1pxで光沢感をアップ! リアルな型押しロゴ(P058)
※ダウンロード用サンプルデータにpsdファイルを同梱しています。1pxの明るいラインで作る映画のタイトル風ロゴ(P059)
※ダウンロード用サンプルデータにpsdファイルを同梱しています。1px単位で作り込み! Illustratorだけで作るドットアイコン(P059)
※ダウンロード用サンプルデータにaiファイルを同梱しています。
ボタン
1pxパターンをかぶせたテクスチャ感たっぷりなボタン(P060)
※ダウンロード用サンプルデータにpsdファイルを同梱しています。1px動かして「押した」ように見せるボタン(P061)
1pxのボーダーで表現する擬似3Dボタン(P061)
1pxの「縁取り」「影」「角落とし」で表現するボタン(P062)
※ダウンロード用サンプルデータにpsdファイルを同梱しています。1pxのラインでボタンを引き締める(P062)
※ダウンロード用サンプルデータにpsdファイルを同梱しています。
カラム・ボックス
1pxのハイライトがボックスを際立たせる(P064)
1pxでリアルに! ボックスの区切りを画像で見せる(P065)
※ダウンロード用サンプルデータにpsdファイルを同梱しています。角を1px取ってすっきりしたボックス(P065)
あらゆる要素を1pxのボーダーで囲った繊細カラムレイアウト(P066)
1pxの線でコンテンツを区切るミニマル表現(P066)
背景
色が変わる! 1pxで作る汎用的な斜線背(P067)
デザイン
あえて「ドット落ち」! 1pxずつ崩れ落ちる斬新なデザイン(P068)
※ダウンロード用サンプルデータにpsdファイルを同梱しています。
表
クリエイティブな表を1pxで見やすく(P070)
1pxの線&余白でキュッと引き締める表(P071)
1pxの破線で実現するスタンプ風の表(P072)
コラム
CSS3のプロパティを使った1pxのさりげない立体表現(P057)
1pxの線&余白でキュッと引き締める表(P071)
「ブレ」も「ボケ」も見逃せない!Illustrator/Photoshop/Fireworksで1pxデザインをするときのコツ(P063)
「1px」をコンセプトにした素敵なWebサイト(P069)