text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; レタープレスのテキストエフェクト
[CSS]text-shadowでここまでできる、かっこいいエフェクト集
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; レタープレスのテキストエフェクト
画像にできる濃淡の縞「バンディング」をおさえる方法
画像の滑らかなグラデーションに現れる濃淡の縞「バンディング」をおさえる方法をFringe Focusから紹介します。 左：通常、右：バンディング 右側の画像では空の滑らかなグラデーション箇所にバンディングがおきています。これは圧縮した際に色の数を制限することで発生させたものです。 人の目は高いコントラストのエリアを見ると、微妙な明るさの変化を認識しにくいため、この写真では建物のセクションでうまく働いています。ここでのカラーは「少し明るい青」から「少しそれほど明るくない青」を使用しています。 この画像の圧縮というのは、バンディングの要因となります。 画像を構成しているピクセルの一つ一つは、それぞれの周りのピクセルと混ざり合うことはなく、それ自身が小さい正方形のピクセルです。ピクセルは我々の目からみると、あまりにも過度に小さいものです。ここで取り上げる方法はそれよりもっと大きいグループでカラー
ボタンのデザインに悩んだら参考にしたいサイト -House of Buttons
House of Buttons ボタンのコレクションは上記トップページからも閲覧できますが、月ごとにまとめられたアーカイブページも用意されています。
手描き風タッチのバリエーションが増やせるPhotoshopのブラシツール -Fast Pencil Brushes
Photoshopのブラシツールに、手描き風のソフトタッチ、ハードタッチ、ワイヤーフレーム用などのバリエーションが増やせるプリセットをMichaelHoweから紹介します。 Photoshop Fast Pencil Brushes 追記： ペンツールではなく、ブラシツールでした。それに伴い一部記述を「ペンツール」から「ブラシツール」に変更しました。 ペンツールへの登録方法は何かの役にたつかもしれないので、そのままにしておきます。 ペンツールの紹介は初めてなので、まずは使用方法から。 Photoshopのペンツールの登録方法 ダウンロードしたファイル（拡張子.tpl）は、「Presets」内の「Tools」に格納します。 例：C:\Program Files\Adobe\Adobe Photoshop CS4\Presets\Tools Photoshopを起動し、ペンツール[P]を選択し
[CSS]レイアウトのベースを設定する超軽量のフレームワーク -EZ-CSS
1カラム、2カラム、3カラム、ヘッダ、フッタなどレイアウトのベースを設定する超軽量のCSSのフレームワークを紹介します。 EZ-CSS_ An easy to use, lightweight, CSS framework. フレームワークにはあらかじめ多種なモジュールが用意されており、多彩なレイアウトを簡単に利用できます。 レイアウトのサンプル 各カラムは、HTMLでの記述の順番も変更可能です。 3カラムのモジュールのパターン EZ-CSSは既存のスタイルシートと共存が可能で、カラムの幅もどんなサイズでも対応が可能となっています。 利用方法は簡単で、ダウンロードしたスタイルシートファイルを外部ファイルとして指定し、レイアウトのサンプル通りに記述します。 EZ-CSSの使い方 レイアウトのサンプル
IE8のCSS/HTML/DOM/JavaScriptのバグ情報リスト
IE8のCSS、HTML、DOM、JavaScript関連のバグ情報がまとまったリストをJames Hopkinsから紹介します。 IE8 Bugs 掲載されているバグの数は現在、CSS：63、HTML：4、DOM：2、JavaScript：1となっており、ほとんどのものはTest Caseとしてデモページを参照することができます。
いろいろなサイトのボタンを集めた -Button Design Showcase
アローやアイコンを添えたり、グラデーションを適用したものなど、さまざまなデザインのボタンを集めた「Button Design Showcase」を紹介します。 Button Design Showcase Buttonには現在24個登録されています。 Elements of Designは、以前紹介した「検索フォームや見出しなどエレメントのデザインを集めたサイト -Elements of Design」のサイトで、久しぶりに訪れてみたら、カテゴリが増えていたので、他のも紹介します。 ブログのコメント用フォームのデザイン集 ブログのコメントのデザイン集 ボタンのデザイン集 カレンダーのデザイン集 カルーセルのデザイン集 コード表示のデザイン集 言語選択のデザイン集 Emailのサインアップフォームのデザイン集 エラーメッセージのデザイン集 動画プレイヤーのデザイン集 フッタのデザイン集 フォ
光を効果的に使用したPhotoshopのチュートリアル集：Part 15
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
Photoshopでつくるタイポグラフィのチュートリアル:2009年総集編 | コリス
テキストにさまざまなエフェクトをかけるPhotoshopのチュートリアルを紹介済みのものから未紹介のものまで、2009年の総まとめです。
[CSS]コンテンツとサイドバーの高さを同じにするスタイルシート
サイドバーがコンテンツの高さと異なる際に、コンテンツと同じ高さのように見せるスタイルシートをwoork upから紹介します。 Really simple CSS trick for equal height columns 仕組みの概要は、コンテンツの右のボーダーを200pxにし、その上にサイドバーを表示して、サイドバーの高さをコンテンツと同じように見せるものです。 HTMLは、コンテンツとサイドバーのdiv要素を内包するdiv要素（wrapper）を配置します。 HTML <textarea name="code" class="html" cols="60" rows="5"> <div id="wrapper"> <div id="maincontent">...</div> <div id="sidebar">...</div> </div> </textarea>
Photoshopでの作業をより早くより簡単にする20のTips
Photoshopでの作業を今までより早く、そしてより簡単にする20のTipsをSpoonGraphicsから紹介します。 20 Handy Photoshop Tips For a Faster Workflow デザイナーの人には常識的なものだと思いますが、実用的で多用するものが多く紹介されています。 ※コマンドはWin XP+Photoshop CS4のものです。 Macの場合は、下記置き換えてください。 Ctrl = Cmd Alt = Opt 作業ファイル上で、[space] 使用してるツールを手のひらツールに変更し、画像を移動させることができます。 [編集]-[環境設定]-[テキスト]の「フォントプレビューのサイズ」 サイズを「特大」にすると、フォント選びが楽になります。 「文字パレット」のサイズにフォーカスをあてて[矢印] 上下の矢印キーでフォントサイズを増減することができま
[CSS]そのまま使えるコメントのスタイルシートのテンプレート集
スタイリッシュにデザインされたブログなどに無料で利用できるコメントのテンプレートをcss globeから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ol class="comments"> <li> <ul class="meta"> <li><img src="path-to-gravatar.gif" alt="Author's name" /></li> <li><a href="url-to-authors-homepage.html">Author's name</a></li> <li>posted on date-goes-here</li> </ul> <div class="body">Comment text goes here...</div> </li> </ol> </textare
IE7とIE6を共存させる方法：まとめ
IE 7の自動アップデートに伴ってだと思うのですが、当サイトで紹介した「IE7とIE6の共存」シリーズのアクセスが増えているので、既存のエントリーをまとめました。 リンク先や手順などは以前紹介した方法ではなく、最新のものになっています。 IE7をベースに、IE6をスタンドアローンで起動する方法：その１ IE7をベースに、IE6をスタンドアローンで起動する方法：その２ IE6をベースに、IE7をスタンドアローンで起動する方法 Virtual PCを使用して、IE6 or 7を起動する方法 追記： スタンドアローンは、Windows XPが対象になります。 Vistaの場合は、Virtual PCを使用します。 IE7をベースに、IE6をスタンドアローンで起動する方法：その１ IE7をダウンロードして、インストールします。 日本語版「Internet Explorer 7」のダウンロード IE
単調なウェブサイトのデザインに手を加えてクオリティをアップするチュートリアル
ウェブサイトのデザインに、ビジュアルエレメントを追加したり、細部をブラッシュアップしたりしてクオリティをアップするPhotoshopのチュートリアルをPsdtuts+から紹介します。
[CSS]テキストの可変に対応したシンプルでスタイリッシュなパンくず
テキストの量の変化に対応したシンプルでスタイリッシュなパンくずを実装するスタイルシートをAce Infoway Indiaから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <ul id="breadcrumbs"> <li><a href="#">Home</a></li> <li><a href="#">Main Lavel</a></li> <li><a href="#">Sub Lavel</a></li> <li><a href="#">Sub sub Lavel</a></li> <li>Your Current page</li> </ul> </textarea>
無料で利用できるウェブサイトやアプリケーション用の16x16ピクセルのミニサイズのアイコン集
ウェブサイトやアプリケーション用の16x16ピクセルのミニサイズのアイコンをFree Icons Webから紹介します。
[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS3とHTML5の主要ブラウザの対応状況一覧
実例からウェブデザインを学ぶ -Web Design Case Study: Refilmagem
ウェブデザインに使用するUIのパーツをまとめたPSD素材