背景画像のCSSテクニック
最近ではどのCSSテクニックを見ても、「あーこれこうなってるんでしょー」ぐらいにしか思わなくなっていたのですが、久しぶりに面白いテクニックを紹介していたので紹介。
http://bizcaz.com/archives/2009/01/18-055214.php
http://www.askthecssguy.com/2009/01/mike_asks_the_css_guy_about_a.html
http://econsultancy.com/reports
タイトルにもある通り「背景画像のCSSテクニック」なんだが、http://econsultancy.com/reportsを見ても分かる通りスクロールするとスルッと背景画像が変わる。これをCSSで組んでいるみたいだ。
<body> <div id="block1"> : </div> <div id="block2"> : </div> </body>
HTMLをこんな感じにしといたら。
#block1{ background: url("./images/sample1.jpg") no-repeat 30px 30px fixed; } #block2{ background: url("./images/sample2.jpg") no-repeat 30px 30px fixed; }
CSSをこんな感じにしとけばいいみたい!
背景画像にCSSのアタッチメントでfixedを指定して、「block1」も「block2」も同じところに背景を置いているんだねー
それで、表示領域がblock1からblock2に変わると、背景も変わるので上のリンクのようになるみたいだ。
まだまだ、CSSのおもしろい使い方はあるんだねー。あ、ただしIE6ではうまくいかないので別のCSSを当てとく必要がありそう…
CSS3もおもしろい内容が多いし、HTML5も気になるところ。
まだまだ勉強は続けないといけないね。