요약
이 글은 CSS에서 블롭 모양을 만드는 다양한 기법들을 소개합니다. 저자는 세 가지 요구사항을 제시합니다: 단일 요소로 제작 가능, 온라인 도구로 쉽게 디자인 가능, 그라디언트, 테두리, 그림자 등 CSS 효과 적용 가능.
주요 방법들:
- 온라인 생성기 활용: Haikei, Blobmaker 등의 도구로 SVG 블롭을 생성하는 가장 일반적인 방법입니다.
- Border-radius 활용: 각 모서리의 수평/수직 반지름을 개별적으로 설정하여 타원형 조합으로 블롭을 만듭니다. 단, 볼록한 모양만 가능합니다.
- 다중 배경과 SVG 필터: 여러 원형 배경을 겹치고 SVG 필터로 블러와 콘트라스트를 적용해 액체처럼 연결된 블롭을 만듭니다.
- Shape() 함수: CSS의 새로운 shape() 함수와 clip-path를 사용하여 베지어 곡선으로 정밀한 블롭을 제작합니다. SVG 경로를 CSS로 변환 가능합니다.
결론적으로 각 방법은 장단점이 있으며, 완벽한 해결책은 없지만 shape() 함수가 가장 유망한 접근법으로 평가됩니다. 이러한 기법들은 CSS의 새로운 가능성을 보여주는 흥미로운 실험들입니다.