DESIRERY

CSS

CSSによる3Dアニメーション

この辺かなり先行実装な感じもしますがWebkit nightly buildで3Dのアニメーションが実装できるようになったようです。Flashは先に行ってますがプラグインなしと言うことであればWebGLとCSSで今後実装できるようになりそうです。

Webkit Announces Support for CSS 3D Transforms

ちなみに3Dといっても2Dのオブジェクトを3Dで表現みたいなのが手っ取り早いですがきちんとやるならモデリングが必要です。この辺はLightWaveとBlenderがいいのかなとは思いますが基本そっちの人ではないので細かいことは知りません。LightWaveでモデリング、Blenderでdaeファイル書き出し、PV3Dでdaeファイル読込みといった感じです。またこの環境であればWindowsでもMacでも両方いけます。その他Photoshopで触るには別途プラグインが必要です。CS4はしらないけどCS 3は3ds MAX以外サポートしてません。

Blender

そもそも一番の問題は3Dが必要か?と言うところな気がしますが。かなり前から3Dが使われているゲームでもUIやある程度の視認性が必要なものは2Dが多いです。それなりの理由がない限り使いどころが難しいです。

フルフラではoutlineを

fullfla

FF13発売だったんですねー。PS3ないけど。外観のデザインがまた変わったら考えよう。

で、ここフルフラッシュのサイトなんですが画面をクリックでスクロールバーが出ます。たまにこういったサイトがあるんだけどFirefoxではoutlineを消さないとこういった残念なサイトになります。Firefoxは対象外ですと言われたらそれまでだけど。回避方法は下記CSSを加えるだけ。

  1. Element {
  2. outline:none;
  3. }

こんな簡単なのでFlashだからと言って動作確認の手を抜きすぎだろ。といった感じが拭えない。その他HTMLではナビゲーションなどfloatで横並びした際マウスダウンで落ちるとかあったりするけどそれもこれが原因。かといってリンクでoutlineを消すのは場合によって微妙なのでoverflow:hiddenではみ出したoutlineは切れる用にしておけば問題ないです。

text-shadowは使えるのかも

10 resources to get the most out of the CSS text-shadow property

これまで手を出していなかったけどCSS 3のtext-shadowってこれを見ると結構使えそう。特に動的なページとか。静的でもこれまで画像にしていたものがテキストで済む。

エンボスが意外と綺麗。ついでにこの程度であればIEは除外っていう形で割り切れそう。MSゴシックもきたないし。XPじゃなくても明朝はまだきたないし。

その他セレクタ以外のCSS 3ではborder-radiusとRGBaとMultiple backgroundが今のところ好み。すごい便利。あとは透過PNG普及ってことでbackground-positionにここから下でリピートしてねとかあったらいいなー。

Popular Posts

  1. フルフラではoutlineを
  2. ヒラギノとメイリオ
  3. text-shadowは使えるのかも
  4. Multiple background
  5. モバイル対応