CSS로 픽셀 아트 만들기

나는 줄곧 화소 예술을 보고 창작하는 것을 좋아했다.online pixel makers가 하나의 일이 되기 전에 나는 자주 몇 시간 동안 연필 도구로 포토샵에서 자신의 화소 예술을 만들었다.본고는 CSS (HTML 조금) 를 어떻게 사용하는지 보여 줍니다. 코드를 사용하여 자신의 픽셀 예술 창작을 할 수 있습니다.
box-shadow의 힘
픽셀 한 무더기 <div> 를 만들고 배경색을 바꾸어 픽셀 예술을 만드는 것은 100% 가능하지만, 여러 곳에서 픽셀을 반복적으로 사용하려면 대량 <div> 픽셀을 추적하고 복제해야 한다.나는 단일<div>으로 픽셀 예술을 만드는 것을 더욱 좋아한다. 이것은 box-shadow 속성 덕분이다.box-shadow 일반적으로 다음 예와 같이 요소 뒤에 그림자 효과를 생성하는 데 사용됩니다.
이것은 우리가 직변 화소 예술을 창작하는 데 어떤 도움이 됩니까?box-shadow 정의에서 모호함과 확산 파라미터를 삭제함으로써 우리는 음영의 측면을 곧게 펼 수 있다.
그런 다음 섀도우를 블록 옆이 아닌 블록 옆으로 이동합니다.다음 규칙에 따라 X 및 Y 오프셋 매개변수를 조정할 수 있습니다.
X 오프셋:

양수 값을 오른쪽으로 이동

마이너스 왼쪽으로 이동

Y 오프셋:

양수 값 아래로 이동

음수 위로 이동

섀도우는 적용된 요소에서 치수를 상속합니다.섀도우를 블록의 오른쪽으로 이동하려면 X 오프셋을 블록의 너비와 동일하게 설정해야 합니다20px.만약 우리가 Y 편이량을 0로 바꾸면, 결과는 두 블록이 나란히 놓인 것처럼 보일 것이다.
픽셀 아트처럼 보이기 시작했어!그러나 이것은 우리에게 두 개의 픽셀만 주었을 뿐 우리는 더 많은 것을 필요로 한다.고맙다box-shadow 속성은 한 가지 효과에만 국한된 것이 아니다.효과를 쉼표로 구분하여 여러 픽셀의 그림자를 만들 수 있습니다.
이제 우리는 어떻게 사용하는지 알게 되었다box-shadow. 진정한 화소 예술을 만들 때가 되었다.

픽셀 고양이 만들기
픽셀 버전의 Pusheen을 만듭니다.만약 당신이 픽셀 예술의 초보자라면, 나는 당신이 기존의 예술 작품을 검색하면, 픽셀 배치 위치의 참고가 될 수 있을 것이라고 건의합니다.이 버전의 Pixel Pusheen을 다시 작성합니다.

그것은 414개의 픽셀(23열 x 18행)으로 구성되어 있다.각 픽셀을 쉽게 식별할 수 있도록 하기 위해서, 나는 포토샵을 사용하여 참고 이미지에 격자를 덮어 놓았다.

픽셀을 어디에서든 그릴 수 있지만, 나는 맨 왼쪽 상단부터 그릴 것이다. 그러면 효과 box-shadow 의 마이너스 변이를 걱정할 필요가 없다.
나는 414 box-shadow 개의 성명을 수동으로 작성하는 것을 피하기 위해 일반적인 CSS가 아닌 SASS를 사용할 것이다.사용자 정의된 SASS 함수와 목록을 사용하여 우리는 자동으로 편향 위치를 계산하고 코드를 더욱 무미건조하게 할 수 있다.
우선, 나는 #cat 블록에 대해 약간의 수정을 진행할 것이다.나는 box-shadow를 블록 자체에 적용하지 않고 블록에 대해 절대적으로 위치를 정하는 위조 요소에 적용한다.왜?box-shadow 공간을 차지하지 않기 때문에 이것은 내가 고양이 덩어리 옆에 다른 원소를 놓으면 내 그림자 위에 있다는 것을 의미한다.만약 우리가cat 블록의 크기를 픽셀 예술의 최종 크기로 간주한다면 우리는 이 문제를 피할 수 있지만, 픽셀의 너비/높이를 단독으로 정의할 수 있는 위조 요소가 필요하다. (음영의 크기는 응용 상자의 음영 요소에서 계승된다는 것을 기억해라.)이러한 변화는 다음과 같습니다.

#cat {
  position: relative;
  width: calc(23 * #{$size}); // Pixel size * # of columns
  height: calc(18 * #{$size}); // Pixel size * # of rows
  margin: 1rem;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: $size;
    height: $size;
    // box-shadow will be applied here
  }
}

다음에 변수를 설정합니다.

// The width/height of each of our "pixels".
$size: 20px;

// Colors
$t: transparent;
$black: #000;
$gray: #cdc9cf;
$dkgray: #a09da1;
$pink: #ffa6ed;

현재 우리는 모든 픽셀이 어떤 색이어야 하는지 추적하기 위해 목록을 만들 것이다.왼쪽부터 첫 번째 줄의 목록을 만듭니다.

$first: ($t, $t, $t, $black, $t, $t, $t, $t, $black);

다음 행마다 새 변수($second, $third 등을 만들 수 있지만 다음 그림과 같이 네스트된 목록을 만드는 것이 좋습니다.

$cat: (
  ($t, $t, $t, $black, $t, $t, $t, $t, $black),// 1st Row
  ($t, $t, $black, $gray, $black, $t, $t, $t, $t, $black, $gray, $black)// 2nd Row
  // Additional rows
);

네스트된 리스트 방법의 장점은 각 셀에 box-shadow 효과를 생성하는 데 필요한 모든 정보를 제공하는 것입니다. 즉, 오프셋 및 섀도우 색상을 계산하는 데 사용되는 X/Y 위치입니다.이러한 정보는 사용자 정의 픽셀화 기능을 사용하여 액세스할 수 있습니다.

픽셀 그리기 위해 SASS 함수 작성
"픽셀화"기능은 색상 목록을 사용 가능box-shadow 정의로 변환하는 번거로운 작업을 수행합니다.다음에 나는 이 함수의 기능을 한 줄 한 줄 설명하였다.

@function pixelize($colors, $size) {
  $result: '';
  $numRows: length($colors);

  @for $rowIndex from 1 through $numRows {
    $y: ($rowIndex - 1);
    $row: nth($colors, $rowIndex);
    $numCols: length($row);

    @for $cellIndex from 1 through $numCols {
      $x: ($cellIndex - 1);
      $color: nth($row, $cellIndex);

      $sep: ', ';
      @if $x == 0 and $y == 0 {
        $sep: '';
      }

      $result: $result + '#{$sep}#{$x * $size} #{$y * $size} #{$color}'
    }
  }

  $result: unquote($result);
  @return $result;
}

첫 줄: 함수는 두 가지 인자를 받아들인다. 픽셀 목록$colors과 픽셀

의 $size이다.

두 번째 줄: $result 변수를 문자열로 초기화합니다.이것은 함수가 수정하고 되돌아오는 변수입니다.

세 번째 줄: 내장length 함수

를 사용하여 목록의 줄 수를 되돌려줍니다

다섯 번째 줄: 순환을 시작하고 X회를 순환한다. 그 중에서 X는 목록의 줄 수이다.순환마다$rowIndex는 1씩 증가한다.

6행: 행의 모든 셀에 대한 Y 오프셋을 계산합니다.SASS 목록은 인덱스 1(인덱스 0이 아님)이므로 현재 인덱스에서 1을 빼면 첫 번째 줄의 Y 오프셋은 0, 두 번째 줄의 Y 오프셋은 1로 추정됩니다

.

7행과 8행: 현재 목록 항목(행의 색상 목록)의 값을 반환하고 그 길이를 계산하여 행의 열 수를 결정합니다

.

열 10: 순환을 시작하고 줄

의 열마다 교체합니다

11행과 12행: 셀의 X 오프셋을 계산하고 해당 색상

을 반환합니다.

14-17 줄: box-shadow 효과에 대한 구분자를 설정하지만 첫 번째 칸의 구분자를 삭제하여 속성 값이 유효한지 확인합니다.

19행: $result 값을 기존 값에 새 셀로 업데이트합니다.

분리기

X 위치*$size = X 오프셋

Y 위치* $size = Y 오프셋

색상

제23과 24줄: $result는 문자열이기 때문에 unquote 함수를 사용하여 인용부호를 포함하는 내용을 삭제합니다.마지막으로 결과를 되돌려줍니다.

최종 결과
그것들을 함께 놓아라. 이것은 우리의 마지막 푸젠 픽셀이다.
아주 깔끔해요!약간의 재구성, CSS 변수의 사용, 그리고 약간의 자바스크립트를 통해 우리는 심지어 사용자로 하여금 그들의 고양이를 위해 자신의 색깔을 선택하게 할 수 있다.
나는 이 문장이 네가 자신의 화소 예술을 만드는 것을 계발할 수 있기를 바란다.설령 그렇지 않더라도, 나는 당신이 box-shadow 속성을 어떻게 사용하여 프로젝트에서 깔끔한 효과를 만드는지 배웠으면 합니다.만약 더 많은 픽셀 예술에 관심이 있다면, 애니메이션을 만드는 예를 포함해서 Geoff Graham의 Fun Times with CSS Pixel Art 를 보십시오.