[css]text - shadow generator

스트로크를 구현 해 보셨나요..?

포토샵이나 피그마에서 작업할때는 진짜 세상 쉬운 아무것도 아닌! 작업 이긴 하다만...

이거를 CSS로 구현할려면 진짜 대환장할 일 이다.

아마 CSS로는 이미지 편집툴 들 처럼 세세하게 설정할수가 없어서 그런거같은데...  

 

간단히 3픽셀 정도의 테두리를 만들고 싶다면, 이미지 편집툴에선 색상을 정하고 딸깍 한번이면 되지만!

CSS 에서는 코드가 이마마마마큼 길어진다 

text-shadow: rgb(233, 233, 233) 3px 0px 0px, rgb(233, 233, 233) 2.83487px 0.981584px 0px,
      rgb(233, 233, 233) 2.35766px 1.85511px 0px, rgb(233, 233, 233) 1.62091px 2.52441px 0px,
      rgb(233, 233, 233) 0.705713px 2.91581px 0px, rgb(233, 233, 233) -0.287171px 2.98622px 0px,
      rgb(233, 233, 233) -1.24844px 2.72789px 0px, rgb(233, 233, 233) -2.07227px 2.16926px 0px,
      rgb(233, 233, 233) -2.66798px 1.37182px 0px, rgb(233, 233, 233) -2.96998px 0.42336px 0px,
      rgb(233, 233, 233) -2.94502px -0.571704px 0px, rgb(233, 233, 233) -2.59586px -1.50383px 0px,
      rgb(233, 233, 233) -1.96093px -2.27041px 0px, rgb(233, 233, 233) -1.11013px -2.78704px 0px,
      rgb(233, 233, 233) -0.137119px -2.99686px 0px, rgb(233, 233, 233) 0.850987px -2.87677px 0px,
      rgb(233, 233, 233) 1.74541px -2.43999px 0px, rgb(233, 233, 233) 2.44769px -1.73459px 0px,
      rgb(233, 233, 233) 2.88051px -0.838247px 0px;

 

결과물은 

 

고작 (?) 이런거이다

-webkit-text-stroke 나, text-stroke 라는 CSS 속성도 있는데, 테두리가 폰트 바깥에서 시작하는게 아닌 중간에서 부터 시작해서

storke가 두꺼워지면 원래 글씨도 가려버리는 일이 생긴다.

(포토샵에서 storke를 지정할때 center 설정을 생각하면 조금 쉽다)

원래 구현할려는 거에서 멀어지기 때문에, text-shadow로 어떻게든 구현하는거같다.. 

구글링을 아무리 해보아도 저렇게 한땀한땀(?) 쌓아가는 수 밖에 없다.

 

그래서 저렇게 테두리를 구현하고 싶을때는 구글링으로 text-shadow style 이라고 치고 제일 근접한 스타일로 복붙 하곤 했는데..

보통은 색깔이 지정되어있는 지라, 색도 일일히 바꿔야하는 귀찮음과 번거로움이 있다 ㅠㅠ

 

 

text - shadow generator

그러다 너무너무너무 좋은 걸 찾아버렸다!!

https://owumaro.github.io/text-stroke-generator/

CSS text-stroke generator (text-shadow hack)

 

원하는 스트로크를 정하고 자동으로 shadow를 만들어주는 !! 색상도 지정할수있고 폰트 크기도 볼수있는!! 왕 편한 툴이다.

(위에 긴 코드도 이 툴의 도움을 받았다)

 

코드가 길어지는 건 어쩔수없나.. 따로 변수로 저장해서 쓰면 별 탈 없지 않을까 싶다 ㅎㅎ

많이 편하니까 자주쓸거같다!