CSS3でかっこいい表現をしたい。
そんなときにおすすめなのが、「Subtle CSS3 Typography that you'd Swear was Made in Photoshop」。Photoshopで作ったようなCSS3のタイポグラフィーです。
Safari, Google Chromeなどで使用可能な「-webkit-mask-image」でマスクが指定してあったり、グラデーションを適用するgradientプロパティ、色を指定するRGBaプロパティ、hover時にアニメーションするtransitionプロパティが使われています。
フォントには、Appleのサイトでもよく使われている「Myriad Pro」が使われていますね。
ソースがダウンロードできて参考になるかと思うので、一度見てみてください。
Subtle CSS3 Typography that you'd Swear was Made in Photoshop
Editor's Note
深夜になってしまったけど快適なのでもうちょいがんばる。
Related Entry
- CSS3のベンダープレフィクスを自動で追加してくれる「CSSPrefixer」
- CSS3で作るクールなお問い合わせフォーム
- floatした画像の横のテキストの回り込みをクリアするCSS
- CSS3を使ったボタンジェネレータ
- CSSだけでJavaScriptのような動きを実装するサンプル30
