CSS가 포함된 텍스트 및 SVG의 네온 효과

1745 단어 htmlwebdevcss
나는 현재 나의 작품을 한 사이트에 모아 놓고 일하고 있다. 내가 좋아하는 팔레트를 찾았을 때 나는 심각한 문제에 부딪혔다. 프로젝트의 표지와 배경이 혼합된 것이다.
이러한 문제를 해결하는 방법 중 하나는 이미지를 강조 표시하기 위해 윤곽선을 추가하는 것이다.내가 한번 시험해 보았더니 마침내 멋진 네온사인 효과를 얻었다.

효과가 없는 표지

효과적인 로고
이 작업에 사용되는 CSS 속성은 filterdrop-shadow입니다.
img{
    filter: drop-shadow(0px 0px 3px #116466);
}
여기서 매개변수는 (x-off y-off blur color) 입니다.추가 정보 찾기here.
이미지에 SVG 형식이 있어야 합니다.SVG 이미지와 유사한 효과를 얻을 수 있는 다른 방법도 있지만, 이 방법의 장점은 내부 SVG뿐만 아니라 외부 이미지에서도 작업할 수 있다는 것이다.
이 밖에 텍스트에도 적용됩니다!여기에 예가 하나 있다.

잘못된 텍스트

효과가 있는 텍스트
나는 네가 그것이 유용하다고 생각하길 바란다.

좋은 웹페이지 즐겨찾기