先日行われた、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に関わったみなさま(特に祐也さん、石本さん)、ひとまずお疲れさまでした。また、違った形でお会いできることを楽しみにしています！
0コメント