[CSS] 피그마 글자 Stroke 효과 준 거처럼 꾸미기

stroke 효과

hover 하고 같이 사용해서

마우스 올리면 스트로크도 같이 뜨게 함.

 

해당 CSS

.navbar-under a:hover {
  color: orange;
  /*찐한효과 */
  /* -webkit-text-stroke: 1px rgb(255, 0, 0); */
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000, 0px -1px 0 #000, -1px 0px 0 #000, 1px 0px 0 #000,
    0px 1px 0 #000;
}

---

1) -webkit-text-stroke 사용

.link:hover {
  color: yellow; /* 호버 시 글자 색상 변경 */
  -webkit-text-stroke: 2px black; /* 호버 시 더 두꺼운 스트로크 적용 */
}

호버 시에는 2픽셀로 두꺼운 스트로크를 적용

 

주의*) -webkit-text-stroke는 WebKit 기반 브라우저에서 잘 작동하지만, 모든 브라우저에서 완벽하게 지원되지는 않을 수 있다

-webkit-text-stroke와 text-shadow를 함께 사용하면 다양한 브라우저에서도 비슷한 스트로크 효과를 얻을 수 있으며, 더 넓은 호환성을 확보할 수 있다

2) text-shadow 사용

.link:hover {
  color: yellow; /* 호버 시 글자 색상 변경 */
  text-shadow: 
    -2px -2px 0 #000,  
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000; /* 호버 시 더 두꺼운 검은색 스트로크 효과 */
}

text-shadow 속성은 상하좌우로 1픽셀 또는 2픽셀 오프셋을 주어 텍스트 주변에 그림자를 만들고,

그림자 색상을 검정(#000)으로 설정하여 스트로크처럼 보이게 함

이 방법은 글자의 겉에 선을 추가하는 효과적인 방법이 될 수 있다

 

단점*) 틈이 보인다. 

 

3) 좀 더 섬세한 text-shadow 사용

.link:hover {
  text-shadow:
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000,
    0px -1px 0 #000,
    -1px  0px 0 #000,
    1px  0px 0 #000,
    0px  1px 0 #000; /* 주변 8방향에 그림자 추가 */
}

text-shadow 속성을 사용하여 텍스트에 스트로크 효과를 주는 방법은 넓은 범위의 브라우저에서 호환성이 좋음