DESIRERY » CSS http://www.t2-designing.com/blog Sun, 05 Sep 2010 07:12:45 +0000 ja hourly 1 http://wordpress.org/?v=3.0.1 CSSによる3Dアニメーション http://www.t2-designing.com/blog/2009/12/20/324/ http://www.t2-designing.com/blog/2009/12/20/324/#comments Sat, 19 Dec 2009 18:15:20 +0000 Toyoshima http://www.t2-designing.com/blog/2009/12/20/324/ この辺かなり先行実装な感じもしますが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が多いです。それなりの理由がない限り使いどころが難しいです。

]]> http://www.t2-designing.com/blog/2009/12/20/324/feed/ 1 フルフラではoutlineを http://www.t2-designing.com/blog/2009/12/18/323/ http://www.t2-designing.com/blog/2009/12/18/323/#comments Thu, 17 Dec 2009 19:28:43 +0000 Toyoshima http://www.t2-designing.com/blog/2009/12/18/323/ fullfla

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

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

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

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

]]> http://www.t2-designing.com/blog/2009/12/18/323/feed/ 0 text-shadowは使えるのかも http://www.t2-designing.com/blog/2009/12/17/320/ http://www.t2-designing.com/blog/2009/12/17/320/#comments Thu, 17 Dec 2009 10:49:25 +0000 Toyoshima http://www.t2-designing.com/blog/2009/12/17/320/ 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にここから下でリピートしてねとかあったらいいなー。

]]> http://www.t2-designing.com/blog/2009/12/17/320/feed/ 0 ヒラギノとメイリオ http://www.t2-designing.com/blog/2009/10/04/217/ http://www.t2-designing.com/blog/2009/10/04/217/#comments Sat, 03 Oct 2009 22:00:48 +0000 Toyoshima http://www.t2-designing.com/blog/2009/10/04/217/ hiragino-meiryo

Macユーザーには非常に使い勝手のいいヒラギノ。角ゴでも丸ゴでもどっちもいいっす。ただWindowsではきつい。見にくい。と、いうことでメイリオ先頭じゃダメなんでしょうか。こんな感じで。

  1. "メイリオ",Meiryo,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",Osaka

前に何かでこんな形にして以来このフォント指定なんですが、要するにMacにメイリオを入れている人のほうが、Windowsでヒラギノを入れている人より多いの？MacでのメイリオはWindowsのヒラギノよりぜんぜん綺麗じゃない？MacなのにiWorkよりOffice？などなどいろいろ疑問が。なんとかなんないですかねー日本語のフォント周り。ついでにWindowsにも綺麗な明朝がほしいです。

ある程度リテラシーがある人の場合サイトより自分の設定したフォントを優先させるのかなとか。これもそんな使い勝手がよくはないので結構敏妙なところではあるけど。

そのほかMacだと画像よりテキストのフォント指定のほうが綺麗。Windowsもメイリオが出てからやっと使えるフォントができたのでできれば画像よりテキストでいきたいところ。

]]> http://www.t2-designing.com/blog/2009/10/04/217/feed/ 0 Multiple background http://www.t2-designing.com/blog/2009/07/06/136/ http://www.t2-designing.com/blog/2009/07/06/136/#comments Mon, 06 Jul 2009 07:32:57 +0000 Toyoshima http://www.t2-designing.com/blog/?p=136 間違えたorz

CSS3のすてきーな機能でIE切捨てというすーてきーな割切りで実現できる背景画像の複数指定。Gecko1.9.2からでした。Firefox3.5から使えるとか今の今まで勘違い。ということでGecko1.9.2はFirefox 3.6になるので使えるのはしばらく先。。。

]]> http://www.t2-designing.com/blog/2009/07/06/136/feed/ 0