LOG IN

#12 普段使っていないCssプロパティを使ってみよう

by kuroko

少し前になりますが、先日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);
}
}

column-count、column-gap

段組レイアウトはなにを使ってますか?最近はFlexboxが多いですが、このプロパティは知りませんでした。column-countでカラムの数を指定して、column-gapでカラム間のスペースを指定できます。

column-count: 3;
column-gap: 1em;

参考サイト:CSS 段組みレイアウトの使用 - ウェブデベロッパーガイド _ MDN
対応ブラウザ:column-count - Can I use... Support tables for HTML5, CSS3, etc
       column-gap - Can I use... Support tables for HTML5, CSS3, etc

以上、試したものをCodePenにアップしていますので、ご参考ください。

See the pen by @kurokoro on CodePen

まとめ

実務では普段慣れた方法でしまいますが、一度試しておくと次から使いやすいかなと思います。時間内ではあまりたくさんは試せませんでしたが、またちょこちょこ時間とって試していきたいと思います。

次回は6月27日(水)13:30〜を予定しています(会場申請中です)。SVGのシンボルを使ったものを試してみようかと思っています。Facebookのイベントでお知らせいたしますので、チェックしていただけたらと思います。

kurokoroll - Facebook


kuroko
OTHER SNAPS