Save 37% off PRO during our Black Friday Sale! »

CSS Houdiniであそぶ

C0e40025e5098e025a249b0cda428434?s=47 m-yoshiro
October 12, 2021

CSS Houdiniであそぶ

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

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

C0e40025e5098e025a249b0cda428434?s=128

m-yoshiro

October 12, 2021
Tweet

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. ご静聴ありがとうございました。