CSS Houdiniで あそぶ 松本 芳郎 / 株式会社マネーフォワード Fukuoka JS #14

自己紹介 松本芳郎 ● 株式会社マネーフォワード 経費本部 ● フロントエンドエンジニア ● 前職ではデザイナーでした ● Twitter @bennkyougirai

発表内容 CSS Houdini で遊ぶ！

CSS Houdiniとは 1 CSS Houdini is a set of APIs that expose parts of the CSS engine. This makes it easier for developers to create extensions for CSS. CSS Houdini - CSS: Cascading Style Sheets | MDN 雑に言うと、JSで好みのCSSスタイルを作ることができます

CSS Houdiniとは 2 こんなの CSS Houdini: Corner shapes - @iamvdo

CSS Houdiniの使い方 1.CSS用のJSをかく 2. HTML側でJSをCSSの 　モジュールとして読み込む registerPaint('boxbg', class { static get contextOptions() { return {alpha: true}; }...以下省略 CSS.paintWorklet.addModule('boxbg.js'); コードサンプルの引用先はこちら https://developer.mozilla.org/en-US/docs/Web/API/CSS_Painting_API 3. CSSで使う！ { background-image: paint(boxbg); --boxColor: hsla(55, 90%, 60%, 1.0); }

本題

CSS Houdiniであそぶ ● CSS Houdiniでピクセルアート ○ ピクセルアートを書くための オレオレ書式を作る

CSS Houdiniであそぶ ● 考えた書式 pixelArt { /* 1ピクセルのサイズを設定 --pixel-size: 15; /* “/” の前は使用する色を設定。連番で番号が振られる その番号を使って、マス目ごとに色を指定する 0. transparent, 1.#d80200, 2. #706800, 3. #f1b000 */ --pixel-paint: transparent #d80200 #706800 #f1b000 / "0 1 0" "0 1 0" "2 2 2" ; background-image: paint(pixelArt); } 0 1 0 0 1 0 2 2 2 pixel-size

CSS Houdiniであそぶ ● デモ ○ https://codepen.io/m-yoshiro/pen/X WdJQRr pixelArt { --pixel-size: 15; /* 0. transparent, 1.#d80200, 2. #706800, 3. #f1b000 */ --pixel-paint: transparent #d80200 #706800 #f1b000 / "0 0 1 1 1 1 1 1 0 0 0 0" "0 1 1 1 1 1 1 1 1 1 0 0" "0 0 2 2 2 3 2 3 0 0 0 0" "0 2 3 2 3 3 2 3 3 3 0 0" "0 2 3 2 2 3 3 2 3 3 3 0" "0 2 2 3 3 3 2 2 2 2 0 0" "0 0 0 3 3 3 3 3 3 0 0 0" "0 0 2 2 1 2 2 2 0 0 0 0" "0 2 2 2 1 2 2 1 2 2 2 0" "2 3 2 2 1 1 1 1 2 2 2 2" "3 3 2 1 3 1 1 3 1 2 3 3" "3 3 3 1 1 1 1 1 1 3 3 3" "0 0 1 1 1 0 0 1 1 1 0 0" "0 2 2 2 0 0 0 0 2 2 2 0" "2 2 2 2 0 0 0 0 2 2 2 2" ; background-image: paint(pixelArt); }

ご静聴ありがとうございました。