CSSボックスの影でピクセル描画画像

CSSで描くことができますかbox-shadow ? ジェイソンデリアによってかなりのドーピングがラルフをピクセル化するまで、どちらも私をしませんでした.それをチェックし、私の醜い.
始めましょう!

まず、divを使ってブロックを作成します。

ボックスの影は次のとおりですdiv 's width and height . あなたが複数の影を適用することができますbox-shadow 影の属性を分けることによってposition-x position-y blur-radius color コンマで.
基本的なビルディングブロック:

.block {
    width: 10px;
    height: 10px;
    box-shadow: 0 0 0 black, 10px 0 0 black;
}

<div class="block"></div>

第二に、座標を使用してイメージを計画。

私はじっと座標を引き出した(x,y) あなたの参考のために私の完璧な心の.ご自由に.The div 左上のボックスを開始します(0,0) . 各箱の影は同じ高さ(20px) 幅(20px) としてdiv .

追加通知margin-bottom イン.heart-shadow . 名前として明らかに聞こえる.box-shadow のサイズを増加させない影ですdiv . 他のDOM要素をカバーするのを防ぐためにマージンを設定したいかもしれません.
HTMLとCSSのコードスニペット

.heart {
                width: 20px;
                height: 20px;
                margin-bottom: 100px;
                box-shadow: 20px 0 0 #60748c, 40px 0 0 #60748c, 60px 20px 0 #60748c,
                    80px 0 0 #60748c, 100px 0 0 #60748c, 120px 20px 0 #60748c,
                    0 20px 0 #60748c, 60px 20px 0 #60748c, 120px 20px 0 #60748c,
                    0 40px 0 #60748c, 120px 40px 0 #60748c, 20px 60px 0 #60748c,
                    100px 60px 0 #60748c, 40px 80px 0 #60748c, 80px 80px 0 #60748c,
                    60px 100px 0 #60748c;
            }
<div class="heart"></div>

私たちは怠惰なので、このチュートリアルではすべてのハードコード.しかし実生活では、何もハードコード化しないようにします.
CSS var ()を使うには良い提案をしました.カラーコードなどの繰り返し値については、プレフィックスを使用してCSS変数として割り当てることができます-- そして、:root 要素.今、変数はグローバルスコープで設定されて以来、どこでもそれを使用することができます.
css var ()の使用法

:root {
    --pink-color: #d87385;
}

.heart-shadow-with-color-variable {
    width: 20px;
    height: 20px;
    margin-bottom: 100px;
    box-shadow: 20px 0 0 var(--pink-color), 40px 0 0 var(--pink-color),
    60px 20px 0 var(--pink-color), 80px 0 0 var(--pink-color),
    100px 0 0 var(--pink-color), 120px 20px 0 var(--pink-color),
    0 20px 0 var(--pink-color), 60px 20px 0 var(--pink-color),
    120px 20px 0 var(--pink-color), 0 40px 0 var(--pink-color),
    120px 40px 0 var(--pink-color), 20px 60px 0 var(--pink-color),
    100px 60px 0 var(--pink-color), 40px 80px 0 var(--pink-color),
    80px 80px 0 var(--pink-color), 60px 100px 0 var(--pink-color);
}

詳細はこちら
あなたの図面の座標を計算するためにオンラインで利用可能な多くのピクセルボックスシャドウジェネレータがあります.私はオンラインで見つけることができる最も美しい発電機でオフライン恐竜を描いたPixelator . Pixelatorの機能を持って良い前の図面の歴史(元に戻す、やり直し)と能力をドラッグし、ピクセルの色になります.私は恐竜をアニメーション化したかったが、私は座標を忘れ続けた.そうです.
チェックアウトマイディノhere . 私の恐竜は点滅します.😂
(
あなたがこれを見ている望み、これはあなたのためです!長い間気をつけてすみませんでした.)
P/S :とにかく