自由自在！CSS3のtext-shadowを使ってをロゴ作ってみる

text-shadowの基本的な使い方はこのようになります。

カンマで区切ると複数の陰を同時つけることできて、うまく組み合わせると色んなロゴが作れちゃいます。

---

光り輝いているようになっています。複数の影を使っていて、色は同じですが外にいくほどぼかす割合が強まっています。

color:#fff;
background: #000;
font-size: 52px;
font-weight: bold;
text-shadow: 0px 0px 1px #ffffff,
  0px 0px 10px #ffd700,
  0px 0px 20px #ffd700,
  0px 0px 30px #ffd700,
  0px 0px 40px #ffd700;

---

影を重ねて立体的に仕上げています。

color:#000;
background: #ccc;
font-size: 45px;
font-weight: bold;
text-shadow: 1px 1px 0px #aaa,
  2px 2px 0px #aaa,
  3px 3px 0px #777;

---

激しく燃えています。結構有名ですね。外にいくほど色が濃くなり、ぼかし具合も強くなっています。

color: #fff;
background: #000;
font-size: 62px;
font-weight: bold;
text-shadow: 0 0 10px #fefcc9,
   5px  -5px 15px #feec85,
 -10px -10px 20px #ffae34,
  10px -20px 25px #ec760c,
 -10px -30px 30px #cd4606,
   0px -40px 35px #973716,
   5px -45px 40px #451b0e;

---

2つ前と同じ感じですがこちらは若干ぼかし気味にしています。

color:#800000;
background: #ffebcd;
font-size: 52px;
font-weight: bold;
text-shadow: 2px 2px 0px #d2691e,
  2px 2px  0px #800000,
  2px 2px 10px #800000;

---

色をRGBAカラーモデルで指定しています。半透明にすることでなめらかな感じになり3Dっぽくなっています。

color: rgba(0,255,255,.6);
background:#000;
font-size: 60px;
font-weight: bold;
text-shadow: 1px 1px rgba(0,128,255,.7),
  2px 2px rgba(0,128,255,.7),
  3px 3px rgba(0,128,255,.7),
  4px 4px rgba(0,128,255,.7),
  5px 5px rgba(0,128,255,.7),
  6px 6px rgba(0,128,255,.7),
  7px 7px rgba(0,128,255,.7),
  8px 8px rgba(0,128,255,.7),
  9px 9px rgba(0,128,255,.7),
  10px 10px rgba(0,128,255,.7);

---

こちらもRGBAで色を指定しています。かぶっている部分は足した色になってますね。

color:rgba(255,0,0,.5);
background:#fff;
font-size: 62px;
font-weight: bold;
text-shadow: 5px 3px rgba(0,0,255,.5);

---

文字と背景で同じ色が使われていますが、枠の部分を工夫することでメリハリをつけています。

color: #bad3ed;
background: #bad3ed;
font-size: 52px;
font-weight: bold;
text-shadow: 0px 0px 1px #333,
  0px 0px  5px #333,
  0px 0px 10px #333;

---

グラデーションでいっぱい重ねています。

color: #ffffcc;
background: #000;
font-size: 60px;
font-weight: bold;
text-shadow: 3px 3px 0px #ff3333,
  6px  6px 0px #ff6633,
  9px  9px 0px #ff9933,
 12px 12px 0px #ffcc33,
 15px 15px 0px #ffff33;

---

同じ色でくっきり浮き出しています。

color:#ccc;
background:#ccc ;
font-size: 60px;
font-weight: bold;
text-shadow: -1px -1px #fff,
  1px 1px #333;

---

さらに、Google Font APIやgradientなどをあわせて使うと面白いです。CSS gradientはCSS3.0 Makerなどのツールで調整できます。

南国風なロゴに仕上がっています。

<link  href="http://fonts.googleapis.com/css?family=Slackey:regular" rel="stylesheet" type="text/css" >
<style>
#slackey {
  font-family: 'Slackey', serif;
  color:#ffffff;
  font-size: 42px;
  font-weight: 700;
  text-shadow: 2px 2px 2px #333;
  background:-webkit-gradient(radial, 450 0, 10, 169 -257, 465, from(#fff800), to(#ff4f41));
  padding: 50px 0;
  text-align: center;
}
</style>
<p id="slackey">Google Font API</p>

---

<link  href="http://fonts.googleapis.com/css?family=Josefin+Sans:100,100italic,300,300italic,400,400italic,600,600italic,700,700italic" rel="stylesheet" type="text/css" >
<style>
#Josefin {
  font-family: 'Josefin Sans', serif;
  color:#fff;
  font-size: 48px;
  font-weight: 400;
  text-shadow: 2px 2px 2px #fff;
  background:-webkit-gradient(radial, 540 56, 0, -202 -395, 528, from(#004b00), to(#00e700));
  padding: 50px 0;
  text-align: center; 
}
</style>
<p id="Josefin">Josefin Sans</p>

考え出すときりがないですが楽しいですね。IEで表示できれば実用性も高まるんだけどな～