CSS3って奥深い.

タイトルどおりです。CSS3ってなかなか奥深いですね。

私のメインサイトを作るにあたって、CSSとHTMLと、どっぷり足を突っ込ませていただきました。

で、まぁ気になるTipsをメモ程度に書いて行きたいと思います。

まず今日はこのサイトを紹介致します。「CSS-TRICKS」（http://css-tricks.com/）。

ふらっと立ち読みした雑誌にこのサイトを作ったChris Coyierさん（http://chriscoyier.net/）のインタビューが載っておりまして、そのインタビューが面白かった。

そんなこんなで、このサイトも見てみたのですが、これもまた面白い。CSSだけじゃなくて、JavaScriptやらHTMLやら、サイト構築に関するいろんなアイディアが満載。これを見てるだけで、いろいろ自分のサイトに使いたくなってしまいました。

このサイトも、あらゆるCSSの技術を駆使して作られてるっぽいです。で、日々進化していってます。

自分のサイトを作るにあたって、まずはCSSを使った影付けを学びました。CSSで影付けられることすら知りませんでした。これができるなら、無駄な画像作らなくてすむやんということで、即採用しました。

影付けにもtext-shadowとbox-shadowがありますが今日はbox-shadowについて書きます。

HTMLのブロック要素であれば大抵適応可能だと思います。全ては調べてませんが今のところ全部オッケーです。基本的な構文は、

box-shadow: 5px 5px 10px #000;

です。初めのパラメータが横方向、次が縦方向、10pxとなっているのがぼかし具合です。最後に影の色を指定します。透過度をもったRGBA値で指定することも可能です。その場合は

box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);

のように書きます。以上です。

ただし、古いブラウザでは見れない場合があるのでベンダープレフィックスをつけて対応します。このことを踏まえた上で書き直すとこのようになります。

-webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4); /*Chrome用*/
-moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4); /*FireFox用*/
-ms-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4); /*IE用*/
-o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4); /*Opera用*/
box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4); /*標準*/

これで基本的には行けるはずです。

ちなみに、このサイトでも使っているような内側に影をつける場合は”inset”オプションを書き加えます。

box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.4) inset;

使えると何かと便利なので、使ってみてください。