HTML 및 CSS로 스플래시 효과 만들기(비디오 포함)

divtober 챌린지에 대한 오늘의 단어는 "splash"입니다. 이 기사에서는 단일 HTML 요소와 몇 줄의 CSS로 스플래시 효과를 만드는 방법을 보여줍니다. 프로세스를 설명하는 비디오를 선호하는 경우 기사 맨 아래로 스크롤하십시오.

요소 생성부터 시작합니다. 나는 보통 CSS 아트에 <article>를 사용하지만 이것은 장식적인 것에 더 가깝기 때문에 <div>를 사용하여 간단하게 유지합니다(하지만 모든 블록 유형 요소가 실제로 작동합니다).

<div class="splash"></div>

너비, 높이 및 테두리 반경(또는 부족)을 지정하는 기본 설정을 수행해야 합니다. 우리가 사용하는 모양은 궁극적으로 스플래시 모양을 결정합니다.

.splash {
  width: 500px;
  height: 500px;
}

원뿔형 그래디언트를 반복한 다음 CSS 필터를 적용하여 스플래시 효과를 만들 것입니다. 특히 두 가지:

blur() : 가우시안 블러를 사용하여 색상을 블러하고 약간 혼합합니다.

contrast() : 흐린 배경의 대비를 조정하고 혼합하여 더 선명하게 보이게 합니다.

결과는 값에 따라 달라집니다. 흐림 반경이 높을수록 불확실한 얼룩이 더 많이 생성되고 대비가 높을수록 흐림이 제거되고 사물이 더 선명해집니다.

하나의 반복되는 원추형 그래디언트부터 시작하겠습니다.

.splash {
  width: 500px;
  height: 500px;
  background: repeating-conic-gradient(#00f 0 3%, #0000 0 11%) #fff;
  filter: blur(20px) contrast(20);
}

이 코드를 사용하면 스플래시는 다음과 같습니다.



우리 요소가 파란색과 흰색 배경을 가지고 있기 때문에 가장자리가 좋지 않게 보이지만 필터는 주위를 투명하게 하여 "펑키한"방식으로 흐리게 합니다. 해결책? 요소 주위에 작은 흰색 상자 그림자 추가:

.splash {
  width: 500px;
  height: 500px;
  background: repeating-conic-gradient(#00f 0 3%, #0000 0 11%) #fff;
  filter: blur(20px) contrast(20);
  box-shadow: 0 0 0 50px #fff;
}

이 작은 변화로 우리의 스플래시는 스플래쉬처럼 보입니다.



이 결과는 중앙에 텍스트나 이미지가 있는 경우 멋지게 보일 수 있지만 한 단계 더 나아가겠습니다. 더 많은 반복되는 원추형 그래디언트(및 여기 또는 저기에 방사형 그래디언트)를 추가하면 다른 유형의 스플래시를 얻을 수 있습니다.

.splash {
  width: 500px;
  height: 500px;
  background:
    repeating-conic-gradient(#00f 0 3%, #0000 0 11%),
    repeating-conic-gradient(#0000 0 5%, #00f 0 7%) 50% / 60% 60%,
    repeating-conic-gradient(#0000 0 7%, #00f 0 9%) 50% / 70% 70%,
    repeating-conic-gradient(#0000 0 11%, #00f 0 13%) 50% / 80% 80%,
    radial-gradient(#00f 22%, #0000 0),
    #fff;
  background-repeat: no-repeat;
  filter: blur(20px) contrast(50);
  box-shadow: 0 0 0 50px #fff;
}

위의 코드에서 언급할 가치가 있는 몇 가지 사항이 있습니다.

더 작은 그래디언트의 반복을 피하기 위해 background-repeat: no-repeat를 추가했습니다. 당신은 그것을 제거하고 다른 스플래시를 얻을 수 있습니다.

충돌이 적고 패턴을 확인하기가 더 어렵기 때문에 반복 그라데이션에 소수를 사용하는 것을 좋아합니다.

그리고 그게 다야! 크기, 그래디언트 스톱 또는 필터 값을 가지고 놀면 완전히 다른 스플래시를 얻을 수 있습니다. 추가 필터를 추가하여 색상(대비로 제한됨)을 변경하고 새로운 결과를 얻습니다. 창의력을 발휘하고 재미있게 보내세요! 그리고 divtober에 대한 데모를 만들게 되면 댓글이나 에서 저와 공유해 주세요. 반갑습니다.