Effect
Effect
Gooey
끈적함을 나타내는 시각적 효과
Blur
와 Contrast
필터를 함께 사용하여 표현할 수 있다.
각각의 흐릿한 요소가 서로 가까이 다가오면 색상대비를 만들어 모양이 실제로 연결된 것 처럼 보이게 된다.
Blur (흐릿함) → 요소의 경계부분을 흐리게 나타내어 선명도를 감소시키고, 요소 간 경계를 부드럽게 만듬
Contrast (색상 대비) → 서로 다른 밝기의 색상의 요소들 간의 차이를 의미, 높은 대비는 각 요소들 간의 경계를 뚜렷하게 만들어 선명한 느낌을 준다.
CSS 스타일을 사용하여 구현하기
filter
속성을 사용해서 filter: blur() contrast()
로 간단하게 구현할 수 있다.
하지만 배경색이 투명하면 동작하지 않고, 배경색에 따라 대비되는 색상으로 변경이되므로 요소의 원하는 색상을 지정할 수없다.
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
종이 조각이 흩날리는 시각적 효과
Last updated