クロスフェードを実現するCSS4のcross-fade()

このエントリーをはてなブックマークに追加

iOS6のMobile Safariではimage-set関数以外にもクロスフェードを実現するCSS4のcross-fade関数が実装されています。

cross-fade関数は元々、CSS3として実装が議論されていましたが最新の仕様ではCSS4に移行しているみたいです(よくわからないけど)。

クロスフェードでは2つの画象がそれぞれ異なる透過度をもって重なって表示している状態を作り出せます。

#img{
	background:-webkit-cross-fade( url(cover.png) ,url(img.jpg) , 0% );
	width:500px;
	height:667px;
}

この場合はcover.pngが0%の透過度、img.jpgが100%の透過度で表示されます。

サンプル

#img{
	background:-webkit-cross-fade( url(cover.png) ,url(img.jpg) , 50% );
	width:500px;
	height:667px;
}

この場合はそれぞれ50%の透過度。

サンプル

#img{
	background:-webkit-cross-fade( url(cover.png) ,url(img.jpg) , 100% );
	width:500px;
	height:667px;
}

この場合はcover.pngが100%の透過度、img.jpgが0%の透過度で表示されます。

サンプル

ちょっと使いどころがわからないのですが、次のページで公開されているサンプルなどを見るとちょっと想像力が膨らむかなと。

CSS Images Level 4 cross-fade() example

transitionあたりが対応してくれるともう少し使いどころが増える気もするんですが。

関連エントリー

レスポンシブイメージを実現するCSS4のimage-set
iOS6のリモートWebインスペクタ
CSS3でセレクトボックスをカスタマイズ

スポンサードリンク

«レスポンシブイメージを実現するCSS4のimage-set | メイン | 10月27日(土)に岡山で「amplifizr, Vol. 2 WebデザイナーのためのjQuery Mobile」に登壇します»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/662
コメントを投稿