팝업 채팅 스킨

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의 렌더링 버그 때문에 그림자의 크기는 글꼴 크기에 따라 변경 되는 것이 아닌 고정 크기로 되어 있습니다. 또한 채팅창의 너비는 그림자의 크기 때문에 역시 고정으로 되어 있어요

게시자: 하루

하루 입니다! Twitch 스트리머이며 사진 보정과 영상 보정 도와드리고 있어요

댓글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

%d 블로거가 이것을 좋아합니다: