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

スポンサーリンク

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

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

cssSandpaper

csssandpaper01

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

csssandpaper02

左が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行で主要ブラウザ全てに対応させる事が出来ます。

応用させる

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

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

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

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

<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 / アニメーションの説明はこちら

URL :
TRB :

Comments & Trackbacks (5)

  1. とくめい

    サイトデザインについて
    こちらの記事もあわせて如何ですか?
    のデザインが少し見づらいかも

    • シロ

      ご意見有難う座いました!直してみました。見やすくなっていれば幸いです:)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services