CSS가 포함된 텍스트 및 SVG의 네온 효과
이러한 문제를 해결하는 방법 중 하나는 이미지를 강조 표시하기 위해 윤곽선을 추가하는 것이다.내가 한번 시험해 보았더니 마침내 멋진 네온사인 효과를 얻었다.
효과가 없는 표지
효과적인 로고
이 작업에 사용되는 CSS 속성은
filter
drop-shadow
입니다.img{
filter: drop-shadow(0px 0px 3px #116466);
}
여기서 매개변수는 (x-off y-off blur color)
입니다.추가 정보 찾기here.이미지에 SVG 형식이 있어야 합니다.SVG 이미지와 유사한 효과를 얻을 수 있는 다른 방법도 있지만, 이 방법의 장점은 내부 SVG뿐만 아니라 외부 이미지에서도 작업할 수 있다는 것이다.
이 밖에 텍스트에도 적용됩니다!여기에 예가 하나 있다.
잘못된 텍스트
효과가 있는 텍스트
나는 네가 그것이 유용하다고 생각하길 바란다.
Reference
이 문제에 관하여(CSS가 포함된 텍스트 및 SVG의 네온 효과), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/miguelmj/neon-effect-in-text-and-svg-with-css-3dap텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)