채팅 형식의 Chat Box CSS입니다.

좌우 반전은 아직 지원하지 않으며, 배경 색상, 폰트에 관한 설정은 Twip에서 한 설정을 따르도록 해뒀습니다.
+ 권장 글자 크기는 16px입니다.

191210 23:52 업데이트 - 스트리머 채팅 우측 정렬 업데이트

적용

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
*,::before,::after{box-sizing: border-box}
html, body {
    margin: 0;
    overflow: hidden;
    height: 100%
}
body {
    background: $background_color;
}
#log {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 10px 10px;
    overflow: hidden;
    font: 600 $font_sizepx '$font_face';
}
#log>div {
    position: relative;
    margin-top: 20px;
    padding-left: 56px;
    animation: fadeUp .5s ease;
}
#log>div.broadcaster {
    padding: 0 56px 0 0;
    text-align: right;
}
#log>div.deleted {
    visibility: hidden
}
#log>div::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: url(https://marshall-ku-tgd.github.io/tmpImages/cat.pngcenter no-repeat;
    background-size: cover;
    border-radius: 5px;
}
#log>div.broadcaster::before {
    left: auto;
    right: 0
}
#log>div .colon {
    display:none
}
#log>div .meta {
    display: block;
    font-size: $font_sizepx;
    line-height: 1.3;
}
#log>div.broadcaster .meta {
    text-align: right;
}
#log>div .meta {
    margin-bottom: 3px;
}
#log>div .meta>img{
    display: inline-block;
    height: $font_sizepx;
    width: auto;
    margin-right: 4.5px;
    float:none!important
}
#log>div .message {
    position: relative;
    display:inline-block;
    background: #fff;
    color: #000;
    border-radius: .4em;
    padding: 10px
}
#log>div .message::after {
    content: "";
    box-sizing: content-box;
    position: absolute;
    width: 17.5px;
    height: 25px;
    border: 0 solid #fff;
    border-width: 0 20px;
    border-radius: 50%;
    clip: rect(0,37px,15px,27px);
    display: block;
    z-index: 1;
    left: -37.5px;
    top: 5px;
}
#log>div.broadcaster .message::after {
    left: auto;
    right: -37.5px;
    clip: rect(0,25px,10px,0)
}

위 코드를 커스텀 CSS에 추가하시면 됩니다.

"https://marshall-ku-tgd.github.io/tmpImages/cat.png"를 수정해 본인이 원하시는 이미지를 추가하실 수도 있습니다.
반드시 외부에서 접속할 수 있는 [이미지의 링크]여야 합니다!
(권장 크기 : 40px * 40px)

profile

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

(?)

  • 땀똔

    다른건 모르겠고, 허니버터칩이 저거 였다뉘~ ㄷㄷㄷ

    https://i.imgur.com/1vHOPFK.jpg

    1. 허니버터칩의 뜻이 아니라, 허니버터칩 품절 대란이던 시절에 저 과자 세 개 갖다놓고 허니버터칩이라고 팔던 마트가 있었는데, 거기서 나온 드립일 겁니다 ㅋㅋㅋ

      1. 땀똔

        헛.....
        이래서 늙으면 죽어야 한다는 옛말이.... ㅜㅜ

  • Kiss Me ♥

    Twip 이란 게 트위치 관련 도구군요~~
    좌우 대화 형식이 미지원되는 게 아쉽긴 하지만,
    본인이 원하는 이미지로 추가할 수 있으니 잘 꾸미면 이쁘겠네요 🙂

    https://t1.daumcdn.net/cfile/tistory/9984D8415DEFA18312?original

    1. 아무래도 방송하는 사람은 마이크로만 말할 확률이 높은 것 같아 굳이 대화 형식으로 만들진 않았어요...ㅋㅋㅋ
      저 동네는 티스토리랑 다르게 CSS 밖에 수정할 수 있는 게 없어서 답답할 때가 많습니다 ㅠㅠ

      https://marshall-storage.tistory.com/attachment/cfile28.uf@991E7D465DEA40D60A5A7D.mp4