text-shadow一つでここまで出来るCSS3文字デザインのアイデア10個

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

HTMLはh要素だけを使い、CSS3のtext-shadowで見出しなどの参考にできるデザインを紹介します。

 

基本的なデザインはtext-shadowだけですが、フォントや背景を変えるだけでかっこいいデザインになると思います。

 

 

Text Shadow

 

h4.textShadow {
color: #fbffff;
font-size: 3em;
letter-spacing: 3px;
font-weight: bold;
text-shadow:
0px 1px 0px #BBB,
0px 2px 0px #BBB,
0px 3px 0px #BBB,
0px 4px 3px #444,
0px 4px 14px #666;
}

 

 

Metcalf

 

h4.metcalf {
font-family: ‘Montserrat’;
color: #131017;
font-size: 5em;
text-shadow:
-1px 1px 0px #322F36,
-2px 2px 0px #3B383E,
-3px 3px 0px #434246,
-4px 4px 0px #4D4A4F,
-5px 5px 0px #575459,
-6px 6px 0px #615F62,
-7px 7px 0px #615F62,
-8px 8px 0px #6B696C,
-9px 9px 0px #757376,
-10px 10px 0px #7F7D80,
-11px 11px 0px #8A888A,
-12px 12px 0px #959294,
-13px 13px 0px #9F9D9E,
-14px 14px 0px #A9A7A8,
-15px 15px 0px #B2B1B1,
-16px 16px 0px #BCBABA,
-17px 17px 0px #C5C3C3,
-18px 18px 0px #CDCCCA,
-19px 19px 0px #D5D3D2,
-20px 20px 0px #DBDBD9,
-21px 21px 0px #E2E0DF,
-22px 22px 0px #E7E6E5;
}

 

 

Milton

 

h4.milton {
color: #e7ebf3;
font-weight: bold;
font-size: 7em;
letter-spacing: 3px;
text-shadow:
1px 0px 0px #438088,
1px 2px 0px #154449,
3px 2px 5px #438088,
3px 4px 0px #154449,
5px 4px 8px #438088,
5px 6px 0px #154449,
7px 6px 8px #438088,
7px 8px 0px #154449,
2px 3px 0px #154449,
4px 5px 0px #154449,
6px 7px 0px #154449,
7px 9px 0px #51A3AC,
6px 10px 0px #51A3AC,
5px 11px 0px #51A3AC,
4px 12px 0px #51A3AC,
3px 13px 0px #51A3AC,
2px 14px 0px #51A3AC,
1px 15px 0px #51A3AC;
}

 

 

X-RAY

 

 

h4.x-ray {
letter-spacing: 0.75em;
color: #373b3f;
font-size: 4em;
text-shadow:
0px 0px 0px #fff,
0px 1px 0px #fff,
0px -1px 0px #fff,
0px 2px 0px #fff,
0px -2px 0px #fff,
1px 0px 0px #fff,
1px 1px 0px #fff,
1px -1px 0px #fff,
1px 2px 0px #fff,
1px -2px 0px #fff,
2px 0px 0px #fff,
-1px 1px 0px #fff,
-1px -1px 0px #fff,
-1px 2px 0px #fff,
-1px -2px 0px #fff,
2px 2px 0px #fff,
2px 1px 0px #fff,
-2px 3px 0px #373B3F,
-3px 4px 0 #373B3F,
-4px 5px 0 #373B3F,
-5px 6px 0px #373B3F,
-7px 3px 0px #fff,
-6px 2px 0px #fff,
-5px 1px 0px #fff,
-4px 0px 0px #fff,
-3px -1px 0px #fff,
-7px 4px 0px #fff,
-7px 5px 0px #fff,
-7px 6px 0px #fff,
-7px 7px 0px #fff,
-6px 7px 0px #fff,
2px 3px 0px #fff,
1px 4px 0px #fff,
0px 5px 0px #fff,
-1px 6px 0px #fff,
-2px 7px 0px #fff;
}

 

 

Press Me

 

 

h4.press {
color: #76c0ff;
font-family: ‘Montserrat’;
font-weight: bold;
font-size: 5em;
text-shadow:
0px -1px 0px #4891D7,
0px -3px 0px #B2C4E0,
0px -3px 4px #B2C4E0,
0px 2px 0px white,
0px 4px 4px white,
0px 0px 7px #B2C4E0;
}

 

 

Hansel Gretel

 

h4.hansel-gretel {
color: #fcd6d7;
font-family: ‘Montserrat’;
font-size: 44px;
letter-spacing: 10px;
text-shadow:
0px 0px 0px #113E55,
0px 1px 0px #113E55,
0px -1px 0px #113E55,
0px 2px 0px #113E55,
0px -2px 0px #113E55,
1px 0px 0px #113E55,
1px 1px 0px #113E55,
1px -1px 0px #113E55,
1px 2px 0px #113E55,
1px -2px 0px #113E55,
-1px 0px 0px #113E55,
-1px 1px 0px #113E55,
-1px -1px 0px #113E55,
-1px 2px 0px #113E55,
-1px -2px 0px #113E55,
2px 0px 0px #113E55,
2px 1px 0px #113E55,
2px -1px 0px #113E55,
2px 2px 0px #113E55,
2px -2px 0px #113E55,
-2px 0px 0px #113E55,
-2px 1px 0px #113E55,
-2px -1px 0px #113E55,
-2px 2px 0px #113E55,
-2px -2px 0px #113E55,
0px 3px 0px #fff,
0px 4px 0px #fff,
0px -3px 0px #fff,
0px -4px 0px #fff,
2px 0px 0px #fff,
2px 3px 0px #fff,
2px 4px 0px #fff,
2px -3px 0px #fff,
2px -4px 0px #fff,
-2px 0px 0px #fff,
-2px 3px 0px #fff,
-2px 4px 0px #fff,
-2px -3px 0px #fff,
-2px -4px 0px #fff,
3px 0px 0px #fff,
3px 3px 0px #fff,
3px 4px 0px #fff,
3px -3px 0px #fff,
3px -4px 0px #fff,
4px 0px 0px #fff,
4px 3px 0px #fff,
4px 4px 0px #fff,
4px -3px 0px #fff,
4px -4px 0px #fff,
-3px 0px 0px #fff,
-3px 3px 0px #fff,
-3px 4px 0px #fff,
-3px -3px 0px #fff,
-3px -4px 0px #fff,
-4px 0px 0px #fff,
-4px 3px 0px #fff,
-4px 4px 0px #fff,
-4px -3px 0px #fff,
-4px -4px 0px #fff;
}

 

 

Character

 

 

h4.character {
letter-spacing: 0.25em;
font-family: ‘Montserrat’;
color: #373b3f;
font-size: 3em;
text-shadow:
1px 1px 0px #DEC786,
2px 1px 0px #DEC786,
0px 0px 0px #fff,
0px 1px 0px #fff,
0px -1px 0px #fff,
0px 2px 0px #fff,
0px -2px 0px #fff,
1px 0px 0px #fff,
1px 1px 0px #fff,
1px -1px 0px #fff,
1px 2px 0px #fff,
1px -2px 0px #fff,
-1px 0px 0px #fff,
-1px 1px 0px #fff,
-1px -1px 0px #fff,
-1px 2px 0px #fff,
-1px -2px 0px #fff,
0px 3px 0px #fff,
1px 3px 0px #fff,
2px 3px 0px #fff,
3px 3px 0px #fff,
4px 3px 0px #fff,
5px 3px 0px #fff,
2px -1px 0px #fff,
3px 0px 0px #fff,
4px 2px 0px #fff;
}

 

 

Valentine

 

h4.valentine {
color: #ddd0b3;
font-size: 4em;
font-family: ‘Montserrat’;
letter-spacing: -2px;
text-shadow:
0px -2px 0px #FFFCE7,
0px 2px 2px #8A876E,
-1px 2px 1px #8A876E,
1px 2px 1px #8A876E,
0px 1px 2px #8A876E,
-1px 1px 2px #8A876E,
1px 1px 2px #8A876E,
0px 4px 6px #A50F18,
0px 11px 8px #6A0007,
0px 13px 16px #6A0007;
}

 

 

Fire Starter

 

h4.fire-starter {
color: #f9faf3;
letter-spacing: 10px;
font-family: ‘Montserrat’;
font-size: 44px;
font-weight: normal;
text-shadow:
1px 1px 3px #E2DBC0,
3px 3px 6px #311E0B,
9px 5px 10px #4E3A13,
-2px 8px 21px #8D7548,
19px 10px 11px #AA9366,
10px 12px 11px #B59E71,
10px 11px 27px #CAB689,
16px 14px 16px #D0C399,
26px 17px 17px #D8CCA6,
26px 20px 15px #E2DBC0,
11px 33px 19px #E7E2CF;
}

 

 

Cookies ‘n Cream

 

h4.cookies-n-cream {
color: #02405b;
font-family: ‘Montserrat’;
font-weight: bold;
letter-spacing: 4px;
font-size: 4em;
text-shadow:
0px 0px 2px #02405B,
0px 0px 0px white,
1px 1px 4px white,
1px 3px 2px #fff,
3px 4px 1px #378AC5,
4px 5px 0px #378AC5,
4px 6px 6px #558;
}

 

 

そのままコピペしても、アレンジしてもいいかと思います。

ぜひご活用してみてください。

 

 

 

via: 10 Fun CSS text-shadow experiments

Be the first to like.
  • このエントリーをはてなブックマークに追加

記事の更新情報をチェックする

RSSリーダーで購読する

  • follow us in feedly

コメントを残す

サブコンテンツ
ホーム > WEB > text-shadow一つでここまで出来るCSS3文字デザインのアイデア10個