CSSの画像合成表示クロスフェード(cross-fade)を学びました

公開日:  最終更新日:2018/01/07

こんにちわ@tanesho42です。

Webデザイナーに憧れ日々勉強していますが今回はおもしろいCSS技術を知ったので記録として残しておきます。

今回学んだCSS技術は「クロスフェード」という画像を透過して重ねる方法です。

CSS補足解説: クロスフェードを参考にしながら次の2枚の画像を重ねて透過度を少しずつ変えてみるということを試してみました。

重ねてみる2枚の画像

cross-fade-1

cross-fade-2

でわ、重ねてみよう

透過10%

#test10{
	background:-webkit-cross-fade( url(https://freli.net/wp-content/uploads/2014/12/cross-fade-1.png) ,url(https://freli.net/wp-content/uploads/2014/12/cross-fade-2.png) , 10% );
	width:250px;
	height:187px;
}

透過25%

#test25{
	background:-webkit-cross-fade( url(https://freli.net/wp-content/uploads/2014/12/cross-fade-1.png) ,url(https://freli.net/wp-content/uploads/2014/12/cross-fade-2.png) , 25% );
	width:250px;
	height:187px;
}

透過50%

#test50{
	background:-webkit-cross-fade( url(https://freli.net/wp-content/uploads/2014/12/cross-fade-1.png) ,url(https://freli.net/wp-content/uploads/2014/12/cross-fade-2.png), 50% );
	width:250px;
	height:187px;
}

透過75%

#test75{
	background:-webkit-cross-fade( url(https://freli.net/wp-content/uploads/2014/12/cross-fade-1.png) ,url(https://freli.net/wp-content/uploads/2014/12/cross-fade-2.png) , 75% );
	width:250px;
	height:187px;
}

透過90%

#test90{
	background:-webkit-cross-fade( url(https://freli.net/wp-content/uploads/2014/12/cross-fade-1.png) ,url(https://freli.net/wp-content/uploads/2014/12/cross-fade-2.png) , 90% );
	width:250px;
	height:187px;
}

クロスフェードの活用場面

画像を透過して合成できることは分かったけど、どういう場面で使えるのか考えたところパッと思いつきませんでした。

もしかしたら今後活用する場面がくるかもしれませんのでその時のために知識として蓄えておきます。

CSS Images Level 4: cross-fade() exampleこのページのような使い方は表現の幅が広がり面白いですね。



ご愛読ありがとうございます!

よければシェアとツイッターのフォローもよろしくお願い致します!

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