CSS Houdiniであそぶ

CSS Houdini でピクセルアートを書けるスタイルを作ってみました。
FukuokaJS #14で発表した資料です。

https://codepen.io/m-yoshiro/pen/XWdJQRr

Transcript

1. CSS Houdiniで あそぶ 松本 芳郎 / 株式会社マネーフォワード Fukuoka JS #14
2. 自己紹介 松本芳郎 • 株式会社マネーフォワード 経費本部 • フロントエンドエンジニア • 前職ではデザイナーでした • Twitter @bennkyougirai
3. 発表内容 CSS Houdini で遊ぶ！
4. 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スタイルを作ることができます
5. CSS Houdiniとは 2 こんなの CSS Houdini: Corner shapes - @iamvdo
6. 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); }
7. 本題
8. CSS Houdiniであそぶ • CSS Houdiniでピクセルアート ◦ ピクセルアートを書くための オレオレ書式を作る
9. 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
10. 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); }
11. ご静聴ありがとうございました。