본문 명언 박스 및 블로그 카운팅 디자인 완료!

본문 명언 박스 및 블로그 카운팅 디자인

티스토리 게시글 본문 상단에 명언 박스를 인파님 블로그를 보면서 너무 마음에 들어 적용하기 위해 랜덤 텍스트 라는 오픈소스를 찾고, 블로그에 맞게 디자인을 변경했습니다. 

 

우선, 랜덤 하게 텍스트가 표현될 수 있도록 자바스크립트를 넣어주고 그에 맞는 컨테이너들을 배치 해준 뒤에 CSS로 디자인을 입혔습니다.

 

또, 랜덤 버튼을 생성해서 사용자가 다음 글을 볼 수 있도록 버튼을 만들어서 박스 하단부에 넣었습니다.

 

그렇게 완성한 디자인!

상단에도 보이듯이 이런 식으로 디자인을 완성했고, 다크 모드일 때와 라이트 모드일 때의 색상을 다르게 주어 이질감 없게 변경해줬습니다. 

 

그리고 블로그 메인 페이지의 카운터 부분도 디자인을 조금 손봤습니다.

우선 아이맥 부분을 SVG 형태로 illustration으로 디자인을 해줬고, 텍스트 밖의 Confetti는 Codepen의 오픈소스를 가져와서 적용시켜줬습니다.

See the Pen celebrating confetti by Lilian (@lilianqian) on CodePen.

그리고 아래 팝 되는 요소도 직접 Confetti와 비슷한 생각으로 하나하나 변경해주고, animation 효과를 delay 시켜서 차례로 팝 되도록 해줬습니다. (사실 이 부분은 몇 개월 전에 이미 완성되었었습니다..)

See the Pen css fireworks with box-shadow by Vivi Tseng (@vii120) on CodePen.

카운터 부분은 background의 linear gradient를 통해 색상을 구분해서 좀 더 화려하게(?) 꾸며줬습니다.

 

마지막으로 방명록 부분도 조그마한 bubble들이 랜덤하게 나타나도록 하는 스크립트를 적용시켜줬습니다.

 

이 또한 codepen의 오픈소스에서 가져왔습니다.

See the Pen animated dots jquery canvas plugin by Angeal (@angeal185) on CodePen.

스크립트에 opacity 투명도를 조절하기 위해 추가해주고, 블로그 body 맞게 사이즈를 조절해주고 끝냈습니다.

 

요즘 블로그 꾸미는 데에 다시 맛이 들려 이것저것 시도도 해보고,

푸터쪽에 번역 버튼도 스크립트로 팝 되게 꾸며주고.. 웹 개발이 너무 매력 있네요 ㅋㅋ 

 

아무쪼록 디자인이 마음에 들게 나와서 만족스럽습니다.