◆ 幅と高さ 1px の要素の box-shadow は 1px × 1px で好きな色とオフセットをつけれる

img2cssという画像を完全に css にしてくれるというすごいサイトがあります

最初に聞いた時は 線の組み合わせに変換して svg で出力してるのかなと思いました
ラスタ画像をむりやりベクタ画像にするソフトもありますし

これを web でできるのはすごいなー と思ったのですが 実際はもっと単純で 画像のそれぞれのピクセルの色を取り出して css で 1px ずつ色をつけてるだけでした

仕組みは単純ですが 画像を css に置き換えようという発想がすごいですね


どういうふうに css で変換してるかを出力された css から調べてみると

box-shadow 

これだけです


昔 カラーセレクタ作ろうと div や table でHTML要素を 1px 単位に敷き詰めてそれぞれに background-color を設定したこともありますが 要素 1 つに css なので HTML 構造はこっちのほうがシンプルです
ただ box-shadow の文字列が長すぎて 開発者ツールで確認しようとするとフリーズします

box-shadow の使い方

box-shadow は要素に影をつける CSS プロパティです
SAMPLE1
box-shadow:0 0 3px 3px silver;
SAMPLE2
box-shadow:1px 1px 2px 2px #fce inset;
SAMPLE3
box-shadow:0 3px 1px 1px #793;
こういう使い方が一般的です

色指定と内側にするかの inset 以外に 4 つの数字を指定できます

1つめ : x軸方向にどれだけずらすかです
2つめ : y軸方向にどれだけずらすかです
3つめ : ぼかし具合です 大きいとよりぼやけてふわっとします
4つめ : box サイズをどれだけ広げるかです

どの値も省略すると 0 です
3 つめを 0 にして 4 つめを大きくするとぼやけずに枠が大きくなって border をつけてるようになります

box-shadow の裏技的な使い方

3 つめと 4 つめを 0 にすると要素のサイズの大きさそのままで 要素の裏側に存在します
1 つめと 2 つめでオフセットをつけて好きな座標持ってこれます

SAMPLE4
box-shadow: #f99090 0 -120px,#b0b0f5 -120px 0,#aaf5aa 120px 0,#fff070 0 120px;

こういうことが可能です

要素のサイズを 1px × 1px にしてオフセットで好きな座標にもってくれば 好きなところに好きな色を付けることが出来ます


意外な裏ワザです
でもやりすぎると動作が重くなるので 適度にしておいたほうがいいです