CSS3でtypography

CSS3でお絵描きがあるなら、CSS3でtypographyでもやってみるかと思ってやってみました。

1.Photoshopでデザイン

IllustratorでフォントのパスをいじったりしたらCSSで制御できないのでしません。
しかし、テーマやイメージも何もないし、もっとセンスよくなりたいです。

デザイン段階

2.フォントサイズを合わせる

先ほどデザインした通りに一文字ずつフォントサイズを合わせます。

フォントサイズを合わせる

今回はこんな汚いマークアップになりました。

<p>
<span>T</span><span>y</span><span>p</span><span>o</span>
<span>G</span><span>ra</span><span>P</spna><span>hy</span>
<p>

折角なのでCSS3の擬似セレクタ「nth-child」を使いました。

body{ font-family:helvetica; }
span:nth-child(1){ font-size:300px; }
span:nth-child(2){ font-size:122px; }
span:nth-child(3){ font-size:180px; }
span:nth-child(4){ font-size:66px; }
span:nth-child(5){ font-size:110px; }
span:nth-child(6){ font-size:20px; }
span:nth-child(7){ font-size:110px; }
span:nth-child(8){ font-size:38px; }

3.bodyに背景画像を敷く

先ほどデザインした画像をbodyのbackgroundに指定して、位置を細かく合わせていきます。ズレを修正しやすいようにフォントの色を変えてます。

背景画像を敷く

※DreamWeaverのプレビューだとCSS3のプロパティが適応されないので(CS5は持ってないのでわかりませんが)、FirefoxのFirebugを使って編集したほうが早いでしょう。CSS3のコード補間もしてくれて便利です。

Firebugで編集

4.できあがり

typography – jsdo.it – share JavaScript, HTML5 and CSS

デザインからコーディングまで1時間半くらいでした。CSS3って言っておきながらほとんど使ってないですよね、ハイ。
MacだとWebkit系ブラウザ(Chrome、Safari)じゃないとずれちゃいます。
WinXPの場合、ChromeとOperaだとtranformした文字にアンチエイリアスがかかるようなので、pタグにtransform:rotate(360deg);を入れて360度回転せさています。(Operaは0degでもよさそうです)

もっとかっこいい作品が出てきて欲しいですね。

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ