タグ

cssとimageに関するterurouのブックマーク (2)

  • 『Googleの検索結果ページは画像を一つしか読み込んでいない ( ・・・を実装する)』

    元ネタは、pologの「Googleの検索結果ページは画像を一つしか読み込んでいない 」から。 う~ん。確かに凄い。 このように一つの画像から、ポジションを切って特定の場所だけを取り出すことが可能とは知らなかった。 どうやらCSSで出来るようなので、実際にやってみました。 例えば・・・ という4色に色分けした画像があって、これを白い領域だけ表示、赤い領域だけ表示と言うような事をCSSを使って実装してみたいと思います。 画像の大きさは全体で、100px × 100pxになっており、それぞれの色分けされた領域は、50px × 50pxの大きさになっています。 CSSはこんな感じ。 <html> <head> <style><!-- div.logo_white { background:url(./logo.gif) no-repeat; overflow:hidden; height:50p

    『Googleの検索結果ページは画像を一つしか読み込んでいない ( ・・・を実装する)』
    terurou
    terurou 2007/10/24
    Googleがやってる、1ファイルにまとめた画像切抜きで表示させるtips。前に話題になってたけどやり方失念してた。/position:absolue; clip:rect(); or background-position: xxx; overflow:hidden;を使う。
  • Googleの検索結果ページは画像を一つしか読み込んでいない (polog)

    T/O CTOから教えてもらったんですが、検索結果のページをFireBugのNetで見るとこんな感じに! 読んでるイメージはこれ。 たぶんjsで切ってるんだと思いますが、そちらも超圧縮されてる徹底ぶり。 偏執狂たれとはこの業界よく耳にする格言ですが、ほんとに脱帽ものの偏執狂っぷりです。Googleすごすぎ。

    terurou
    terurou 2007/08/25
    実際にはCSSのみで画像を切り抜いている。その発想はなかったわ…。
  • 1