CSS おれおれ Advent Calendar 2012 – 14日目
こんな感じのもの。
基本
背景色を黒に、文字色を白っぽい色にします。
フォント
あとそれっぽいフォントを使いました。
Google Web Fontsの “Grand Hotel” というのを利用しています。
- Google Web Fonts
(個別ページってこれで良いのかな。)
※スマホ対応はしてません。
CSS おれおれ Advent Calendar 2012 – 14日目
こんな感じのもの。
背景色を黒に、文字色を白っぽい色にします。
あとそれっぽいフォントを使いました。
Google Web Fontsの “Grand Hotel” というのを利用しています。
(個別ページってこれで良いのかな。)
text-shadow
でぼわーんってなCSS おれおれ Advent Calendar 2012 – 03日目
text-shadow
でテキストに影を付ける事ができます。
text-shadow: <x> <y> <blur> <color>;
<x>
, <y>
は影の座標、<blur>
はぼやけで、それぞれpx
なんかで指定します。
また影をカンマ,
で区切って複数指定する事ができるので、ぼかしなしの影で囲ってやると、白抜きにしたり縁取りしたり出来ます。
割とよく使えるんじゃないかなーって思います。
元ネタはこちら:
ひと手間加えるだけでぐっと良くなる、という事で以下を提案しておられます。
元の記事の実践編では、Photoshopを使った画像加工で「実践」をしているのですが、同じ(ような)事をCSS3でやってみました。
先に完成品です。WebkitとFirefoxのみ。(IEでは、新しいものでも背景がちゃんと出ません。)
「少しの手間で大きく変わる、細部にこだわったWebデザイン」を、CSSで。 – jsdo.it – share JavaScript, HTML5 and CSS