+RECOMMEND
+RECOMMEND
+Ad
+OTHERS

無料ブログ作成サービス JUGEM

paperboy&co.
RSS 1.0
ATOM  0.3
<< April 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
<< 波の内側からの視点 非常に美しいフォトグラフ | main | Adobe デジタルフォト&デザインセミナー2010 in 福岡 レポートその1 >>
使えそうで使えないCSSの背景遠近法


環境限定で、しかもブラウザのサイズを変更する時にしか確認できない、
微妙なCSSの小技をご紹介。


これは2つのDivにそれぞれ背景を指定し、背景幅の違いによってWindowを伸縮させたときに
背景がスライドして遠近感があるように見えるというテクニックです。
偶然発見して、環境検証いていましたが、正直微妙でエントリーするか迷いました。

こちらが該当のCSSソースです。
div#bgtest {
background: transparent url(../../bg_test/img/bg02.png) 400% 0 repeat-x; background-attachment:fixed;
}

div#bgtest2 {
 background: transparent url(../../bg_test/img/bg01.png) -1000% 0 repeat-x; background-attachment:fixed;
}

キモはそれぞれ背景の左端の位置をパーセント指定して、相反する位置からスタートさせているところです。パーセント指定することにより、Windowサイズが変更するたびに、背景の繰り返し開始位置が再計算され動いているように見えると言うことです。


■検証結果
Win7ではおおむねどのブラウザでも再現可能。
一部Operaブラウザがポジションの解釈違いで動く方向が変わるぐらいです。

Windowサイズを変更する途中もHTMLが描写され続けないとイケないので、WinVista以降の環境でないと再現は難しいと思われます。

WinXpのFireFoxは、Win7のような描写をするので問題なく再現できました。
そのほかはダメです。なのでXPでの検証FireFoxで行ってください。

最後にWin2000はどのブラウザもだめです。
CSSはしっかり動いているので、環境によって背景の見え方がかわるというだけなら、どの環境でも大丈夫だとおもいます。

ちなみにMacは未検証です。

サンプル作ってみました。
http://tug.lomo.jp/web_font_test_case/bg_test/


最後にもう一度。このCSSWindow幅を変更している時にしか変化を確認できません。
また、環境によって背景が変化しますが、あまり気づかれないとおもいます。
あくまで、おまけの隠しテクニック的な感じで。
| CSS | 00:48 | comments(0) | trackbacks(0) | - | - |はてなブックマーク - 使えそうで使えないCSSの背景遠近法 | このエントリーをはてなブックマークに追加









http://blog.tug.lomo.jp/trackback/990183