CSS
-
Pure CSS + SVG 애니메이션 적용 실패기프로그래밍/Web 2022. 4. 13. 14:58
때는 2022년 2월 21일. 비디오 플레이어 디자인을 고민할 때였다. 기본, 1줄 프로토타입, 2줄 프로토타입 이왕 만드는 것, 재생-일시정지 버튼에 무언가 포인트를 넣고 싶었다. 아이디어 원천은 LG 음악앱. 폰은 구렸지만 음악앱 하나는 기똥차게 좋았던 LG..ㅠ 처음 써봤을때 재생, 리플레이 인터렉션보고 감동받았다. (투박한 유튜브 따위와 비교가 안됨) 대략 이런 느낌 [Dribble: Play -> Pause, Micro Interactions] 먼저 움직이는 SVG를 만들어봤다. 일시정지 사각형 두개가 중앙에서 만나 깔끔하게 옆으로 솟아나는 재생버튼을 만들기란 어지간히 어려운 일이 아니었다. 똥손이라 단순한 크기조정과 이동 정도를 구현하면 몰라도, 자체적으로 그래픽 리소스를 만들 자신은 없었다...
-
Letter - Enhanced 스킨 공개.[Ver 1.52]프로그래밍/Web 2018. 10. 23. 00:30
* 공지: Letter - Enhanced 버전 1.52를 공개합니다. * 공지: 새로운 버전이 나왔으므로 전 버전에 대한 지원은 끊깁니다.2018/10/31 - [IT] - Letter - Enhanced 스킨 공개.[Ver. 2.0] 개발 중인 스킨의 기능을 간단히 알고 싶다면, 2018/10/31 - [IT] - Letter - Enhanced Ver. 2 프리뷰. 를 참고하세요. 1. 제작 동기.티스토리에서 이번에 공개된 스킨 중 Letter 스킨이 마음에 들더라고요. 처음엔 Poster 스킨을 써보려고 했는데 굵기가 다른 이상한 메뉴버튼과 못생긴 사이드바의 콜라보로 포기.. 글 내부 배치도 Letter가 더 낫드란. 덕분에 슬슬 질려가던 #2에서 Letter로 스킨을 변경!! 그런데 일부 폰트,..