CSS box-shadow로 픽셀화된 이미지 그리기

CSSbox-shadow로 그릴 수 있다는 것을 알고 계십니까? 제이슨 델리아(Jason Delia)가 픽셀화한 멋진 랄프(Ralph)를 만나기 전까지는 저도 마찬가지였습니다. 그것과 내 못생긴 것을 확인하십시오.

시작하자!

먼저 div를 사용하여 블록을 만듭니다.

상자 그림자는 div의 width 및 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)를 그렸습니다. 천만에요. 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: 어쨌든,