Effect

Effect

Gooey

https://css-tricks.com/shape-blobbing-css/

끈적함을 나타내는 시각적 효과

Blur와 Contrast 필터를 함께 사용하여 표현할 수 있다.

각각의 흐릿한 요소가 서로 가까이 다가오면 색상대비를 만들어 모양이 실제로 연결된 것 처럼 보이게 된다.

  • Blur (흐릿함) → 요소의 경계부분을 흐리게 나타내어 선명도를 감소시키고, 요소 간 경계를 부드럽게 만듬

  • Contrast (색상 대비) → 서로 다른 밝기의 색상의 요소들 간의 차이를 의미, 높은 대비는 각 요소들 간의 경계를 뚜렷하게 만들어 선명한 느낌을 준다.

CSS 스타일을 사용하여 구현하기

filter 속성을 사용해서 filter: blur() contrast() 로 간단하게 구현할 수 있다.

하지만 배경색이 투명하면 동작하지 않고, 배경색에 따라 대비되는 색상으로 변경이되므로 요소의 원하는 색상을 지정할 수없다.

SVG 활용해서 구현하기

SVG 필터 참고 사이트

<svg>
  <defs>
    <filter id="gooey">
      <feGaussianBlur
        in="sourceGraphic"
        stdDeviation="40"
        result="blur1"
      ></feGaussianBlur>
      <feColorMatrix
        in="blur1"
        type="matrix"
        values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 100 -23"
      ></feColorMatrix>
    </filter>
  </defs>
</svg>

  • <defs> → 재사용 가능한 커스텀 요소들(필터, 그라디언트 등)을 정의하는데 사용

  • <filter> → 필터 효과를 정의하는데 사용된다.

  • <feGaussianBlur> → blur 효과를 적용하는데 사용되며, 다음과 같은 속성이 제공된다.

    • in → 필터 효과를 적용할 입력 소스 요소를 지정한다. 이전에 정의한 다른 필터의 result 값을 연결하여 필터 체인을 구성하거나, SourceGraphic(도형 or 이미지) 외에도 여러가지 값이 있다.

    • stdDeviation → 블러의 값을 설정, 값이 클수록 더 강한 블러 효과를 나타낸다.

    • result → 필터의 출력을 저장, 이 속성을 이용하여 다른 필터의 결과를 재사용할 수 있다.

  • <feColorMatrix> → 요소의 색상을 변환하고 조작하는데 사용,색상 매트릭스를 정의하여 대비효과를 줄 수 있다.

    • in → 이전에 정의한 블러 필터의 값을 연결하여 필터 체인을 형성한다.

    • type → 색상 매트릭스의 종류를 설정, 기본값인 matrix는 5x4 행렬 값이 제공된다. 그 외로는, 색상 톤, 밝기, 색상 포화도를 지정할 수 있는 값이 있다.

    • values → 색상 매트릭스 값을 설정, 행렬 형태로 지정됨

Confetti

종이 조각이 흩날리는 시각적 효과

PreviousrequestAnimationFrameNextHSL

Last updated