タグ

backgroundに関するtomo_pのブックマーク (4)

  • Using Parallax Scrolling in Web Design

    Increasingly, more designers are using parallax as a key feature of their designs and themes. Here are a few things to confider before you start using it in your websites. Much like fashion trends, web design also goes through its own phases and cycles. A trend or technique that is hot today might fall out of favor tomorrow, whereas something that was once considered ridiculous might just come bac

    Using Parallax Scrolling in Web Design
    tomo_p
    tomo_p 2011/08/24
    パララックス効果
  • CSS3での背景指定方法のまとめ

    CSSであれこれやっていたら、まず間違いなく使うであろう背景関連のプロパティ。 CSS3ではこれまでより多くの指定ができるようになります。 それらの新しいプロパティや値はいったいどういうものなのか、調べてみました。 主に参考にしたのは以下の2つです。 CSS Backgrounds and Borders Module Level 3現在の仕様です。CSS 背景 & ボーダー モジュール Level 32011年2月15日版の仕様の日語訳です。プロパティと値の説明はこちらを参考にしました。背景のレイヤー背景は複数のレイヤーを持つことができ、レイヤーの数はbackground-imageに指定されたカンマ区切りの値の数によって決められます。noneの指定も一つのレイヤーを生成します。 背景レイヤーの重なり方ですが、初めに指定したものから手前に来ますので、注意してください。 例として、下のr

    CSS3での背景指定方法のまとめ
  • ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ

    ディスプレイサイズ(ブラウザサイズ)いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ(ブラウザ)のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します! 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max

  • Firefox 3.0.xでも背景画像が1pxズレる – Kamurogi Blog

    下記のようなHTML構造で、bodyタグに背景画像をbackground-position: center top;みたいに中央配置したい場合があったりします。 <body> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </body> でもこれbodyタグに指定すると1pxズレちゃうんですね。 IEだと1pxズレる問題は各所で「bodyタグにpadding-left: 1px;を指定したら回避できるよ」って感じで紹介されてるけど、実はFirefox 3.0.xやSafariなどにも同じような問題があって久しぶりにハマってしまった。 まずはググって調べてみたところSoh Tanakaさんのブログから参考になる記事を発見。 垂直スクロールバーの幅のサイズが奇数になってるのが原因みたいだ。 随分

  • 1