りんごが好きなのでぃす

MacやiPhone、iPadなどの情報を紹介してますが玄人向けじゃないらしい

CSS3で遊んでみた

旧ブログからインポートしたエントリーなのでリンクが切れている場合があります。画像はインポートしていません。

Safari 3.1を使ってCSS3を体験してみる

現在出回っているブラウザの大半はのCSS1とCSS2に対応している。CSSとはカスケーディング・スタイル・シートなどと呼ばれているもので、大雑把に言えばHTMLが文書の骨格(設計)にあたるプログラムで、CSSはその装飾(背景や文字、配置など)を司るものだと思えば良いと思う。これはインターネットで使われている技術の標準化を推進する団体(W3C)による勧告に基づいている(=W3Cの勧告に準拠していればブラウザが異なっても表示結果に大きな違いは出ない:じゃあIEは…)。

で、CSS3というのは次世代の規格、ということになる。まだまだこの仕様に準拠したブラウザは少ないが、Safariではv3.1からこの規格に準拠した(Firefoxでも一部は既に採用されている)。まだ私もよく分かっていないのだが、とりあえずCSSでアニメーション効果を与えることが出来るそうなので早速試してみた(詳しくはSurfin' Safariを参照)。

以下に3つのボックスが表示されていると思うが、それぞれ異なるCSSを記述してあり、各々違った挙動を示すので試してみて欲しい。ただし、アニメーションをしてくれるのはWebKitレンダリングエンジンとしているSafari(多分Windows用もOK)とRealPlayerMac OS X)のみ。Firefoxなどではアニメーションの過程は反映されず、それ以外のブラウザでは未確認ですが正常には動作しないと思う。

さて、こういう演出はどうやって使えば良いのかしら?

【参考】Safari 3.1の新機能を試すことが出来るサイト@Macin' Blogさん

ここにマウスカーソルを重ねると全体がフェードアウト

マウスカーソル外すとフェードインします(設定時間3秒)

ここをクリックするとエリアもろとも360℃360°回転(初回のみ)
ここにマウスカーソルを重ねるとボーダーラインが太くなり、さらに色が変わります

体験できなかった人用のキャプチャ動画(ソフトウェアの都合上、マウスカーソルはキャプチャされていませんのでご了承下さい)。

[追記]旧ブログからインポートしたエントリのため、上記ギミックは現在動作しません

広告を非表示にする