CSS 및 SVG와 함께 얼룩하는 세 가지 방법

부드럽고 유기농 모양의 블로브는 웹 디자인에 장난스러운 터치를 제공하며 삽화 및 배경 효과에 적합합니다. 그림 소프트웨어는 옵션이지만 CSS 및 SVG를 사용하여 블로브를 만드는 재미를 탐색합시다.

다음은 세 가지 방법입니다.

1. SVG 서클 및 타원

가장 간단한 방법은 SVG에서 원과 타원을 겹치는 것입니다. SVG<circle></circle> 요소는 간단합니다.

<circle cx="100" cy="100" fill="red" r="40"></circle>

• cx 및 cy : 원의 중앙 좌표를 정의합니다.
• r : 반경을 지정합니다.
• fill : 채우기 색상을 설정합니다.

다중 겹치는 원은 기본 멍청이를 만듭니다.

<svg height="300" width="300">
  <circle cx="80" cy="80" fill="red" r="40"></circle>
  <circle cx="120" cy="80" fill="red" r="40"></circle>
  
</svg>

더 다양하게 사용하십시오<ellipse></ellipse> 수평 및 수직 반경을 독립적으로 제어하기 위해 :

<ellipse cx="200" cy="80" fill="red" rx="100" ry="50"></ellipse>

간단하지만이 방법에는 진정한 멍청한 느낌이 부족할 수 있습니다.

또는 기본 서클의 경우 CSS가 충분할 수 있습니다.

 .원 {
  국경-라디우스 : 50%;
  높이 : 50px;
  너비 : 50px;
}

2. 복잡한 모양에 대한 SVG 경로

복잡한 블로브 디자인의 경우 SVG<path></path> 요소는 궁극적 인 제어를 제공합니다. 다음과 같은 명령을 사용하여 선과 곡선을 그리도록 할 수 있습니다.

• M : 지점으로 이동하십시오.
• L : 선을 그립니다.
• C : 입방 베 지어 곡선을 그립니다.
• Z : 경로를 닫습니다.

이 명령에 대한 자세한 설명은 Chris Coyier의 포괄적 인 안내서에서 찾을 수 있습니다. 복잡한 경로를 수동으로 생성하는 것은 지루할 수 있으므로 도구를 사용하여 경로 데이터를 생성하는 것을 고려하십시오. 예를 들어:

<path d="M10 10 C 20 20, 40 20, 50 10 Z" fill="red"></path>

이 경로는 (10, 10)에서 시작하여 곡선 (50, 10)으로, 모양을 닫습니다.

3. 끈적 끈적한 효과를위한 CSS 및 SVG 필터

이 기술은 SVG 필터를 활용하여 교차 형태로부터 "gooey"효과를 만듭니다. 투명성이있는 두 개의 겹치는 사각형을 사용한 다음 흐릿하고 색상 조작을 위해 SVG 필터를 적용합니다.

SVG 필터는 사용하여 정의됩니다<filter></filter> 그리고 CSS를 통해 적용됨 :

<svg style="position: absolute; width: 0; height: 0;">
  <filter id="goo">
    <fegaussianblur in="SourceGraphic" stddeviation="30"></fegaussianblur>
    <fecolormatrix in="blur" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 30 -7"></fecolormatrix>
  </filter>
</svg>

feGaussianBlur 는 모양을 흐리게하고 feColorMatrix 색상을 조정합니다. 그런 다음 필터는 CSS에서 참조됩니다.

 .Blob-container {
  필터 : URL ( "#goo");
  / * ... 다른 스타일 ... */
}

이 접근법은 독특하고 쉽게 사용자 정의 할 수있는 끈적 끈적한 블로브 효과를 제공합니다. 원하는 모양을 달성하기 위해 다른 필터 값으로 실험하십시오.

값과 매개 변수를 조정하여 각 방법에서 얼룩의 모양과 모양을 미세 조정해야합니다.

위 내용은 CSS 및 SVG와 함께 얼룩하는 세 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!