CSS Houdiniであそぶ

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

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

Transcript

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

   View Slide

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

   View Slide

3. 発表内容
   CSS Houdini で遊ぶ！
   

   View Slide

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スタイルを作ることができます
   

   View Slide

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

   View Slide

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);
   }
   

   View Slide

7. 本題
   

   View Slide

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

   View Slide

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
   

   View Slide

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);
    }
    

    View Slide

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

    View Slide