1. エビスコムの著者NOTE

CSS補足解説: クロスフェード

~: cross-fade(1枚目の画像, 2枚目の画像, %)

cross-fade()はクロースフェードを設定するための関数です。0% では1枚目の画像、100%では2枚目の画像のみが表示され、0%から100%に値を変化させることでクロスフェードの効果が得られます。iOS6のほか、Safari 6とChromeも対応しています。

crossfade()を0%、50%、100%と指定したときの表示。
#fade000 {background-image: 
          -webkit-cross-fade(
          url("wood300.jpg"),
          url("sandwiches300.jpg"),
          0%);}

#fade050 {background-image: 
          -webkit-cross-fade(
          url("wood300.jpg"),
          url("sandwiches300.jpg"),
          50%);}

#fade100 {background-image: 
          -webkit-cross-fade(
          url("wood300.jpg"),
          url("sandwiches300.jpg"),
          100%);}

[掲載モジュール: CSS Image Values and Replaced Content Module Level 4

グーテンベルク時代の
WordPressノート
テーマの作り方(入門編)

グーテンベルク時代のWordPressノート テーマの作り方(入門編)

エビスコム 編著 / 224ページ(初版)/ プリント・レプリカ形式

書籍情報 著者NOTE 『グーテンベルク時代のWordPressノート テーマの作り方(入門編)』について 著者NOTE Amazon Kindleのプリントレプリカ形式を選択した理由 Amazon Kindle

プリント・レプリカ形式は無料のKindleアプリ(PC、Mac、Android、iOS用)やFireタブレットでご利用いただけます。Kindle Paperwhiteなどの電子書籍リーダーやKindle Cloud Readerでは利用できません。対応デバイスをご確認のうえ、ご利用ください。