ページのCSSの色指定から、使用しているカラーを一覧で表示してくれます。 I Like Your Colors 入力欄にページのURLを入力し「Get colors」をクリックすると、色相ごとにグルーピングされたカラーリストを表示します。
ページで使用している色からカラーリストを作成する -I Like Your Colors
ページのCSSの色指定から、使用しているカラーを一覧で表示してくれます。 I Like Your Colors 入力欄にページのURLを入力し「Get colors」をクリックすると、色相ごとにグルーピングされたカラーリストを表示します。
ちょっと変わったPhotoshopのブラシ
Photoshop Brushesでは、ネジ、バーコード、植物の葉、動物の頭蓋骨や昆虫、血などをはじめ、面白いPhotoshop用のブラシを配布しています。
Photoshopを便利にする30のショートカット | コリス
Web Design WallでPhotoshopの30のショートカットが紹介されていました。 Photoshop Secret Shortcuts 下記に、コマンド別に紹介します。 ※Win XP+Photoshop CS2でのコマンドです。 Macの場合は、下記置き換えてください。 Ctrl = Cmd Alt = Opt [選択ツール] + [space] 選択範囲を作成中、スペースキーで移動できます。 [Ctrl] + [マウスのスクロールアップ or ダウン] ドキュメントを上下のスクロールではなく、左右にスクロールできます。 文字パレットのフォントリストにカーソルを入れて、[↑ or ↓] フォントのリストを一つずつ表示します。 テキストを選択して、[Ctrl] + [Shift] + [< or >] フォントサイズを2pt単位で変更できます。 [Ctrl] + [Alt]
絶妙なカーブを使った一味違うボタン画像 -Glossy web 2.0 button
微妙なカーブに沿って、グラデーションがかかっているボタンです。サイトでは、チュートリアルと共にPSDを配布しています。 下記は、PSDをダウンロードして、テキストを変更したものです。 Glossy web 2.0 button PSDのダウンロードはページ下部の「Download PSD」ですが、リンクの記述が間違っていたため、下記にURLを記載しておきます。 http://photoshoplovr.com/wp-content/uploads/psd/glossy_button.psd
無料のPhotoshop用のグラデーション ファイル集
無料で利用できる、Photoshop用のグラデーション ファイルの紹介です。 テーマ別のグラデーション
汚した感じがかっこいい、グランジ風のフリーフォント集 | コリス
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
フリーの高品質なアイコンがダウンロードできるサイト -iconspedia
iconspedia キャプチャ画像の国旗 [ad#ad-2] ダウンロードできるアイコンは基本的にフリーで、icoとpng(32x32, 48x48, 64x64, 128x128, 256x256)形式になっています。 ライセンスはアイコンにより異なり、フリーのものやリンクを記載するなど条件付きのものもあります。
[CSS]気をつけたいIE 7のバグ -CSS-Discuss
CSS-Discussにアップされている「IE 7 Bugs」の意訳です。 省略している箇所も多数あるので、原文も参照ください。 Internet Explorer Win Bugs - css-discuss 注意： バグには、IE7のみでなく、IE 5, 5.5, 6のものも含まれています。 公開されてから時間が経っているためか、ちょっと古いものもあります。 IEのフォントサイズのバグ フォントサイズの継承 IEの相対指定のフォントサイズの継承は、うまく機能しません。 相対指定を行う場合、emより%で指定を行う方が便利です。もし、em指定を行う場合は最初に%指定を行ってください。 例： body{ font-size: 100.01%; } ※100%の代わりに100.01%を使用するのは、Operaでの継承バグの回避のためです。 キーワード指定でのサイズ フォントサイズに「small
IEでのCSSのバグを回避するhasLayout | コリス
IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値（read-only） false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ
画像をアスキーアートにする -ASCII Art Generator
<span style="color: #699e9b;"></span><span style="color: #6a9e9b;">#</span><span style="color: #6a9e9b;">#</span><span style="color: #6b9e9b;">#</span><span style="color: #6b9e9c;">#</span><span style="color: #6b9e9b;">#</span><span style="color: #6b9e9b;">#</span><span style="color: #6b9e9b;">#</span><span style="color: #6a9e9b;">#</span><span style="color: #6a9e9b;">#</span><span style="color: #
画像からファビコンを作成するオンラインジェネレーター集
ローカルやオンラインにある画像ファイルを元に、ファビコンを作成できるオンラインジェネレーターのリンク集です。
1分間で学ぶ、ウェブサイトのユーザビリティ | コリス
Interactive Marketing Blogから、1分間で学ぶウェブサイトのユーザビリティを紹介します。 One Minute Guide to Usability 下記は、1分間で学ぶウェブサイトのユーザビリティの意訳です。 Who are you? 何者ですか？ 例：ロゴ、ブランディング Are you trustworthy? 信頼できますか？ 例：ベリサイン・Trust-e、信頼できるデザイン、サポート What do you do? 何をしているのですか？ 例：取り扱っている商品・サービス、会社紹介 Where to next? 次に、何をするべきですか？ 例：見積請求、営業担当へ電話 Exit Panic: Where do I go now? パニック：私はどのページをみればいいですか？ 例：ヘルプ、ログイン、コンタクト・インフォーメーション
ウェブサイトを使いやすくするための43の法則
R6K.Net Pressにエントリーされている「あなたが避けるべきウェブデザインの43のミス」の意訳です。 43 Web Design Mistakes You Should Avoid 上記エントリーによると、よく見かけるデザインのミスリストは10個くらいが通常ですが、それでは足らなく、増やしていくうちに43個になったそうです。 43の法則は、常識として浸透しているものもあれば、論争になるようなものもあります。 個人的には、いくつかは条件しだいでと思いますが、概ね相違無いです。 The user must know what the site is about in seconds. サイトに来訪したユーザーは、数秒で何のサイトか知らなくてはいけません。 Make the content scannable. コンテンツが一覧できるリストが必要です。 Do not use fancy
[JS]Mootoolsのように領域をスムーズに伸縮するスクリプト -Kwicks
Kwicksは、Mootoolsにあるように領域をアニメーションでスムーズに収縮するスクリプトのjQuery版のスクリプトです。 Kwicks for jQuery デモ デモにある4つの矩形の領域はリスト要素となっています。 オプションとして、領域間のスペースの有無やアニメーションのタイミングを変更することが可能で、収縮させるのを矩形以外にして利用することも可能です。
[JS]かわいい感じに画像を拡大表示するスクリプト -prettyPhoto
prettyPhotoは、角丸のかわいい感じのフレームやパーツを使用した、画像を拡大表示するLightbox風のスクリプトです。 prettyPhoto 背景色、拡大表示時のフレーム、ローディング時のアニメーション、ボタンなど他のLightbox風スクリプトよりかわいくデザインされています。 prettyPhotoで画像を拡大表示するには、スクリプトを外部ファイルとして、画像箇所に下記のようにrel属性に「prettyOverlay(一枚用)」「prettyOverlay(ギャラリー用)」を記述します。 <textarea name="code" class="html" cols="60" rows="5"> <a href="fullscreen.jpg" rel="prettyOverlay" title="画像の説明"><img src="thumbnails.jpg" alt="
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
一つの色からバリエーションを生成できるカラーデータベース -colordb
丁寧に作成されたボタン画像のPSD -Button Devkit
凝ったものからシンプルものまで、RSSアイコン集 -2007年 | コリス
使い勝手のよさそうな35のフリーフォント
オンラインで、いろいろなブラウザのチェックができるサイト集 | コリス