CSS로 게임위드 마스코트 만들기.

GameWith Advent Calendar 2018

이 글은 GameWith Advent Calendar 2018의 14일째!

CSS로 게임위드 마스코트 만들기.

오늘 CSS에서 마스코트'생얼소스'를 만들려고 합니다.
생얼이 뭐였죠?그렇게 생각하시는 분들도 계실 거예요.
↓ 이것은 404페이지에 나오는 이 아이를 가리킨다!
GameWith
진짜 아무리 봐도 귀여워요.(⁄ ⁄•⁄-⁄•⁄ ⁄)⁄
그럼 바로 일을 시작합시다
먼저 DOM 섹션입니다.

<div class="suppin">
    <div class="body"></div>
    <div class="eye left"></div>
    <div class="eye right"></div>
    <div class="hand left"></div>
    <div class="hand right"></div>
    <div class="leg left"></div>
    <div class="leg right"></div>
    <div class="sweat"></div>
</div>

다음에는 CSS에 가고 싶지만, 게임위드는 평소에less를 이용하기 때문에 이번에도less로 하고 싶어요.
우선 기본 정보의 설정이다.

@suppinColor:    #37496b;
@suppinSubColor: white;
@suppinSize:     75px;

.suppin {
    position: relative;
    width: @suppinSize;
    height: @suppinSize * 1.5;
}

신체 코드를 추가하다.

@bodySize:  @suppinSize;

.suppin {
    /*前略*/
    >.body {
        position: absolute;
        left: 50%;
        top: 0;
        margin-left: -1 * @bodySize / 2;
        width: @bodySize; 
        height: @bodySize * 1.25;
        background: @suppinColor;
        border-radius: 50% ~'/' 60% 60% 40% 40%;
    }
}

이렇게 되면 몸이 좋아진다.

어... 어떻게 보면 달걀이지?!내 소원!?부식하다
그럼 바로 눈 코드를 추가하죠

@eyeSize:   @suppinSize * 0.2;

.suppin {
    /*前略*/
    >.eye {
        position: absolute;
        top: @suppinSize * 0.4;
        width: @eyeSize;
        border-style: solid;
        border-color: @suppinSubColor;
        border-width: 0 0 @eyeSize * 0.5 0;
        border-radius: 50% ~'/' 0 0 100% 100%;
        z-index: 1;

        &.left {
            right: 50%;
            margin-right: @eyeSize * 0.1;
            transform: rotate(-45deg);
        }
        &.right {
            left: 50%;
            margin-left: @eyeSize * 0.1;
            transform: rotate(45deg);
        }
    }
}

눈 그리면 민낯 소스, 슬픈 표정 안 나오는데...?
이제 단숨에 발과 손을 추가하세요!

@handSize:  @suppinSize * 0.16;
@legSize:   @suppinSize * 0.15;

.suppin {
    /*前略*/
    >.hand {
        position: absolute;
        top: @suppinSize * 0.7;
        width: @handSize;
        height: @handSize * 1.2;
        border-style: solid;
        border-color: @suppinSubColor;
        border-width: @suppinSize * 0.02;
        border-top-width: 0;
        border-radius: 50% ~'/' 0 0 100% 100%;
        z-index: 1;

        &.left {
            left: @suppinSize * 0.08;
            transform: rotate(-35deg);
        }
        &.right {
            right: @suppinSize * 0.08;
            transform: rotate(35deg);
        }
    }

    >.leg {
        position: absolute;
        top: @suppinSize * 1.2;
        width: @legSize * 0.3;
        height: @legSize;  
        border-style: solid;
        border-color: @suppinColor;
        border-radius: @legSize;
        z-index: 1;

        &.left {
            right: 50%;
            margin-right: @suppinSize * 0.05;
            border-width: 0 0 @suppinSize * 0.1 @suppinSize * 0.05;
            transform: skew(-10deg, 55deg);
        }
        &.right {
            left: 50%;
            margin-left: @suppinSize * 0.05;
            border-width: 0 @suppinSize * 0.05 @suppinSize * 0.1 0;
            transform: skew(10deg, -55deg);
        }
    }
}

Done!이렇게 해서 생얼소스!
땀이라도 두 방울 늘려보세요.(゜ω゜;)

@sweatSize: @suppinSize * 0.12;

.suppin {
    /*前略*/
    >.sweat {
        position: absolute;
        right: -1 * @suppinSize * 0.05;
        top: -1 * @suppinSize * 0.05;
        z-index: 1;

        &:before {
            .sweat_drop(@sweatSize);
            top: 0;
            right: 0;
            transform: rotate(45deg);
        }
        &:after {
            .sweat_drop(@sweatSize * 0.6);
            top: @sweatSize * 1.8;
            right: 0;
            transform: rotate(80deg);
        }

        .sweat_drop(@size) {
            position: absolute;
            content: "";
            width: @size;
            height: @size * 1.7;
            border-style: solid;
            border-color: @suppinColor;
            border-width: @suppinSize * 0.03 0 0 @suppinSize * 0.03;
            border-radius: 50% 50% 0 0 ~'/' 50% 50% 0 0;
        }
    }
}

모처럼 이런 기회가 생겨서 나도 진동하는 영상 효과를 넣고 싶다.

.suppin {
    /*前略*/
    @animationDistance: 2px;
    @animationAngle: 3deg;
    @animationDuration: 0.2s;

    animation: purupuru @animationDuration linear infinite alternate;

    @keyframes purupuru {
        25% {
            transform: rotate(@animationAngle);
            top: @animationDistance;
            left: @animationDistance;
        }
        50% {
            top: -1 * @animationDistance;
            left: -1 * @animationDistance;            
        }
        75% {
            transform: rotate(-1 * @animationAngle);
            top: @animationDistance;
            left: @animationDistance;
        }
    }

이렇게 해서 뽀송뽀송한 민낯이 생겼어요!
사실 이거↑ 생얼소스의 슬랙 비주얼 스티커도 있어요.
항상 스태프들에게 사랑받는다.(*܈`*) 가슴 뛰는 추억 33!
그럼 오늘 블로그는 여기까지입니다.
게임위드를 방문했을 때 이 아이를 만날 수 있다면 꼭 아껴주세요!