카테고리
Twip 스킨

레트로 채팅 스킨

옛날 느낌이 나는 스킨을 만들까 생각해서 만들었습니다! 아마 이런 느낌을 좋아하시는 분들이 있지 않을까 생각했기 때문에, PC 통신 시절의 화면을 참고해서 직접 제작했어요 레트로 스킨에서 쓰인 글꼴의 저작권은 Neo 둥근모 프로젝트에 있습니다

@font-face {
  font-family: '_neodgm';
  src: url('https://dalgona.github.io/neodgm/assets/neodgm_code.woff2') format('woff2'),
       url('https://dalgona.github.io/neodgm/assets/neodgm_code.woff') format('woff'),
       url('https://dalgona.github.io/neodgm/assets/neodgm_code.ttf') format('truetype');
  font-style: normal;
  font-weight: normal;
}

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 '_neodgm', monospace;
	background-color: $background_color;
	height: 100%;
	overflow: hidden
}

#log {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 0.5em 0.1em;
	width: 100%;
	box-sizing: border-box
}

#log div {
	background: #000;
	box-shadow: 0 0 0 0.15em #fff, 0 0 0 0.3em #000;
	margin: 0.8em 0.7em;
	padding: 0.3em 0.4em;
	padding-bottom: 0.3em;
	line-height: 1.2em;
	animation: fadeInUp .5s ease, fadeOut 1s ease $message_hide_delays forwards;
	-webkit-animation: fadeInUp .5s ease, fadeOut 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
}

옛날 느낌이 나는 스킨을 만들까 생각해서 만들었습니다! 아마 이런 느낌을 좋아하시는 분들이 있지 않을까 생각했기 때문에, 옛날 컴퓨터 화면을 참고해서 직접 제작했어요

레트로 스킨에서 쓰인 글꼴의 저작권은 Neo 둥근모 프로젝트에 있습니다

하루 제작

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

3 replies on “레트로 채팅 스킨”

트위치에서 방송하고있는 둥그레입니다 🙂 채팅 css를 찾던 중 정말 마음에 드는 채팅 스킨을 발견하여 사용하고싶어 댓글 납깁니다! 좋은 스킨 감사합니다💜

좋아요

답글 남기기

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

WordPress.com 로고

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

Google photo

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

Twitter 사진

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

Facebook 사진

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

%s에 연결하는 중