こんにちわ@tanesho42です。

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

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

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

重ねてみる2枚の画像

でわ、重ねてみよう

透過１０％

#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;
}

透過２５％

#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;
}

透過５０％

#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;
}

透過７５％

#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;
}

透過９０％

#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このページのような使い方は表現の幅が広がり面白いですね。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

posted with ヨメレバ

谷 拓樹 インプレス 2014-07-24