CSS3のtransformを使ったフォントの変形
CSS3のtransformプロパティでscale()(または-ms-filterでMatrix())を使うと、ブロックの拡大と縮小ができる。これを利用するとVerdanaをCondensedなフォントっぽく細くしたり、ワープロ時代の倍角文字や縦倍角文字を実現することが簡単にできる。コンテンツ本文に使うのは無理があるが、見出しなどには良さそう。特に@font-faceで気軽に変更できない(してもあまり効果的ではない)日本語の見出しには面白い試みなんじゃないかと思ったが、一番綺麗にしたいIE8で残念なので微妙。 Verdana Narrow? Demo: Verdana Narrow 単純に細くしたいブロックでtransform: scaleX(num);を使えば良い。 .narrow { -webkit-transform: scaleX(0.8); -moz-transform: sca
Super Cool CSS Flip Effect with Webkit Animation
There’s some seriously cool transform and animation effects available through the webkit engine that can really spice up the web experiences for users with the Safari browser. Here’s a quick look at how the rotateY property can produce a flip effect, and how it can be used to create a super cool Transformers themed top trumps design. View the demo Safari browser required to experience the animated
CSS Transformsについてのメモ
既に色々なデモページが作られていたり、実用されていたりするCSS Transformsですが、ちゃんと理解したかったので調べてみました。 まだそんなに自信はありませんが、以前よりは理解できた気がします。 というわけなので、自分が分かる範囲で説明してみたいと思います。 CSS Transformsは2Dと3Dとで別になっていますが、将来的には SVG Transforms と合わせて一つの仕様になるそうです。 今はまだ別々なので、それぞれにリンクをしておきます。括弧内は現時点での最新の日付です。 WD: CSS 2D Transforms（2011/12/15）ED: CSS Transforms（2011/11/28）WD: CSS 3D Transforms Module Level 3（2009/03/20）ED: CSS 3D Transforms（2011/03/21）新しくなった
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
