CSS3のtransformやbox-shadowを主要ブラウザ全てに対応させるjsライブラリ・cssSandpaper

これ系はいくつかありますので
1つの選択肢として、という感じ
ですね。css3のtransformや
box-shadowをクロスブラウザ
対応させるjsライブラリですが、
特徴はプロパティを1行で統一
させる事が出来る点です。

css3のtransform（変形）、box-shadow（影）、gradient（グラデーション）ですが、gradientは不完全でした。しかしながらこのスクリプトを応用してアニメーションさせることも出来るようです。

cssSandpaper

各ブラウザで実装したものを比較していました。IEに限らず、主要ブラウザ全てをサポートしています。また、何より独自のプロパティを使うのですが、これが1行で済むので場合によってはなかなか楽では無いかと。

左がChrome、右がIE6です。テキストのドラッグも普通に出来ますね。

例・transform

cssSandpaperを使用した際のtransformのcssの記述例です。

.sample{
-sand-transform:  skew(-17deg, 45deg) rotate(-125deg);
}

デモ

例・box-shadow

.sample{
-sand-box-shadow: -5px -5px 5px black;
}

デモ

例・gradient

.sample{
background-image: -sand-gradient(radial, 40% 40%, 0, 40% 40%, 60, from(#ffffa2), to(#00f));
}

デモ

グラデーションは微妙ですね・・

通常はそれぞれのブラウザにあわせて書きます。例えばFirefoxなら-moz-transform、ChromeやSafariなどのWebkit系なら-webkit-transformという書き方をしますが、このライブラリを使えば、-sand-transform、-sand-box-shadow等の1行で主要ブラウザ全てに対応させる事が出来ます。

応用させる

transformとjsを使ったアニメーションエフェクトを実装する事も出来るようです。CSS-TricksでCSS3とjsを使った時計を実装する記事がありましたが、これをIEでも動かしています。

CSS-TricksのデモはIEでは動かない / cssSandpaperを使って動かしているデモ

jsの中でcss3を使っていますがIEでも動いています。

ライブラリの記述もお忘れなく。

<script type="text/javascript" src="path/to/js/cssQuery-p.js"></script>
<script type="text/javascript" src="path/to/js/jcoglan.com/sylvester.js"></script>
<script type="text/javascript" src="path/to/js/css3Helpers.js"></script>

以下よりDL出来ます。

cssSandpaper / アニメーションの説明はこちら