2019/03/06 Meguro.css #5 ダーシノ ＠bc_rikko ウェブサイトを ドット化する方法 ＼ＣＳＳだけで／ 

自己紹介 bc_rikko さくらインターネット フロントエンドエンジニア ステータス つくったもの ダーシノ 

NES.css • ファミコン風
 CSSフレームワーク • 世界ランク 4位 (※) • GitHub公式ブログにも登場 ※ GitHub css-frameworkトピックで4番目にスターが多い
 https://github.com/topics/css-framework https://github.com/nostalgic-css/NES.css 

No content

これ全部 box-shadow 

box-shadowプロパティ 

box-shadowプロパティ 基本構文 box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color 参照： https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow (コンマ区切りで複数指定可) 使うのは コレだけ 

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) 元の要素と 同じサイズ 

box-shadowプロパティ .box { width: 100px; height: 100px; box-shadow: 20px 0 red, -20px 0 blue, 0 20px green, 0 -20px orange; } CSS 

ファミコン風ボタン (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 

box-shadowプロパティ .box { width: 50px; height: 50px; box-shadow: 50px 50px red, 100px 50px green, 50px 100px blue, 100px 100px orange; } CSS 

ドット絵 CSS .icon::before { content: ""; /* 1ドットのサイズ */ width: 1px; height: 1px; /* ドット絵 */ box-shadow: …, …,2px 3px black,3px 3px red,…, …,2px 4px red, 3px 4px white,…, …; } 

ドット絵アニメーション 参照： https://bcrikko.github.io/css-collection/other/mario/index.html 

続きはWebで 参照: https://kuroeveryday.blogspot.com/2018/10/draw-and-animate-pixel-art-using-only-css.html 

box-shadow のCSS芸は コスパがいい！ 

めざせ！ box-shadowマスター 

参考リンク • 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