Twip Chat Box 커스텀 CSS - 대화형

Twip Chat Box 커스텀 CSS - 대화형

채팅 형식의 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;...
[트게더 커스텀 CSS] 밤게더

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

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

티스토리 스킨 배포 - Frameless Gallery

사진 중심의 블로그를 꾸미시는 분들을 위한 스킨입니다.다양한 썸네일 중심의 기능과, 이미지를 편하게 볼 수 있는 기능들을 제공합니다. 라이브 데모 주요 기능다운로드상세 설명 주요 기능 - Lazy Load : 화면 밖에 있는 이미지의 로딩을 지연해 훨씬 바른 블로그 제작 가능- 이미지 갤러리 : 본문의 이미지를 한 번에 모아볼 수 있도록 해주는 기능- 이미지 크게 보기 :...
&TWICE 웹 카메라

&TWICE 웹 카메라

카메라 앱 링크 트와이스의 일본 앨범 "&TWICE"의 발매를 맞아 진행하는 [&TWICE Web 카메라 컨텐츠]란 이벤트를 보고 제작하게 됐습니다. 그냥 트와이스 멤버가 들어간 액자(프레임)가 있고, 본인이 찍은 사진을 그 안에 집어넣어서 사진을 만드는 단순한 이벤튼데, Web 카메라라면서 찍어둔 사진만 업로드가 가능하길래, HTML5 Canvas 공부도 할 겸 실제로 카메라를 쓰는 앱을 만들어 봤습니다. 굉장히 단순한 앱입니다. 화면...
워드프레스 테마 - withHC

워드프레스 테마 - withHC

Home 홈 화면입니다. 첫 화면엔 유튜브 영상이, 아래로 내리면 Carousel Slider와 최근 뉴스 목록 등이 나오도록 했습니다. About Parallax Scroll을 이용해 소개 페이지를 제작했습니다. Artist News Album 커스텀 포스트 타입을 이용해, 외부 링크로 연결할 수 있도록 했습니다.해당 페이지로 억지로 접속하면 404 에러를 반환합니다.
TWICE New Tab

TWICE New Tab

크롬 확장 프로그램으로 제작한 TWICE New Tab을 싱글 페이지 앱으로 옮겼습니다. 앱 링크 외관은 크롬 확장 프로그램 버전과 크게 다르지 않습니다.크롬 외의 브라우저에서 해당 페이지를 홈페이지로 설정하면 크롬 확장 프로그램과 똑같이 사용하실 수 있습니다. 당연히 모바일도 지원합니다. 기본적으로 새 탭을 꾸미기 위해 만든 앱입니다.밋밋한 새 탭을 트와이스, 할 일 목록, 날씨 등으로 채울 수 있습니다....
[트게더 커스텀 CSS] 뽀게더

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

트위치 스트리머 아구이뽀 님의 트게더입니다. 트게더 스킨은 처음 작업해보는데, 자바스크립트는 그렇다 치더라도 HTML도 건드릴 수가 없더라고요.웹 표준과 조금 거리가 있는 방식이지만 ::after, ::before 두 pseudo element를 십분 활용해서 만들었습니다. 먼저, 파스텔톤 밤하늘의 배경을 원하셔서, 보랏빛 밤하늘에 파스텔톤 달과 흰 별을 띄웠습니다.달에는 천천히 위아래로 움직이는 애니메이션, 뒤에 별은 깜빡이는 애니메이션을 추가했습니다.자바스크립트가 가능했다면 랜덤 위치에 별을 뿌려줬겠지만,...
Canvas 썸네일, 배너 제작기

Canvas 썸네일, 배너 제작기

깃허브 제작기 링크 소개 HTML5 Canvs를 이용해서 간단하게 썸네일, 배너 등에 쓸 수 있는 이미지를 제작할 수 있는 앱입니다. 이미지의 크기 조정, 텍스트 수정, 배경 색 및 글자 색 변경, 배경에 이미지 추가, 해당 이미지의 투명도 조절 등의 기능이 포함되어 있습니다. 포토샵 등의 도구보다 자유도는 떨어지지만, 배너나 썸네일을 만들기는 훨씬 수월합니다. 사용법 크기 조정 Canvas의...
티스토리 스킨 #13 - Kiss Me

티스토리 스킨 #13 - Kiss Me

티스토리 블로거 Kiss Me 님의 스킨입니다. 커버 화면의 모습입니다. 썸네일을 작게 4개씩 보여주는 리스트 썸네일을 1:1 비로 보여주는 리스트 배경에 썸네일이 들어간 리스트 갤러리형 리스트 총 4가지로 구성되어 있습니다. 좌측 드로워엔 관리자 프로필 구독, 이웃 추가, RSS 링크 링크 목록 방문자 수 티스토리 메뉴바 로 구성되어 있고 우측 드로워엔 홈, 방명록, 공지사항 바로 가기 카테고리...