webkit 系のブラウザでは -webkit-box-reflect を使って簡単に効果を付けることができるが、Firefox4 や 5 などでは疑似要素とマスク用svgを使って少し手間をかけないとできない。

CSS3 を使った鏡面反射効果 サンプル

css コード

Firefox では、疑似要素 after を使って鏡面反射用要素を作り、mask を使ってフェードアウト効果を、-moz-transform を使って鏡面効果（反転）を付けている。

この疑似要素の背景に元の要素を -moz-element を使ってセットすることで鏡面反射の効果を作っている。

/* Firefox, webkit 共通の設定 */
body {
    background: black;
}
#reflect1 {
    width: 200px;
    padding: 15px;
    background: pink;
}
.reflect {
    position: relative;
}

/* webkit 用の指定 */
.reflect {
    -webkit-box-reflect: below 10px -webkit-gradient(linear, left bottom, left top, from(rgba(255, 255, 255, .5)), to(transparent));
}

/* Firefox 用の指定 */
.reflect:after {
    content: "";
    position: absolute;
    /* .reflect と同じサイズのブロック（反射部分）を真下に作る。*/
    top: 100%; right: 0; bottom: -100%; left: 0;
    z-index: -1;
    opacity: .5;
    /* 反射部分が徐々に消えていく効果を出すマスク(svg)。 */
    mask: url(mask.svg#reflection-mask);
    /* 反射部分を 10px 下げて、鏡面効果（反転）させる。 */
    -moz-transform: translateY(10px) scaleY(-1);
}
#reflect1:after {
    /* .reflect:after で作成したブロックに、#reflect1 の要素を背景として適用する。
       .reflect:after の鏡面反射効果が適用される。*/
    background: -moz-element(#reflect1);
}

html コード

<div id="reflect1" class="reflect">
    <img src="favicon.ico" /> Hello World!<br />from Serendip.
</div>

マスク用 svg コード

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <mask id="reflection-mask" maskContentUnits="objectBoundingBox">
        <rect x="-0.1" width="1.2" height="1" fill="url(#reflection-gradient)"/>
    </mask>
    <linearGradient id="reflection-gradient" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
        <stop stop-color="white" stop-opacity="0.8" offset="0"/>
        <stop stop-color="white" stop-opacity="0" offset="100%"/>
    </linearGradient>
</svg>

参考サイト：Firefox 4: Drawing arbitrary elements as backgrounds with -moz-element ✩ Mozilla Hacks – the Web developer blog
　　　　　　CSS reflections for Firefox, with -moz-element() and SVG masks | Lea Verou
　　　　　　Stu Nicholls | CSSplay | CSS3 Relections in Firefox, Safari and Chrome

上記記事での CSS で outline の部分を box-shadow に変更し、影を内側に向けるために inset を指定する。
また、影の色を背景色と同じものにしておく。
疑似要素で作られるボックスの top、left、bottom、right を 1px から 0 に変更する。

CSSコード

.blur, .blur > img {
    margin: 0; padding: 0;
    border: 0;
}

.blur {
    position: relative;
    display: inline-block;
    font-size: 0;
    line-height: 0;
}

.blur:after {
    position: absolute;
    left: 0; top: 0; right: 0; bottom: 0;
    -moz-box-shadow: inset 0px 0px 15px 15px #fff;
    -webkit-box-shadow: inset 0px 0px 15px 15px #fff;
    box-shadow: inset 0px 0px 15px 15px #fff;
    content: " ";
}

HTMLコード

<span class="blur"><img src="./owl.jpg" /></span>

以上で、画像の輪郭をぼかすことができた。
動作するのは、Firefox、Safari、Google Chrome、Opera といったモダンブラウザのみ。IE はダメ。

デモ

参考：Fancy Inset CSS Image Borders | Evan Byrne’ Writings

デモ（CSS でテーブルの行をハイライトしてからアニメーションで元の色に）

.odd {
    background-color: rgb(230, 230, 240);
}
.even {
    background-color: rgb(240, 240, 220);
}
@-webkit-keyframes tr_odd_color {
    0% {
        background-color: rgb(255, 200, 200);
    }
    40% {
        background-color: rgb(230, 230, 240);
    }
    100% {
        background-color: rgb(230, 230, 240);
    }
}
@-webkit-keyframes tr_even_color {
    0% {
        background-color: rgb(255, 200, 200);
    }
    40% {
        background-color: rgb(240, 240, 220);
    }
    100% {
        background-color: rgb(240, 240, 220);
    }
}
.odd:hover,
.even:hover {
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
}
.odd:hover {
    -webkit-animation-name: tr_odd_color;
}
.even:hover {
    -webkit-animation-name: tr_even_color;
}

参考：Surfin’ Safari – Blog Archive » CSS Animation

background-image: -moz-linear-gradient(
    top,
    rgb(200, 250, 150)   0%,
    rgb(180, 230, 130)  30%,
    rgb(160, 210, 110)  70%,
    rgb(140, 190,  90) 100%
);
background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.0, rgb(200, 250, 150)),
    color-stop(0.3, rgb(180, 230, 130)),
    color-stop(0.7, rgb(160, 210, 110)),
    color-stop(1.0, rgb(140, 190,  90))
);

参考：-moz-linear-gradient – MDC
　　　Safari Dev Center: Safari CSS Visual Effects Guide: Gradients
　　　CSS3 グラデーション（gradient）の指定方法 | CSS Lecture
　　　CSS3 「gradient」と「@font-face」
　　　CSS3 Gradient Generator

そこで、display:table; を使い clear を使わずにカラム内の float の効く範囲を限定させて clear を使わずに float の解除と同様の効果を再現する。

#block-first {
    width: 100%; /* for inside float */
    display: table; /* for inside float */
}
#block-first-left {
    float: left; /* for inside float */
}

float を使う場合と違って親要素のブロック内に収まるので、親要素の高さが子要素の高さに対応したり、センタリングも容易にできる。
IE6 と IE7 に対応させるために CSS ハックを使って、子要素の display プロパティを inline にして !important で強制させている。

リスト要素タグ(<li>)の前後に改行やスペースが入ると margin を 0 に設定していても間隔が入るので、タグの間に改行・スペースが入らないように記述している。

IE6,7,8、Firefox3、Firefox3.5、Safari4、Google Chrome2、Opera10で動作確認済み。

サンプルページ

CSS code

ul {
    margin: 20px; padding: 20px;
    background-color: #ccf;
    text-align: center;
}
li {
    margin: 0px; padding: 20px;
    background-color: #fcc;
}
*html li { /* for ie 6 */
    display: inline !important;
}
*:first-child+html li { /* for ie 7 */
    display: inline !important;
}
#list1 li {
    display: inline-block;
}
#list2 li {
    float: left;
}

HTML code

<ul id="list1"
><li>リスト</li
><li>リスト</li
><li>リスト</li
></ul>

<ul id="list2">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>

デモ：CSS media query によるスタイル切り替え

<style type="text/css" media="screen and (max-width: 500px)">
<!--
body {
    background-color: #fcc;
}
#note:after {
    content: "500";
}
-->
</style>
<style type="text/css" media="screen and (min-width: 500px) and (max-width: 1000px)">
<!--
body {
    background-color: #cfc;
}
#note:after {
    content: "500 ~ 1000";
}
-->
</style>
<style type="text/css" media="screen and (min-width: 1000px)">
<!--
body {
    background-color: #ccf;
}
#note:after {
    content: "1000";
}
-->
</style>

参考：another great CSS media query demo at hacks.mozilla.org
　　　CSSメモ: メディアクエリ
　　　Media Queries

text-shadow は "テキストそのもの" と "text-decoration" に対して効果が適用される。

書き方

"影の色"、"水平方向の移動距離"、"垂直方向の移動距離"、"ぼかしの強さ" の各値を指定する。
影の色を省略するとフォント色になり（Safari4、Google Chrome ではシャドウが適用されなくなる）、ブラーを省略するとぼかし効果がなくなる。
カンマ区切りで複数のシャドウを組み合わせることもできる。

text-shadow: <color>? <offset-x> <offset-y> <blur-radius>?;
text-shadow: <offset-x> <offset-y> <blur-radius>? <color>?;

サンプル

.type1 { text-shadow: none; }
.type2 { text-shadow: 5px 10px; }
.type3 { text-shadow: blue 5px 10px; }
.type4 { text-shadow: 5px 10px 5px; }
.type5 { text-shadow: blue 5px 10px 5px; }
.type6 { text-shadow: 5px 10px 5px; }
.type7 { text-shadow: 5px 10px 5px blue; }
.type8 { text-shadow: 5px 5px 15px red, 0 0 10px blue, 0 0 30px yellow; }

スクリーンショット

Firefox3.5

Safari4.0.1

Opera 9.64

Google Chrome 2.0.172.33

IE8

参考：text-shadow – MDC

text-indent を使ってテキストを不可視領域に移動させて画像置換（Image Replacement）を行うと、画像非表示で CSS 有効の場合に何も表示されない問題があるので、z-index を使って画像置換を行ってみた。

次のスクリーンショットのように、画像を非表示にした場合はテキストが表示される。

Firefox 2.0.0.20
Firefox 3.0.5
Opera 9.63
IE6
IE7
Google Chrome 1.0.154.46
Safari 3.2.1
で動作を確認。

Demo （デモ）

Demo （デモページ）

HTML タグ

<ul id="list">
    <li id="rollover1"><a href="javascript:void(0);"><span>rollover1</span></a></li>
    <li id="rollover2"><a href="javascript:void(0);"><span>rollover2</span></a></li>
</ul>

CSS コード

/* rollover style */
#list li {
    position: relative;
    float: left;
    z-index: 1;
    width: 100px; height: 25px;
    margin: 0 10px 0 0; padding: 0;
    list-style-type: none;
}
#list li a {
    display: block;
    width: 100px; height: 25px;
}
#list li a span {
    position: relative;
    display: block;
    width: 100px; height: 25px;
    z-index: -1;
    overflow: hidden;
}

#list #rollover1 a {
    background: transparent url(rollover.png) no-repeat left top;
}
#list #rollover1 a:hover {
    background: transparent url(rollover.png) no-repeat -100px top;
}
#list #rollover2 a {
    background: transparent url(rollover.png) no-repeat left -25px;
}
#list #rollover2 a:hover {
    background: transparent url(rollover.png) no-repeat -100px -25px;
}

IE6 でのみ JavaScript を使っている（ie7-js – Google Code の IE8.js を利用）。
IE 以外ではドロップダウン部分の背景に透過PNGを利用している。

サンプルページ（Sample Page）

スタイルシート（CSS）

#mainmenu li {
    list-style-type: none;
}
#mainmenu > li {
    position: relative;
    float: left;
    margin: 1px; padding: 5px;
    background-color: #ddd;
    z-index: 1;
}
/* for ie 6 and 7 */
*html .submenu,
*:first-child+html .submenu {
    background-color: #ccf;
}
.submenu {
    display: none;
    position: absolute;
    left: 0;
    margin: 0; padding: 5px;
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1+/AAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTM5jWRgMAAAAVdEVYdENyZWF0aW9uIFRpbWUAMDkuMS4yMnZ25NMAAAAYSURBVBiVYzxz5v8ZBiIAEzGKRhVSTyEAdeYDdzZ7+wMAAAAASUVORK5CYII=) repeat left top;
}
#mainmenu > li:hover {
    background-color: #ddf;
    z-index: 2;
}
#mainmenu > li:hover .submenu {
    display: block;
    width: 100px;
}
li a,
li a:link,
li a:visited {
    display: block;
    margin: 0; padding: 5px 10px;
    color: #339;
    text-decoration: none;
}
li a:active,
li a:hover {
    color: #933;
    background-color: #fcc;
}
/* for ie 6's newline bug on list tag */
*html .submenu li a,
*html .submenu li a:link,
*html .submenu li a:visited {
    width: 100%;
    vertical-align: bottom;
}

HTML

<head>内でIE6用にスクリプト（IE8.js）を読み込む

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

ドロップダウンメニュー部分のタグ

<ul id="mainmenu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Edit »</a>
        <ul class="submenu">
            <li><a href="#">Copy</a></li>
            <li><a href="#">Paste</a></li>
            <li><a href="#">Select All</a></li>
        </ul>
    </li>
    <li><a href="#">Tools »</a>
        <ul class="submenu">
            <li><a href="#">Option</a></li>
        </ul>
    </li>
    <li><a href="#">Help »</a>
        <ul class="submenu">
            <li><a href="javascript:alert('CSS dropdown menu');">About...</a></li>
        </ul>
    </li>
</ul>