kurokoroll（クロコロール）

2018.6.16

少し前になりますが、先日2018年5月28日に開催した「#12 普段使っていないCssプロパティを使ってみよう」のレポートです。

参考サイト

次のサイトを参考にさせていただきました。

実践

scroll-behavior

アンカーリンクなどでスムーズにスクロールにしてくれるプロパティ。FireFoxとChromeにしか対応していないので、実務では使えないけど、いつもJavaScriptでしていたようなものが、CSSでできるもんなんだなと感動！

scroll-behavior: smooth;

参考：scroll-behavior – CSS_ カスケーディングスタイルシート _ MDN

対応ブラウザ：scroll-behavior – Can I use… Support tables for HTML5, CSS3, etc

filter

filterはさまざまなエフェクトをかけれるプロパティです。今回は次のものを試しました。

対応ブラウザ：filter – Can I use… Support tables for HTML5, CSS3, etc

drop-shadow()

box-shadowはよく使いますが、PNGの画像ではそのボックスにシャドウがついてしまうので使えない。参考サイト「box-shadowはもう古い？CSS新時代の「影の落とし方」｜ferret [フェレット]」ではPNGでさてていたので、SVGで試してみたところきれいにシャドウがつきました。SVG内の部分的につけれるかなと思ったのですが、pathにはfilterをかけれませんでした。

filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3));

blur()、brightness()

blur（ぼかし）とbrightness（明るさ）を調節できます。ホバーでぼかしをなくしたり、明るさを抑えたりしてみました。※次のコードはSCSS記法です。

.blur-svg{
	transition: .2s;
	filter: blur(8px);
	&:hover{
		filter: none;
	}
}
.filter: blur(8px);
.blur{
	width: 100%;
	transition: 0.3s ease;
	&:hover{
		filter: blur(8px) brightness(.8);
		transform: scale(1.1);
	}
}