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

6154244654c5f07cdf7c09da61bfe55f?s=47 ダーシノ
March 06, 2019

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

6154244654c5f07cdf7c09da61bfe55f?s=128

ダーシノ

March 06, 2019
Tweet

Transcript

  1. 2019/03/06 Meguro.css #5 ダーシノ @bc_rikko ウェブサイトを ドット化する方法 \CSSだけで/

  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
  4. None
  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