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

CSS3のtext-shadowが面白そうなので個人的に色々ロゴを作ってみました。想像力が膨らみますね。

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

text-shadow2.png

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


lighntning.png

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

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;

surface.png

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

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

burning.png

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

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;

bevan.png

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;

3d3d.png

色を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);

clear.png

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

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

calligra.png

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

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

3dlike.png

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

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;

emboss.png

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

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などのツールで調整できます。

googleFontAPI.png

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

<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>

josefin.png
<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で表示できれば実用性も高まるんだけどな~

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加