Css로 도트 찍어 픽셀아트 만들기

 

Creating Pixel Art With Css

트위터를 하던 중 Creating Pixel Art with CSS 이라는 아주 신기하고, 귀여운 글을 보게되었고, 쉽고 재밌어 보여서 글을 찬찬히 읽었으나 CSSSASS를 잘 알지 못해서 그림자 를 이용한다는 점외에는 이해를 하지 못했다.

그렇지만, css에 대한 아주 얕은 지식을 가지고 있어서 기존의 소스를 조금 고쳐서 귀여운 하트를 찍었으므로 자랑 + 소개로 글을 쓰기로 했다.

먼저 보는 결과물

result

Heart

일단, 도트를 찍으려면 픽셀아트가 필요해서 pixabay에서 pixel 을 검색해서 나온, 귀여운 하트를 보고 바로 선택했다.

1

HTML을 먼저 작성해두고, 작업을 시작했다.

<body>
<div id="luv"></div>
</body>

Codepen에서 scss 소스를 가져왔다.

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

색상은 코랄, 화이트 두 가지만 선언했다.

$t: transparent;
$coral: #ff6f61; //리빙코랄
$white: #ffffff;

소스에서 도트를 찍는 부분을 찾아서 도트갯수를 세면서 열심히 입력했다.

$luv: (
                ($t, $coral, $coral, $coral, $t, $coral, $coral, $coral),
                ($coral, $coral, $coral, $coral, $coral, $coral,$white,$coral,$coral),
                ($coral,$coral,$coral,$coral,$coral,$coral,$coral,$white,$coral),
                ($coral, $coral, $coral, $coral, $coral, $coral, $coral, $coral, $coral),
                ($t, $coral, $coral, $coral, $coral, $coral, $coral, $coral),
                ($t, $t, $coral,$coral,$coral,$coral,$coral),
                ($t, $t, $t, $coral,$coral,$coral),
                ($t, $t, $t, $t, $coral)

);

CSS로 변환하는 과정이 필요해서 구글링을 했더니, 인터넷에서 간단히 변환해주는 사이트를 찾아서 이용했다.

#luv {
    position: relative;
    width: calc(23 * 10px);
    height: calc(18 * 10px);
    margin: 1rem;
}
#luv::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    box-shadow:  10px 0px #ff6f61, 20px 0px #ff6f61, 30px 0px #ff6f61, 50px 0px #ff6f61, 60px 0px #ff6f61, 70px 0px #ff6f61, 0px 10px #ff6f61, 10px 10px #ff6f61, 20px 10px #ff6f61, 30px 10px #ff6f61, 40px 10px #ff6f61, 50px 10px #ff6f61, 60px 10px #ffffff, 70px 10px #ff6f61, 80px 10px #ff6f61, 0px 20px #ff6f61, 10px 20px #ff6f61, 20px 20px #ff6f61, 30px 20px #ff6f61, 40px 20px #ff6f61, 50px 20px #ff6f61, 60px 20px #ff6f61, 70px 20px #ffffff, 80px 20px #ff6f61, 0px 30px #ff6f61, 10px 30px #ff6f61, 20px 30px #ff6f61, 30px 30px #ff6f61, 40px 30px #ff6f61, 50px 30px #ff6f61, 60px 30px #ff6f61, 70px 30px #ff6f61, 80px 30px #ff6f61, 10px 40px #ff6f61, 20px 40px #ff6f61, 30px 40px #ff6f61, 40px 40px #ff6f61, 50px 40px #ff6f61, 60px 40px #ff6f61, 70px 40px #ff6f61, 20px 50px #ff6f61, 30px 50px #ff6f61, 40px 50px #ff6f61, 50px 50px #ff6f61, 60px 50px #ff6f61, 30px 60px #ff6f61, 40px 60px #ff6f61, 50px 60px #ff6f61, 40px 70px #ff6f61;
}

다시 보는 귀여운 결과물

자투리 시간에 할 수 있는 재밌는 작업이다.

result