CSS3 Radial Gradient を自分の望み通りのサイズや開始位置で配置するための方法いくつか (1) / JeffreyFrancesco.org

円形グラデーションで照明が当たったような効果を薄く掛けて背景にアクセントをつけるのは画像処理でも割とよく使われる手法ですが、同じ効果を CSS で body の背景に重ねたい場合は、背景色の上に CSS3 Gradient を使って透過した円形グラデーションを配置すれば、画像を使わずに同じ効果をつける事が可能です。

画像: しかし例えばこのようにロゴ中央部を基準にしたいのだが、ロゴを置いたコンテナボックスにグラデーションを配置してしまうと、グラデーションがボックスの境目までしか反映されないので、望み通りの結果にはならないただ、単純に body の中央や角を開始位置にするのであれば簡単なのですが、例えば先の画像のように可変あるいは固定幅でセンタリングしたボックス内にあるロゴ画像の中央辺りを基準位置にし、サイズはある程度の大きさを確保した上でウィンドウ幅を変えても固定、しかもボックス内で切れる事なく body の背景をベースにしてロゴの周辺に掛けたいのだが…というような場合、その挙動をよく理解してないと、思うようにグラデーションの配置が出来ずにハマる事になります（サイズに関しては Mozilla 系の記述の場合は特に…というよりこちらの形式の方が仕様勧告通りの実装になる訳なので、将来的にはこちらの方の記述をマスターするのが必須事項になるかと思いますが）。

という訳で、よくお分かりの方には今さらな話でしょうが、自分用メモも兼ねて、今回（と次回に分けて）はその辺のお話を何パターンか例にあげつつ書いてみたいと思います。

共通で使用するマークアップは次のような、どこにでもよくある割合普通なもの（body 以下のみ抜粋）で、#wrapper は今回は幅720pxでセンタリング配置という事にしておきます（プラス背景色と文字色を設定した基準となるサンプル）。

<body>
<div id="wrapper">
<h1>Sample Logo</h1>
<p>Lorem ipsum dolor sit amet...</p>
</div>
</body>

そして、今回はグラデーション効果のサイズを半径250px・中心は垂直方向は常に body 最上部で固定。水平方向をパターンによって色々と変えてみたいとします。なお、ここから以下の HTML サンプルは Mozilla 系および Webkit 系のブラウザでしか思ったように表示出来ないので、閲覧の際は Firefox 及び Chrome か Safari をご利用下さい。両方あると比較が出来るのでベター。ブラウザ行き来するの面倒くさい！という方はスクリーンショットも置いておくのでそちらをご参考に…

まずは中央部に配置してみる

Webkit 系であれば次の CSS だけで十分（サンプル/スクリーンショット）。

body {
    background-image: -webkit-gradient(
        radial,
        50% 0, 0,
        50% 0, 250,
        from(rgba(255, 255, 255, 0.8)),
          to(rgba(255, 255, 255, 0.0))
    );
    background-repeat: no-repeat;
}

そして Mozilla 系は、似たような感じで次の要領で行けると思いきや、残念ながら上手くいきません（サンプル/スクリーンショット）。

body {
    background-image: -moz-radial-gradient(
        50% 0,
        circle,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.0)
    );
    background-repeat: no-repeat;   
}

これはグラデーションサイズにピクセル指定が出来ず「一番近い位置の辺もしくは角」か「一番遠い位置の辺もしくは角」という、ボックスの辺と角を基準にした指定しか出来ないからです。上の CSS で例えば circle の後ろに closest-corner を追加しても、#wrapper 幅が720px なので半径360pxは最低確保されてしまいます。

じゃあどうすればいいの？ですが、Mozilla 系の Gradient の記述では color-stop（色の停止位置）をピクセル単位で指定が出来ますので（逆に Webkit 系では複数の色を配置したい場合でも全体に対する割合でしか指定が出来ない訳ですが）先の記述に下のようなの記述を一行追加するだけです。

body {
    background-image: -moz-radial-gradient(
        50% 0,
        circle,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.0) 250px,
        rgba(255, 255, 255, 0.0)
    );
    background-repeat: no-repeat;
}

つまり、開始位置から250px離れた範囲まではグラデーションを掛けるけど、250px離れた位置からそれ以降は100%透過色でベタ塗りする…という指定をすればいい訳ですね。この辺私は普段のテストが Webkit ベースなので割と悩んだところでした。分かってしまえば簡単なのですが…汗

という訳で、上記の両方をまとめて指定してやれば、どちらのブラウザでも思った通りの配置となります（サンプル/スクリーンショット）。

続いて、ロゴの中心部分の延長上に配置してみる

この場合 #wrapper の左端から約80pxの位置がロゴの中央に当たるのですが、#wrapper が幅固定なので先のさえ出来ればこちらは割と簡単。どうするかといえば、background-position プロパティに負の値を指定して動かしてやるだけです。

body {
    background-image: -webkit-gradient(
        radial,
        50% 0, 0,
        50% 0, 250,
        from(rgba(255, 255, 255, 0.8)),
          to(rgba(255, 255, 255, 0.0))
    );
    background-image: -moz-radial-gradient(
        50% 0,
        circle,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.0) 250px,
        rgba(255, 255, 255, 0.0)
    );
    background-repeat: no-repeat;
    background-position: -280px 0;
}

先の CSS で既に中央にグラデーションが位置してますから、そこからロゴ中央部までのピクセルオフセット値を計算し、その分マイナス値を指定して右側にシフトしてやります。この場合 #wrapper の幅は720pxなので、右端から中心部までの距離はちょうど半分の360px．そこから80pxを引いた280pxをマイナスしてやればいい事になりますね（サンプル/スクリーンショット）。

さて、上の例はセンタリングする #wrapper が固定幅だったので、計算さえ出来てしまえば楽でしたが、これが可変幅のリキッドレイアウトになってくるとまた話は難しくなってきます。単純に何ピクセル移動すれば希望の位置に、という訳にはいかないですから。

けど、上手く考えれば可変幅でもロゴの中央部上に配置する事は可能です。さてその方法は…ここまで書いて疲労したので次回に続く。涙