AD

프로그램 Twip Slim Alert Box CSS

레카키드
2019-09-15 21:09:40 25965 49 34

새 버전이 나왔습니다.

https://tgd.kr/g/tip/48726077


1년전에 방송하다가 때려쳤는데 그 때 만든 알림창 방식을 찾으시는 분이 있어

가장 최근 상태에 맞춰서 수정해서 올립니다.


아래의 이미지는 적용 예시이고 GIF입니다.



CSS 내용입니다.

https://github.com/lekakid/TwipSlimAlert/blob/master/style.css 


적용방법입니다.

1d8db609144c026e0e2acdd7e58678e2.png

트윕 대시 보드에서 Alert Box에 들어갑니다.

커스텀 CSS란 안에 전부 복사해 넣습니다.

상단의 배경 색상 부분을 클릭하면 하단에서 설정 저장버튼이 올라옵니다.

이를 눌러 저장합니다.


d6e91053ab9864d00e29b1be24616635.png

모든 유형의 알람 레이아웃과 후원 효과를 위처럼 설정합니다.

후원 효과 부분을 Fade 계통으로 설정하셔도 상관없습니다.

자연스러운 연출이 될 수 있는 애니메이션을 선택하시면 됩니다.


알림 문구의 크기는 24px, 코멘트 글자의 크기는 20px이 좋아보였습니다.

영상 송출 해상도에 맞게 각자 조절하시면 됩니다.


cb0313d395c8293a9822543e74d9c98b.png

XSplit과 OBS에서는 화면 전체를 채우도록 설정하시면 됩니다.

위 이미지는 720p 송출 환경 기준에서 설정한 모습입니다.


적용이 끝나면 알람 테스트로 몇 번 사용해보시면 되겠습니다.

영상의 크기가 너무 크다던가 조절이 필요하면 CSS의 주석( /* */ 안의 내용)을 참고해 수정하시면 됩니다.

후원댓글 34
댓글 34개  
이전 댓글 더 보기
이 글에 댓글을 달 권한이 없습니다. 로그인해 보세요.
AD
방송하기프로그램채팅/봇업데이트
7
프로그램
DRAM Calculator for Ryzen [6]
distilledliquor
10-16
41
프로그램
트위치 서버 확인하기 [25]
hi235750
10-08
13
09-27
25
09-19
»
프로그램
Twip Slim Alert Box CSS [34]
레카키드
09-15
12
프로그램
윈도우즈 잔렉 잡아주는 툴. [3]
베리머취래빗
07-25
17
프로그램
익명으로 후원한 사람 찾는 방법 [6]
하루쨔응
07-04
6
프로그램
CLIP STUDIO PAINT 50% 할인중이네요 [2]
산_타는백수
06-21
23
06-20
1
프로그램
틱톡 pc에서 실행 tip [4]
jyho523
06-10
13
프로그램
polygoneer 무료배포 중 (스팀) [6]
루하__
06-06
7
05-31
6
프로그램
[험블] Japlopy 무료 배포 중 [2]
용산의빵테온
05-24
7
프로그램
RiME 무료배포 (에픽게임즈) [3]
루하__
05-24
9
프로그램
심즈 4 무료배포 [5]
루하__
05-22
18
프로그램
음성 변조 프로그램. [3]
베리머취래빗
05-15
19
05-06
5
프로그램
바이브 라이젠 호환성 개선 중. [2]
베리머취래빗
05-04
인기글 글 쓰기