Frontrend Conference FinalでLTしてきました

先日行われた、Frontrend Conference FinalでLTをしてきました。

発表したのは、CSSで作った画像フィルタ「jpn-filter.css」。

CSS Level3ではfilterプロパティが追加され、指定の要素に彩度・コントラスト・色相環・グレースケール・セピアなどの効果を与えることができます。それぞれのパラメーターが与える効果を確認するには、CSS Filter Effectsが便利です。

今回は、それらを使って画像フィルターを作ってみようという試みです。ただ作るだけではつまらないので、テーマを「日本の文化」にしてみました。

例えば、Ninagawaと命名付けたフィルターは、活気にみち、鮮やかな、蜷川実花さんの写真のような効果をあたえます。

[data-filter='ninagawa'] {

  filter: hue-rotate(300deg) saturate(2) contrast(2.2); /* (2) */

}

[data-filter='ninagawa']::before {

  background-color: rgba(102,3,0,0.2); /* (1) */

  background-image: radial-gradient(farthest-corner at 60% 55%, transparent 20%, rgba(255,51,204,0.4)); /* (1) */

}

全体的に紫っぽい仕上がりになるように、::before擬似要素で紫色の円形グラデーション背景を指定し(1)、filterプロパティで、更に紫寄りの色相環を指定し、彩度・コントラストを強めにして(2)鮮やかな写真になるようにしています。

また、Kurosawaと名付けたフィルターは昔の映画フィルムのような効果をあたえます。

[data-filter='kurosawa'] {

  background-color: #000;

  border-image: url("data:image/png;base64,iVB...") 30 fill round; /* (2) */

  border-top-width: 18px; /* (2) */

  border-bottom-width: 18px; /* (2) */

  filter: grayscale(1) sepia(0.6); /* (1) */

}

グレースケールとセピアを混ぜて、古いフィルムの感じを表現し(1)、border-imageでフィルムの枠線を追加(2)しています。

元ネタは、Simuraiの「filter.css」ですが、ちょうどセッションの合間にご本人ともお話することができ、「要素を重ねて表現力を増やしたのいいね！」と言ってもらえて嬉しかったです。

デモサイトはこちら(Chromeでご覧ください)。

更に詳細は、GitHubにもあげていますのでぜひご覧ください。

そして、Frontrendに関わったみなさま(特に祐也さん、石本さん)、ひとまずお疲れさまでした。また、違った形でお会いできることを楽しみにしています！