text stroke

· Frontend
리뉴얼된 디자인을 바탕으로 랜딩페이지를 업데이트 하려는데, text stroke를 구현하려다가 막혔고 기분좋게도 이를 해결했다. 이를 기록으로 남긴다. 문제점 먼저, 아래의 그림을 보자. 위의 텍스트의 경우는 text stroke가 바깥쪽으로 나있고, 아래의 text stroke는 안쪽으로 잡아먹듯이 보여진다. 디자이너 분이 피그마에 구현한 디자인은 위에 것이었고, 아래 것은 css에서 -webkit-text-stroke 속성을 text에 직접 적용해 구현한 UI이다. 한 눈에 봐도 위의 것이 훨씬 더 좋은 UI라는 것이 느껴진다. 그렇다. CSS에서 지원하는 저 속성을 직접적으로 text에 적용할 경우, 생각보다 좋은 UI를 얻을 수는 없었다. text stroke이 바깥쪽으로 나게끔 해야 보기도 깔끔..
mechaniccoder
'text stroke' 태그의 글 목록