배너 이미지
트게더 커스텀 CSS

Twip Chat Box 커스텀 CSS - 대화형

75 ·
최종 수정일 : (1년 전)

트위치 스트리머용 도구인 Twip의 커스텀 CSS입니다.
메신저와 비슷한 디자인으로 제작했습니다.

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

191210 23:52 업데이트 - 스트리머 채팅 우측 정렬 업데이트
200408 19:11 업데이트 - 스트리머 채팅 잘리던 오류 수정
201102 20:07 업데이트 - 말풍선 여백 수정(10px -> 5px), 말풍선 꼬리 수정, 관리자 우측 정렬 업데이트
201103 16:08 업데이트 - 스트리머, 시청자, 관리자 이미지 분리

적용

별도 문의 없이 사용하셔도 됩니다

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes fadeOut {
    to {
        opacity: 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: fadeInUp 0.5s ease, fadeOut 0.5s ease $message_hide_delays forwards ;
}
#log > div.broadcaster,
#log > div.moderator {
    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.png) center
        no-repeat;
    background-size: cover;
    border-radius: 5px;
}
#log > div.broadcaster::before {
    /* 스트리머 사진 */
    background: url(https://marshall-ku-tgd.github.io/tmpImages/cat.png) center
        no-repeat;
}
#log > div.moderator::before {
    /* 관리자 사진 */
    background: url(https://marshall-ku-tgd.github.io/tmpImages/cat.png) center
        no-repeat;
}
#log > div.broadcaster::before,
#log > div.moderator::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,
#log > div.moderator .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: 0.4em;
    padding: 5px;
}
#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, 38px, 14px, 29px);
    display: block;
    z-index: 1;
    left: -37.5px;
    top: 5px;
}
#log > div.broadcaster .message::after,
#log > div.moderator .message::after {
    left: auto;
    right: -37.3px;
    clip: rect(0, 28px, 10px, 20px);
}

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

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

ⓒ 2019. Marshall K All rights reserved
profile

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

주의 : 비밀 댓글 사용 시 수정 기능을 이용할 수 있는 시간이 지나면 작성자도 내용 확인이 불가능합니다.

트게더 커스텀 CSS 카테고리 다른 글

위 글이 유용하셨다면, 아래 글도 읽어보세요!
[트게더 커스텀 CSS] 민게더

[트게더 커스텀 CSS] 민게더

트위치 스트리머 민따 님의 트게더입니다. 배경에 떨어지는 별똥별에 신경을 가장 많이 썼습니다.빛나는 별과 별똥별이 호수 위에 떨어지지 않게 하려고 제일 뒤에 배경 이미지, 중간에 별과 별똥별, 제일 앞에 배경 이미지에서 산과 호수만 자른 이미지를 배치했습니다. 별똥별 추가는 그냥 footer에 있는 a 태그들을 희생시켜서 제작했습니다.말고는 도무지 방법을 찾기가 어렵더라고요.
[트게더 커스텀 CSS] 밤게더

[트게더 커스텀 CSS] 밤게더

트위치 스트리머 _밤새 님의 트게더입니다. 트게더 둘러보니 배경에 뭔가 떨어지게 하는 게 유행이더라고요.별이 배경에 떨어지는 걸 원하셔서 남들은 어떻게 해뒀나 보니 죄다 background-position을 움직이는 애니메이션을 이용했더라고요. 1초에 수십 번씩 repaint하는 건 좀 아닌 것 같아 예전과 마찬가지로 ::before, ::after 두 pseudo element를 활용해 transform: translate()을 이용해 별이 떨어지게 해뒀습니다.깔끔한 애니메이션을 위해 화면 크기의 4배가 되는...
관련 글 더 보기