[CSS]Photshopを使用しないで、スタイルシートで実装するレタープレス
Post on:2009年8月28日
sponsors
海外のサイトでよく見かけるレタープレスのエフェクトを実装するスタイルシートをLINE 25から紹介します。
Create a Letterpress Effect with CSS Text-Shadow
demo
レタープレスのエフェクトはCSS3で実装されているため、デモはSafari3, Firefox3.5などCSS3に対応したブラウザでご覧ください。
HTMLとCSSはシンプルです。
HTML
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <h2>Pure CSS Letterpress Effect</h2> </textarea> |
CSS
|
1 2 3 4 5 6 7 8 9 |
<textarea name="code" class="css" cols="60" rows="5"> body { background: #474747 url(bg.png); } h2 { font: 70px Tahoma, Helvetica, Arial, Sans-Serif; text-align: center; } </textarea> |
CSS：レタープレス箇所の指定
|
1 2 3 4 |
<textarea name="code" class="html" cols="60" rows="5"> color: #222; text-shadow: 0px 2px 3px #555; </textarea> |
sponsors
