본문 구독 & 좋아요 컨테이너 속 SVG 꾸미기

티스토리 본문이 끝나는 하단부 구독 박스에 SVG 파일로 화살표 패치를 넣으면 좋겠다는 생각 해 곧장 Adobe illustrator를 열고 텍스트를 그리기 시작했습니다.

 

그렇게 완성한 SVG Path 

각각의 텍스트의 크기 차이를 주고 나름 입체적(?)일 수 있게 배치를 해줬는데 사실 영 마음에 들지는 않네요ㅋㅋ 

 

SVG Path를 완성했으니 HTML에 컬러와 애니메이션을 같이 적용시켜 주기만 하면 됩니다.

요 선택된 박스가 마우스 hover되면 만들어준 SVG Path가 입체적으로 퉁 하고 튀어 오르게 만들어 주고 싶었습니다.

 

SVG 요소에 transition을 넣고, transform scale을 통해 확대 될 수 있도록 해주었습니다.

 

이렇게만 하면 심심하니 transform-origin 으로 화살표가 좋아요 버튼으로 다가갈 수 있도록 위치를 조정해주어 마무리시켰습니다,

 

SVG는 완성은 했고, 티스토리 홈페이지를 보다가 한 가지 마음에 드는 CSS를 발견했습니다.

 

티스토리 홈페이지

텍스트를 hover 하면 before 가상 요소가 밑줄을 만들어주는 건데, 이것을 구독 & 좋아요 부분에 해주면 좋겠다는 생각에 바로 적용을 시켜줬습니다.

그리고 마지막으로 공감 버튼은 twitter에서 like 버튼을 누르면 팝 되는 효과가 있는데, 오픈소스에 친절히 공유되고 있는 것을 블로그에 적용시켜 마무리해줬습니다.

 

읽어주셔서 감사합니다 🤟