CSS가있는 SVG 필터 추가

Sep 14, 2025
어떻게
Add SVG filters with CSS

SVG는 2000 년대 초반 이후로 해왔으며 아직 디자이너가 사용하려는 디자이너가 아직도 흥미로운 방법이 있습니다. 이 튜토리얼에서는 초점이 SVG를 통해 적용되는 필터에 있지만 SVG 이미지에 적용하는 대신 일반 페이지 내용에 적용되는 방법을 보여줍니다.

필터가 SVG에 적용되는 방식은 필터가있는 ID를 알려줌으로써 실제로 CSS를 통과합니다. 동일한 아이디어를 사용하여 필터는 일반 텍스트에 적용 할 수 있습니다 (예 :). 좋은 부분은 텍스트에 훌륭한 그래픽 외모를 추가 할 수 있으며 이미지 hop 필터를 적용하고 이미지로 저장하여 이전에 가능했습니다. SVG 필터를 사용하여 텍스트는 페이지의 일반 텍스트 요소 만 있기 때문에 액세스 가능하고 선택할 수 있습니다.

여기서는 여기에있는 코드는 물이있는 것으로 나타나고 페이지의 주제에 맞게 알파 맵을 포함하는 텍스트에 대한 변위 맵을 만듭니다. 그런 다음 다른 필터가 만들어 지므로 메뉴가 물리기로 나타나는 것으로 표시됩니다. 다시 이것은이 특정 페이지의 주제를 유지하고 SVG 필터를 다른 콘텐츠에 적용하는 두 가지 창의적인 방법을 보여줍니다.

SVG에 대해 더 많이 배우는 데 관심이 있습니까? 우리 기사를 살펴보십시오 웹에서 SVG에 대해 알아야 할 모든 것 ...에 또는이 시원한 중 하나가있는 사이트에 관심을 추가하십시오. CSS 애니메이션 예제 ...에

01. 시작하십시오

첫째, 위의 링크를 사용하여 프로젝트 파일을 다운로드해야합니다. 그렇게하면, 그를 드래그하십시오 스타트 프로젝트 폴더는 코드 IDE에 올려 놓고를 엽니 다 index.html. 페이지. 이미 작성된 페이지 콘텐츠가 표시됩니다. 헤더 섹션을 만들어야하며 SVG 필터의 영향을받는 헤드 라인이 포함됩니다. 여기에 코드를 추가하십시오 몸 꼬리표. 

 & lt; div class = "bg"& gt;
& lt; div class = "middle"& gt;
& lt; H2 클래스 = "헤드 라인"& gt; 수중
모험 공원 & lt; / h2 & gt;
& lt; div class = "intro_block"& gt;

02. 헤더를 닫습니다

이제 머리글이 완료되며 모든 텍스트가 제자리에 있습니다. 현재 브라우저에서 페이지를 보면 텍스트가있는 물 이미지가 표시됩니다. 현재 젖꼭지가 아직 멈추는 헤드 라인은 스타일을 올리고 SVG 필터가 적용될 것입니다.

& lt; h3 class = "하위 헤드"& gt; 해양을 경험하십시오 & lt; br & gt; 결코 전에 결코 r 이외에

03. SVG 필터를 만듭니다

SVG 코드는 페이지의 어느 곳에서나 추가 할 수 있지만, 볼 수 없으므로 닫는 본문 태그 전에 바닥에 놓을 수있는 좋은 생각이 될 수 있습니다. SVG 필터는 난류 소음을 만듭니다. 유의 사항 필터에는 ID가 있습니다. 이는 CSS가 페이지의 다른 요소에 적용 할 수있는이를 위해이를 수행합니다.

& lt; svg xmlns = "http://www.w3.org/2000/svg"& gt; & lt; 필터 ID = "변위 필터"& gt; & lt; featurlence type = "난기류" BaseFrequency = "0.004"numoctaves =. "2"결과 = "난기류"/ & gt; & lt; / filter & gt; & lt; / svg & gt;

04. SVG를 숨 깁니다

그에게 넘겨주세요 Page.css. 이제 파일이 있고 나머지 페이지의 모든 CSS 코드 위의 페이지는 새로운 CSS가 될 것입니다. 여기서 SVG는 페이지에 표시되지 않음으로 설정됩니다. 두 개의 태그 제목은 오른쪽 서체가 적용되도록 설정됩니다. 

 svg {
디스플레이 : 없음;
}
H2 {
글꼴 크기 : 5.5VW;
폰트 - 패밀리 : '크레타 섬 원형', 세리프;
}

05. 헤드 라인에 추가하십시오

그만큼 선 - 높이 나중에 헤드 라인이 애니메이션이되므로 페이지의 크기 조정을 제어하는 ​​것이 중요하기 때문에 0으로 설정됩니다. 그것은 또한 정당한 공간을 주위에 올바른 공간으로 앉아서 색상이 변경되도록 일부 패딩이 주어집니다. 

. 헤드 라인 {
선 - 높이 : 0;
디스플레이 : 인라인 블록;
패딩 : 70px;
색상 : #ccffff;

06. 헤드 라인을 마칩니다

Add SVG filters with CSS: Finish the headline

SVG는 헤드 라인 텍스트를 반환하는 데 사용됩니다.

헤드 라인 클래스를 완료하면 다음 줄이 적용됩니다. 변위 필터 SVG의 ID가 텍스트에 있습니다. 그만큼 번역 3D. 텍스트가 하드웨어가 가속화되도록 보장합니다. 변위가 적용될 때 바로 보이는지 확인하기 위해 스케일이 약간 변경됩니다. 

 필터 : URL (#DispLacementFilter);
변환 : translate3d (0, 0, 0);
변환 : Scaley (1.8) Rotatey (-2deg);
}

07. 그것을 변위 시키십시오

Add SVG filters with CSS: Make it displace

그리고 이제 본문은 변위됩니다

이 단계에서 필터를 테스트하면 난기류가 텍스트를 완전히 대체합니다. 고치기 쉽습니다. index.html 페이지의 필터 코드로 돌아갑니다. 이렇게하면 텍스트 인 난기류와 소스 그래픽이 필요하며 변위 필터로 적용됩니다. 난류에서 기본 주파수와 옥타브 수를 변경하십시오.

& lt; fedisplacementmap in2 = "난기류"= " sourceGraphic "scale ="30 "xchannelselector ="r " ychannelselector = "g"결과 = "disp"/ & gt;

08. 가장자리를 부드럽게합니다

Add SVG filters with CSS: Soften the edges

가우시안 흐림을 사용하여 텍스트를 부드럽게합니다

가장자리는 물이 많은 효과를 위해 조금 가혹한 것처럼 보입니다. 그것은 가우시안 흐림으로 치료할 수 있습니다. 변위 맵 후에 코드를 추가하십시오. 페이지를 새로 고치면 텍스트를 분명히 흐리게하지만 변위가 사라졌습니다. 다시 이것은 효과를 만드는 방법에 수정할 수있는 요소입니다.

& lt; fegaussianblur in = "sourceGraphic" stddeviation = "15"결과 = "BLR"/ & gt;

09. 두 사람을 합성하십시오

Add SVG filters with CSS: Compositing the two

흐림 및 변위를 더 즐겁게 결합하십시오.

이전 가우시안 흐림 아래에 복합 라인을 추가하십시오. 이것은 이것이 흐림과 변위를 함께 결합시키고 텍스트에 물이 반투명 한 효과를 만듭니다. 그것은 가장자리를 부드럽게하는 데 몇 가지 방법이 없었지만, 충분하지는 않습니다. 원래의 흐림이 이것에 추가 될 수 있다면 좋을 것입니다.

& lt; fecomposite in = "BLR"in2 = "DISP"연산자 = "결과 ="COMP "/ & gt;

10. 흐림을 병합하십시오

Add SVG filters with CSS: Merging the blur

병합 작업으로 더 나아질 것입니다

병합 작업을 사용하면 복합 재료의 최종 결과가 흐림 효과와 병합 될 수 있습니다. 이것은 이제 배경 이미지에 맞는 것처럼 보이고 물을 통한 빛의 라인에 맞는 것처럼 보입니다. 텍스트에 대한 가장 중요한 부분은 여전히 ​​선택할 수 있고 Photoshop 에서이 작업을 작성한 경우와 달리 페이지의 일부입니다.

& lt; femerge 결과 = "최종"& gt; & lt; femergenode in = "blr"/ & gt; & lt; femergenode in = "comp"/ & gt; & lt; / falmerge & gt;

11. 애니메이션을 만듭니다

다시로 가라 Page.css. 여기에 표시된대로 키 프레임에 파일을 추가합니다. 이렇게하면 제로 세로 폭에서 5.5 개의 수직 너비까지 글꼴 크기를 확장 할 수 있습니다. 시작 부분에서는 헤드 라인에 적용되므로 텍스트가 화면에 위치하고 있습니다. 텍스트가 움직이기 때문에 변위는 길이를 통해 변화하여 물을 띄게됩니다. 

 @KeyFrames 스케일러 {
{
글꼴 크기 : 0VW;
}
{
글꼴 크기 : 5.5VW;
}
}

12. H2 스타일을 변경하십시오

Add SVG filters with CSS: Change the h2 style

H2를 교체하여 일부 애니메이션을 가져옵니다

그만큼 H2. 이전에 스타일이 이전에 추가되었습니다.이 코드를이 새 코드로 바꾸기 위해이 새 코드로 해당 새 코드를 대체하여 표제에 4 초 이상 CSS 애니메이션이 추가됩니다. 애니메이션이 중지되고 마지막 키 프레임에서 보유합니다. 이것을 저장하고 브라우저에서 테스트하여 텍스트를 제자리에 rippling합니다. 

 H2 {
선 - 높이 : 0;
글꼴 크기 : 0VW;
애니메이션 이름 : 스케일러;
애니메이션 기간 : 4s;
애니메이션 채우기 모드 : 전달;
폰트 - 패밀리 : '크레타 섬 원형', 세리프;
}

13. 탐색을 추가하십시오

이제 다른 SVG 필터를 사용하여 적절한 물 BLOB 영감을받은 애니메이션을 만드겠습니다. 자습서의 첫 번째 단계에서 시작된 제목 앞에 다음 탐색 콘텐츠를 본문 코드 맨 위에 추가하십시오. 이렇게하면 햄버거 메뉴의 기본이 생성됩니다. 

& lav 클래스 = "메뉴"& gt;
& lt; 입력 유형 = "확인란"href = "#"클래스 =
"메뉴 - 열림"이름 = "메뉴 - 열기"ID = "메뉴 -
"/ gt;
& lt; label class = "메뉴 - 오픈 버튼"
for = "menu-open"& gt;
& lt; span 클래스 = "햄버거
햄버거 -1 "& gt; & lt; / span & gt;
& lt; span 클래스 = "햄버거
햄버거 -2 "& gt; & lt; / span & gt;
& lt; span 클래스 = "햄버거
햄버거 -3 "& gt; & lt; / span & gt;
& lt; / label & gt;

14. 네비게이션을 마칩니다

이제 나머지 탐색 요소를 추가 할 수 있습니다. 또한 헤드 섹션에 추가 된 글꼴 멋진 오픈 소스 아이콘 라이브러리를 사용 하여이 라이브러리의 CDN에서 링크합니다. 각 메뉴 원형 요소는 그 안에 아이콘이 있습니다. 

 & lt; a href = "#"class = "메뉴 - 항목"& gt; & lt; i class = "fa.
FA-CAR "& gt; & lt; / a & gt;
& lt; a href = "#"클래스 = "메뉴 - 항목"& gt; & lt; I.
클래스 = "FA-SHIP"& gt; & lt; / i & gt; & lt; / a & gt;
& lt; a href = "#"클래스 = "메뉴 - 항목"& gt; & lt; I.
클래스 = "FA FA-map"& gt; & lt; / i & gt; & lt; / a & gt;
& lt; a href = "#"클래스 = "메뉴 - 항목"& gt; & lt; I.
클래스 = "FA-Suitcase"& gt; & lt; / i & gt; & lt; / a & gt;
& lt; / nav & gt;

15. 새 필터를 추가하십시오

이 효과에 대해 다른 필터가 추가 될 것입니다. SVG에서 이전에 추가 된 코드의 닫는 필터 태그 뒤에이 코드를 추가하십시오. 여기서 효과는 이전에 비슷한 방식으로 구축됩니다. 이렇게하면 메뉴가 움직이는 액체의 끈적 끈적한 얼룩처럼 보일 수 있습니다.

& lt; 필터 ID = "그림자가있는 blob"& gt; & lt; fegaussianblur in = "sourceGraphic" 결과 = "흐림"stdDeviation = "20"/ & gt; & lt; fecolormatrix in = "blur"모드 = "매트릭스"값 = "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7 " 결과 = "BLOB"/ & gt; & lt; fegaussianblur in = "blob" stddeviation = "3"결과 = "그림자"/ & gt; & lt; fecolormatrix in = "shadow"모드 = "매트릭스"값 = "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1-0.2 " 결과 = "그림자"/ & gt;

16. 필터를 마칩니다

필터의 나머지 부분이 여기에 추가되어 메뉴 항목의 각 원에 배치되는 효과를 완성합니다. 이로 인해 요소가 액체 블록 효과가 추가되도록합니다. 이 페이지를 저장 한 다음 'design.css'파일로 전환하십시오.

& lt; feoffset in = "shadow"dx = "0"dy = "2" 결과 = "그림자"/ & gt; & lt; feComposite in2 = "그림자"= "blob" 결과 = "BLOB"/ & gt; & lt; feComposite in2 = "blob" = "sourceGraphic"결과 = "믹스"/ & gt; & lt; / 필터 & gt;

17. 필터를 적용하십시오

이제 CSS 코드가 다른 것에 추가 될 수 있습니다. Design.css. 또한 모든 탐색 CSS를 동일한 장소에서 함께 유지하는 것입니다. 일부 코드가 추가되었지만 여기서 필터는 메뉴에 적용되며, 이는 고정 메뉴가되므로 항상 화면에있는 상태가됩니다. 

 .menu {
필터 : URL ( "# shadow-blob");
위치 : 고정;
패딩 탑 : 20px;
패딩 왼쪽 : 80px;
너비 : 650px;
높이 : 150px;
박스 크기 조정 : Border-Box;
글꼴 크기 : 20px;
텍스트 - 정렬 : 왼쪽;
}

18. 메뉴를 작성하십시오

메뉴가 열려 있으면 메뉴가 보이지 않도록 설정되어 있습니다. 각 메뉴 항목의 호버 요소는 사용자가이를 통해 이동할 때 변경되도록 만들어집니다. 메뉴 항목이 원래 위치로 되돌아 가면 메뉴의 각 자식에는 0.4 초 전환됩니다. 

 .menu-open {
디스플레이 : 없음;
}
.menu-item : 호버 {
배경 : # 47959F;
색상 : # b2f0f8;
}
.menu-item : n 번째 아동 (3), .menu-item : nth-
어린이 (4), .menu-item : n 번째 아동 (5), .menu-
항목 : n 번째 자식 (6) {
전환 기간 : 400ms;
}

19. 햄버거를 추가하십시오

Add SVG filters with CSS: Burger icon to the top

햄버거 아이콘의 z-index를 변경하여 맨 위로 가져옵니다.

햄버거 아이콘은 다른 요소 위에 상승하여 Z-index. ...에 메뉴는 사용자가이를 통해 이동하고 메뉴를 클릭하면 버거가 'x'로 햄버거의 세 줄에서 'x'로 애니메이션을 가져와 메뉴를 제거하는 옵션을 표시합니다. 

 .menu-open-butture {
Z- 색인 : 2;
전환 타이밍 기능 : Cubic-
베 지어 (0.175, 0.885, 0.32, 1.275);
전환 기간 : 400ms;
변환 : 스케일 (1.1, 1.1) 번역 ​​3d.
(0, 0, 0);
커서 : 포인터;
}
.menu-open-button : 호버 {
변환 : 스케일 (1.2, 1.2) translate3d.
(0, 0, 0);
}

20. 요소를 이동하십시오

첫 번째 메뉴 항목은 실제로 확인란과 햄버거가 있기 때문에 메뉴의 세 번째 자식입니다. 이를 추가하면 메뉴가 사용자가 메뉴를 클릭하면 첫 번째 메뉴 요소가 위치로 이동할 수 있습니다. 각 메뉴 요소는 약간 더 긴 시간으로 이동합니다. 

.menu-open : checked + .menu-over-button {
전환 타이밍 기능 : 선형;
전환 기간 : 400ms;
변환 : 스케일 (0.8, 0.8) 번역 3D.
(0, 0, 0);
}
.menu-open : 확인 ~ .menu-item {
전환 타이밍 기능 : Cubic-
베 지어 (0.165, 0.84, 0.44, 1);
}
.menu-open : 확인 ~ .menu-item : n 번째 자식 (3) {
전환 기간 : 390ms;
변환 : translate3d (110px, 0, 0);
}

21. 나머지 운동을 해결하십시오

Add SVG filters with CSS: Remaining movement

더 많은 액체 모양을 위해 다른 속도로 메뉴 요소를 이동하십시오.

나머지 메뉴 요소는 다른 속도로 이동합니다. 이를 통해 요소는 SVG 필터를 사용하여 Blobby Liquid Look을 제공하는 애니메이션의 초기 단계에서 함께 고정 될 수 있습니다. 문서를 저장하고 브라우저에서 완성 된 결과를 볼 수 있습니다. 

 .menu-open : 체크 ~ .menu-item : n 번째 자식 (4) {
전환 기간 : 490ms;
변환 : translate3d (220px, 0, 0);
}
.menu-open : 확인 ~ .menu-item : n 번째 자녀 (5) {
전환 기간 : 590ms;
변환 : translate3d (330px, 0, 0);
}
.menu-open : 확인 ~ .menu-item : n 번째 자녀 (6) {
전환 기간 : 690ms;
변환 : translate3d (440px, 0, 0);
}

Generate, the award winning conference for web designers, returns to NYC on April 24-25! To book tickets visit www.generateconf.com 

웹 디자이너를위한 수상 경력이있는 컨퍼런스, 4 월 24 일부터 25 일까지 NYC로 돌아갑니다! 티켓을 예약하려면 www.generateconf.com.

이 기사는 원래 크리에이티브 웹 디자인 잡지에 출판되었습니다. 웹 디자이너 ...에 여기 문제를 구입하십시오 또는 웹 디자이너를 구독하십시오 ...에

관련 기사:

  • 자바 스크립트로 SVG 애니메이션
  • SVG에 대한 완전한 가이드
  • GSAP로 SVG 애니메이션 과급하십시오

어떻게 - 가장 인기있는 기사

Adobe Dimension CC 시작하기

어떻게 Sep 14, 2025

Adobe Dimension으로 인해 복잡한 장면을 설정하는 데 바람이 있습니다. (이미지 크레디트 : Mike G..

Express.js 시작하기

어떻게 Sep 14, 2025

node.js로 브라우저 직면 응용 프로그램을 만드는 것은 지루합니다. 익스프레스 a. ..

VR에서 2D 캐릭터를 삶으로 가져 오는 방법

어떻게 Sep 14, 2025

트렌드를 따르면 VR이 다른 부흥을 통과하는 것이 어렵습니다. 전에는 일어났습니다. 그러나이 시..

슬라이드 아웃 메뉴 만들기

어떻게 Sep 14, 2025

[삼] 그를 개선하는 좋은 방법 사용자 경험 사이트에서 슬라이드 아웃 메뉴를 추가하는 것입니다. 사용자가 페이지에있을 수있는 곳�..

파스텔로 큰 고양이를 그리는 법

어떻게 Sep 14, 2025

파스텔 막대기의 부드러움과 광도는 내 배경에 이상적인 선택을합니다. 파스텔 도면 ;..

단순한 색상 차트 만들기

어떻게 Sep 14, 2025

그립과 함께 [삼] 색 이론 수학이나 과학을 배우는 것처럼 조금 너무 많이 보일 수 있습니다. 당신은 당신이 만드는 것이 창조적이고 �..

모든 이메일 클라이언트에서 완벽한 메시지 생성

어떻게 Sep 14, 2025

모든 이메일 마케팅 캠페인이 일하면 이메일은받은 편지함에 도달하고 다른 모든 사람들로부터 밖으로서야합니다. 그러나 이야기는 거기에서 �..

상상의 브랜드에 대한 프로모션을 디자인하는 방법

어떻게 Sep 14, 2025

브랜드를 설계 할 때 창의적인 리드 켜기를 수행하는 하나 또는 시작이되는지 여부에 관계없이 모든 터치 포인트의 일관성이 중요합니다. [삼]..

카테고리