CSS おれおれ Advent Calendar 2012 – 14日目

こんな感じのもの。

基本

背景色を黒に、文字色を白っぽい色にします。

フォント

あとそれっぽいフォントを使いました。

Google Web Fontsの “Grand Hotel” というのを利用しています。

• Google Web Fonts
  • Grand Hotel

（個別ページってこれで良いのかな。）

text-shadowでぼわーんってな

(さらに…)

CSS おれおれ Advent Calendar 2012 – 03日目

text-shadowでテキストに影を付ける事ができます。

text-shadow: <x> <y> <blur> <color>;

<x>, <y>は影の座標、<blur>はぼやけで、それぞれpxなんかで指定します。

また影をカンマ,で区切って複数指定する事ができるので、ぼかしなしの影で囲ってやると、白抜きにしたり縁取りしたり出来ます。

割とよく使えるんじゃないかなーって思います。

実例

(さらに…)

元ネタはこちら：

• 少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス
• 【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを | Webクリエイターボックス

細部にこだわったWebデザインって？

ひと手間加えるだけでぐっと良くなる、という事で以下を提案しておられます。

• グラデーションを加える
• 1pxのラインを加える
• シャドウを加える
• ノイズを加える
• レタープレス効果

元の記事の実践編では、Photoshopを使った画像加工で「実践」をしているのですが、同じ（ような）事をCSS3でやってみました。

デモ

先に完成品です。WebkitとFirefoxのみ。（IEでは、新しいものでも背景がちゃんと出ません。）

「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 – jsdo.it – share JavaScript, HTML5 and CSS

(さらに…)