렘쨩 0

https://www.youtube.com/watch?v=_jGTVRt4UXQ

렘짱님 방송보다가 시즈 점수처럼 채팅나오면 재미있겠다는 말씀이 생각나서

오 재밌겠다 라는 생각으로 제가 쓰려고 만들었습니다.

깔끔하진 않은데 작은 채팅창으로 쓰긴 적당해보여서 같이 공유드립니다.

텍스트 세팅

- OBS 브라우저 소스 

너비 700 / 높이 500

- 트윕 채팅 글자 세팅

글자색상 : #ffffff(쌩하얀)

글자 폰트 : 이순신돋움체 / 26px

배경 색 : 완전 투명

- 적용 장소

트윕 -> 커스텀 CSS -> 채팅창에 입력

- 코드

body {

  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 20% )

}

body,

html {

  font: $font_sizepx '$font_face', serif;

  background-color: $background_color;

  height: 100%;

  overflow: hidden

}

#log {

  position: absolute;

  text-align:right;

  bottom: 0;

  left: 0;

  padding: 0 0.5em 0.1em;

  width: 100%;

  box-sizing: border-box;

  text-shadow: #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px, #000 0px 0px 3px;

}

#log > div {

  background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.3) 7%, rgba(0,0,0,0.6));

  padding: 0.5em 0.6em;

  margin: -0.2em 0.2em 0.6em 0.1em;

  border-right: 0.2em solid #ffd715;

  animation: fadeInLeft .4s ease , fadeOut 0.2s ease $message_hide_delays forwards;

}

.meta{

    display: none;

}

#log > div .message {

  animation: fadein 0.6s;

}

@keyframes fadein {

    from {

        opacity:0;

    }

    80%{

        opacity:0;

  }

    to {

        opacity:1;

    }

}

.message {

  display:block;

  color: $text_color !important;

  line-height: 1.5em;

  font-weight: 400;

}

.deleted {

  visibility: hidden

}

.badge,

.name,

.message {

  vertical-align: right

}

.badge {

  margin-right: 0.3em;

  height: 1em

}

.colon{

display: none;

}

.message > img {

  height: 1em

}

.emote_wrap {

  position: relative

}

.emoticon {

  height: $font_sizepx;

  vertical-align: middle;

  margin: -0.1em 0;

  image-rendering: pixelated

}