STAFF BLOG
2016.08
31
タグ:,

アンチエイリアス(anti alias)とは
白と黒の2値だとギザギザになるので
いい感じのグレーを足して滑らかに見せよう。自動的に。
という技術。

アンチエイリアス適用例(画像です)

anti alias

photoshopなんかだとaaボタン一発で指定できるのですが
ブラウザ(スタイルシート)では指定出来ないのです。(macOSを除く)
それを無理やり適用する手法を知ったので披露してみます。

aa(アンチエイリアス)コントローラー

フォントコントローラー

フォントサイズコントローラー

※お使いのPCに含まれないフォントが指定された場合は動作しません。
※AAオンのMS明朝が意外とカッコ良いです

サンプルテキストがてら解説でも。

実際にアンチエイリアスを直接指示しているのではなく、
transform:rotate(0.028deg);を指定しています。
このtransfromは新し目のプロパティで
昔ながらのルールで描画(レンダリング)されたものを再描画してくれるんですね。
これを利用してルールを破綻させる事なく、目当ての要素にのみアンチエイリアスがかけれるという仕組みです。
別のプロパティでも良いですがrotateが選ばれているのは一番影響が少ないからではないかと。
ちなみにこの(0.028deg)を下回るとchromium系のブラウザではアンチエイリアスが効きません。

約1.6度傾けてでもアンチエイリアスが必要な場面でぜひご活用ください。

このページを友達とシェアしよう!