Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ダーシノ
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

ダーシノ

March 06, 2019
Tweet

More Decks by ダーシノ

Other Decks in Design

Transcript

  1. NES.css • ファミコン風
 CSSフレームワーク • 世界ランク 4位 (※) • GitHub公式ブログにも登場

    ※ GitHub css-frameworkトピックで4番目にスターが多い
 https://github.com/topics/css-framework https://github.com/nostalgic-css/NES.css
  2. box-shadowプロパティ 基本構文 box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color 参照:

    https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow (コンマ区切りで複数指定可) 使うのは コレだけ
  3. 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) 元の要素と 同じサイズ
  4. box-shadowプロパティ .box { width: 100px; height: 100px; box-shadow: 20px 0

    red, -20px 0 blue, 0 20px green, 0 -20px orange; } CSS
  5. ファミコン風ボタン (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
  6. box-shadowプロパティ .box { width: 50px; height: 50px; box-shadow: 50px 50px

    red, 100px 50px green, 50px 100px blue, 100px 100px orange; } CSS
  7. ドット絵 CSS .icon::before { content: ""; /* 1ドットのサイズ */ width:

    1px; height: 1px; /* ドット絵 */ box-shadow: …, …,2px 3px black,3px 3px red,…, …,2px 4px red, 3px 4px white,…, …; }