팝업 채팅 스킨

body {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 2em)
}

body,
html {
    font: $font_sizepx '$font_face', sans-serif;
    background-color: $background_color;
    height: 100%;
    overflow: hidden
}

#log {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: absolute;
    bottom: 20px;
    left: 0;
    padding: 0 1em;
    width: 100%;
    box-sizing: border-box
}

#log div {
    width: calc(100% - 20px);
    background: #fff;
    box-shadow: 1px 1px 0 #8eabc5, 2px 2px 0 #8eabc5, 3px 3px 0 #8eabc5, 4px 4px 0 #8eabc5, 5px 5px 0 #8eabc5, 6px 6px 0 #8eabc5, 7px 7px 0 #8eabc5, 8px 8px 0 #8eabc5, 9px 9px 0 #8eabc5, 10px 10px 0 #8eabc5;
    margin: .5em 0 0;
    padding: 0.3em 0.4em;
    line-height: 1.2em;
    animation: InBox .5s ease, OutBox 1s ease $message_hide_delays forwards;
    -webkit-animation: InBox .5s ease, OutBox 1s ease $message_hide_delays forwards
}

.badge {
    padding: 0.05em;
}

.meta {
    font-weight: 600;
    margin-right: 0.3em
}

.deleted {
    visibility: hidden
}

.message {
    color: $text_color !important;
    word-wrap: break-word;
}

.badge,
.colon,
.name {
    vertical-align: middle
}

img {
    width: 1em;
    margin-right: 0.3em;
    vertical-align: middle !important
}


/* 닉네임 가독성 해결 */

span.meta[style="color: #00FF00"] {
    color: #3FD83F !important
}

span.meta[style="color: #0000FF"] {
    color: #4586FF !important
}

span.meta[style="color: #5F9EA0"] {
    color: #56BFA8 !important
}

span.meta[style="color: #B22222"] {
    color: #FB6767 !important
}

span.meta[style="color: #2E8B57"] {
    color: #1CE048 !important
}

span.meta[style="color: #191970"] {
    color: #8383DE !important
}

span.meta[style="color: #008000"] {
    color: #49CC49 !important
}

span.meta[style="color: #D2691E"] {
    color: #DC8444 !important
}

span.meta[style="color: #FF0000"] {
    color: #FF4A4A !important
}

@keyframes InBox {
    0% {
        opacity: 0;
        margin: 0 -10px -10px 0;
        box-shadow: 0 0 0 #8eabc5
    }
    to {
        opacity: 1;
        margin: .5em 0 0;
        box-shadow: 1px 1px 0 #8eabc5, 2px 2px 0 #8eabc5, 3px 3px 0 #8eabc5, 4px 4px 0 #8eabc5, 5px 5px 0 #8eabc5, 6px 6px 0 #8eabc5, 7px 7px 0 #8eabc5, 8px 8px 0 #8eabc5, 9px 9px 0 #8eabc5, 10px 10px 0 #8eabc5;
    }
}

@keyframes OutBox {
    0% {
        opacity: 1;
        margin: .5em 0 0;
        box-shadow: 1px 1px 0 #8eabc5, 2px 2px 0 #8eabc5, 3px 3px 0 #8eabc5, 4px 4px 0 #8eabc5, 5px 5px 0 #8eabc5, 6px 6px 0 #8eabc5, 7px 7px 0 #8eabc5, 8px 8px 0 #8eabc5, 9px 9px 0 #8eabc5, 10px 10px 0 #8eabc5;
    }
    to {
        opacity: 0;
        margin: 0 -10px -10px 0;
        box-shadow: 0 0 0 #8eabc5
    }
}

이번에는 입체적인 채팅 스킨을 만들었어요!

해당 스킨은 Chrome의 렌더링 버그 때문에 그림자의 크기는 글꼴 크기에 따라 변경 되는 것이 아닌 고정 크기로 되어 있습니다. 또한 채팅창의 너비는 그림자의 크기 때문에 역시 고정으로 되어 있어요