2010-03-10

http://anond.hatelabo.jp/20100310030226

Firefoxズーム機能では、背景として指定した画像が拡大されないって仕様があるの。実際、ズーム機能なんて使っている人がいるのか疑問だけど…(Ctrlと+、-の同時押しでズームイン・アウト、Ctrlと0を同時押しでリセット)。ズームインをしていくと、文字だけがでかくなっていって背景からはみ出ていっちゃうの。確かSleipnirにも同じような仕様があったはず。

CSS3で影を作れば、ズームインしていくと影もズームインしてくれて一件落着なんだけど、画像で影を作ってズームインにも対応しなきゃいけないとなるとさあ大変。影を8つに分割する必要が出てくる。

┌─┐

│ │

└─┘

こんな感じに。┌は左上に固定、┐は右上、└は左下、┘は右下。│は左端と右端に配置して縦に繰り返し、─は上端と下端に配置して横に繰り返し。こうすれば影をつけなきゃいけないブロックの大きさが変動しても、影がきれいにつきまとってくれる。

CSS3になって、背景画像を複数指定できるようになったけど、「どこからどこまで繰り返し」みたいな指定はできない。

┌ 左上 繰り返しなし

┐ 右上 繰り返しなし

└ 左下 繰り返しなし

┘ 右下 繰り返しなし

─ 上  横繰り返し

─ 下  横繰り返し

│ 左  縦繰り返し

│ 右  縦繰り返し

こういうふうになるようCSSを書いたとして、「┌ 左上 繰り返しなし」と「─ 上  横繰り返し」は左上で少しかぶるでしょ。αこみのPNGだったら重なった部分だけ色が変わっちゃう。そんなこんなで、いろいろなことをやらなきゃいけなくなっちゃうというわけなのです!

あ、ちなみにCSS3のbackground-sizeを使えば背景画像の大きさの調整ができます。

記事への反応 -
  • http://www.pxgrid.com/2010codingcontest/ http://blog.webcreativepark.net/2010/02/22-015220.html http://css-happylife.com/log/coding-contest/000758.shtml 第2回コーディングコンテストが開催されると先ほど知り、さっそくコー...

    • 横からですが、正に思うんだけど、αコミPNG画像でシャドウじゃだめなんだろうか? レガシーでもIE6じゃなきゃある程度いけるし。 HTML5とかを見てると思うのですが、レガシーで出来る...

      • Firefoxのズーム機能では、背景として指定した画像が拡大されないって仕様があるの。実際、ズーム機能なんて使っている人がいるのか疑問だけど…(Ctrlと+、-の同時押しでズームイン・...

        • よくわかりませんが、それはFirefoxのバグではなくて?ズームインしたときに影が崩れるのが公式な仕様だから、CSS3を使うという事ですか? ともあれ、参考になりました。ありがとうご...

記事への反応(ブックマークコメント)

ログイン ユーザー登録
ようこそ ゲスト さん