CSSだけでウェブサイトをドット化する方法 / How to pixelize a website using only css

Meguro.css #5 - 2019/03/06

NES.css
https://github.com/nostalgic-css/NES.css

box-shadowを使ってCSSだけでドット絵を描き、アニメーションさせる
https://kuroeveryday.blogspot.com/2018/10/draw-and-animate-pixel-art-using-only-css.html

Mario Animation
https://bcrikko.github.io/css-collection/other/mario/index.html

DotGen.css - CSSドット絵ジェネレーター
https://bcrikko.github.io/css-collection/tool/dotgen/index.html

https://twitter.com/bc_rikko

Transcript

1. 2019/03/06 Meguro.css #5 ダーシノ ＠bc_rikko ウェブサイトを ドット化する方法 ＼ＣＳＳだけで／
2. 自己紹介 bc_rikko さくらインターネット フロントエンドエンジニア ステータス つくったもの ダーシノ
3. NES.css • ファミコン風
 CSSフレームワーク • 世界ランク 4位 (※) • GitHub公式ブログにも登場 ※ GitHub css-frameworkトピックで4番目にスターが多い
 https://github.com/topics/css-framework https://github.com/nostalgic-css/NES.css
5. これ全部 box-shadow
6. box-shadowプロパティ
7. box-shadowプロパティ 基本構文 box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color 参照： https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow (コンマ区切りで複数指定可) 使うのは コレだけ
8. box-shadowプロパティ (50px, 50px) (-50px, -50px) .box { width: 100px; height: 100px; box-shadow: 150px 150px red; } CSS (0,0) 100px × 100px 150px 150px offset (150,150) 元の要素と 同じサイズ
9. box-shadowプロパティ .box { width: 100px; height: 100px; box-shadow: 20px 0 red, -20px 0 blue, 0 20px green, 0 -20px orange; } CSS
10. ファミコン風ボタン (50px, 50px) (-50px, -50px) .button { box-shadow: /* 線: 右, 左, 上, 下 */ 4px 0 black, -4px 0 black, 0 4px black, 0 -4px black, /* 内側影: 右, 下 */ inset -4px 0 gray, inset 0 -4px gray; } CSS
11. box-shadowプロパティ .box { width: 50px; height: 50px; box-shadow: 50px 50px red, 100px 50px green, 50px 100px blue, 100px 100px orange; } CSS
12. ドット絵 CSS .icon::before { content: ""; /* 1ドットのサイズ */ width: 1px; height: 1px; /* ドット絵 */ box-shadow: …, …,2px 3px black,3px 3px red,…, …,2px 4px red, 3px 4px white,…, …; }
13. ドット絵アニメーション 参照： https://bcrikko.github.io/css-collection/other/mario/index.html
14. 続きはWebで 参照: https://kuroeveryday.blogspot.com/2018/10/draw-and-animate-pixel-art-using-only-css.html
15. box-shadow のCSS芸は コスパがいい！
16. めざせ！ box-shadowマスター
17. 参考リンク • NES.css
 https://github.com/nostalgic-css/NES.css • box-shadowを使ってCSSだけでドット絵を描き、
 アニメーションさせる
 https://kuroeveryday.blogspot.com/2018/10/draw-and-animate-pixel- art-using-only-css.html • box-shadow | MDN
 https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow