Home > 技術 > CSS3のText-Shadowで文字にEffectをかけてみる

Newer
Older

CSS3のText-Shadowで文字にEffectをかけてみる

2009-08-30 (日)
技術

Pure CSS Letterpress Effect.jpg

Create a Letterpress Effect with CSS Text-Shadowの記事を見て触発された。

text-shadowというCSS3のプロパティを使うと上の画像のように、テキストにエフェクトをかけることが可能になる。

たとえば以下の感じ。

指定している値については以下を参照。

X軸方向への距離: 左右のぼかし距離、マイナス値だと左、プラス値だと右。
Y軸方向への距離: 上下のぼかし距離、マイナス値だと上、プラス値だと下。
ぼかし距離: ここを大きくするとぼかしの範囲が大きくなる。
色: ぼかしの色、この部分は最後に書いても最初に書いても同じように動作する。
つまりtext-shadow: #555　2px 5px 5px;でもよい。

サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pure CSS Letterpress Effect</title>
<style type="text/css" media="screen">
	body {
		background-color: #888;
		font-family: Helvetica,Arial,Sans-Serif;
	}
	a {
		color: #222;
		text-decoration: none;
	}
	h1 {
		font-size: 130px;
		color: #222;
		text-shadow: 2px 10px 10px #555;
		text-align: center;
	}
	h2 {
		font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
		text-align: center;
		color: #222;
		text-shadow: 2px 5px 5px #555;
	}
	p {
		font-size: 70px;
		text-shadow: 0 0 4px white,
			0 -5px 4px #FFFF33,
			2px -10px 6px #FFDD33,
			-2px -15px 11px #FF8800,
			2px -25px 18px #FF2200;
		text-align: center;
	}
</style>
</head>

<body>
	<h1><a href="http://hisasann.com/">hisasann.com</a></h1>
	<h2>CSS3 text-shadow Effect</h2>
	<p>Safari 3+, Opera 9.5, Firefox3.1</p>
</body>

</html>

テストページ作ってみた。
ファイアーの感じとかも出せるので、これは楽しいですね！
CSS3 text-shadow Effect

■関連リンク
・text-shadow - CSS Dencitie

Trackback:0

TrackBack URL for this entry: http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1210
Listed below are links to weblogs that reference: CSS3のText-Shadowで文字にEffectをかけてみる from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > CSS3のText-Shadowで文字にEffectをかけてみる

Search

Ads

書いてる人について

author：hisasann.com
lab : lab.hisasann.com
twitter : フォローミー
facebook : Hisa Yoshi

Javascriptをメインに使っているプログラマーの技術ブログです。ちょっぴりアートでちょっぴりオモシロイものを作ってます。
記事の内容はjQuery、jQueryMobile、HTML5、CSS3などなど…

是非こちらからRSSの登録をお願いいたします！
損はさせないぜっ！

RSS Feedを登録する

作ったもの :

products

他に運営しているサイト：

人気のエントリー

JavaScript本

誰もが通る道… それはサイ本。

JavaScriptだけでなく、CSSやフロントエンドのパフォーマンスアップがぎっしりと詰まっててすばらしい良書です。

執筆されたのは結構前なのですが、いろいろなJavaScriptの手法が書いてあるステキな本。特にJohn ResigがjQueryの初期を制作しているときの本なので、英語ですがコードだけでも追うと面白いと思います。

書評 - jQuery Mobileポケットリファレンスで書評を書きました。

Recent Entries

Tag cloud: ActionScript addon Ads Ajax Algorithm Amazing Android Anime Apache AppleScript Application Aptana baby Blog Bloger BlogParts Book Book Review Bookmark Bookmarklet bot Box2d browser Camera Canvas Catalyst Chrome CM Communication Cool CPAN CSS CSS3 DB design Dinner DJ DOM DS Eclipse Editor Electro Emulator Engineer English Firebug Firefox Flash Flex Flickr Food Freesoft Funny Gadget Game Geek Generator git Google Google Wave GoogleAnlytics Greasemonkey Grow Hacker Haml hatena HTML HTML5 iBatis IDE Idea IE IE6 IE7 IE8 Image ImageMagick Interface iPad iPhone iPod IT Item iTunes Java JavaScript jQuery jQueryMobile jsDeferred JsUnit Keyboard Lanch Language LifeHack Lightbox Mac MacBookPro MacPorts Mash-up MeCab Mobile Monitor MOO Motivation Movalble Type Movie Music MySql Netscape News nginx Nikki node.js OpenSource Opera Oracle Papervision3D Pasta PC Perl Photoshop PHP PL/SQL Plugin Presentation Program Progression prototypeJS Python QUnit Ramen Rhino RSS Ruby Ruby On Rails Safari Sakura Sanitizing Search Seasar2 Security SEO Shell Shortcut Sinatra Skill Smartphone SMO SNS Spring SQL SSH SSL Struts SVN Test TextMate Tomcat Tool Tumblr Twitter Unix Vim Vista VMware VPS Web Web2.0 Webkit WebService Wii Wiki Windows Word WordPress Work Workshop WTP XAMPP XCode XMLHttpRequest2 XSS XUL Yahoo YouTube YUI Zen-Coding
カテゴリー: Firefox

Lifehack

Mac

News

Photoshop

Web

アイテム

ガジェット

ゲーム

サービス

デザイン

ブログ

技術

映像

本

画像

考え方

言葉

雑記
月別アーカイブ
Powered by: Powered by
Movable Type Commercial 4.261