나는 최근에 Bradley Taunt의 Faking 3D Elements with CSS이라는 제목의 기사를 접했습니다. 2개 이하의 div를 사용하여 가짜 3D 효과를 만드는 방법에 대한 매우 이해하기 쉬운 문서입니다.

단일 div를 사용하여 유사한 효과를 재현하기로 결정했고 그 결과가 충분히 근접한 것 같습니다. 그럼 어떻게 달성할 수 있는지 살펴보겠습니다.

언급했듯이 단일 div 만 필요합니다. HTML에서 div를 추가하고 circle 클래스를 지정합니다.

<div class="circle"></div>

이제 CSS 작업을 시작하겠습니다. 먼저 아래 스타일을 div 클래스와 함께 circle에 추가합니다.

.circle{
  height: 400px;
  width: 400px;
  background: linear-gradient(#f00202 0%, #bd0404 10%, #7d0404 50%, #4a0202 100%);
  border-radius: 50%;
}

몇 가지 flexbox 속성을 body에 추가하여 페이지에서 circle를 세로 및 가로 중앙에 맞춥니다.

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

이제 기본 내부에 배치할 원이 하나 더 필요합니다circle. 이 내부 원은 주로 원하는 가짜 3D 효과를 생성하는 역할을 합니다. 내부 원을 만들기 위해 ::before 의사 요소를 사용합니다.

.circle::before{
  content: "";
  height: 360px;
  width: 360px;
  background: linear-gradient(#f06060 0%, #a30505 60%, #4d0202 100%);
}

flexbox 클래스에 필요한 center 속성을 추가하여 주 원의 중심에 정확히 배치합니다.

.circle{
  ...
  ...
  display: flex;
  justify-content: center;
  align-items: center;
}

지금까지 우리는 다음과 같은 것을 가지고 있습니다.


최종 3D 효과를 위해 아래 두 CSS 속성을 ::before 의사 요소에 추가합니다.

.circle::before{
  ...
  ...
  border-radius: 50%;
  filter: blur(18px);
}

그리고 마지막으로 몸체에 background-color 의 #990000 를 지정해 보겠습니다. 이는 빨간색 음영입니다.

body{
  ...
  ...
  background: #990000;
}

기다리다. 우리는 여전히 마지막 한가지인 그림자를 놓치고 있습니다. ::after 의사 요소를 사용하여 이를 달성할 것입니다.

.circle::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 60px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6  );
  bottom: -60px;
  z-index: -1;
  filter: blur(10px);
}

::after 의사 요소에 position의 absolute가 지정되었습니다. 클래스가 circle 인 기본 div와 관련하여 배치되었는지 확인하십시오. 따라서 기본 div에 position의 relative를 지정하십시오.

.circle{
  ...
  ... 
  position: relative;
}

가짜 3D 효과가 준비되었습니다. 매우 간단하지 않습니까?


아래는 최종 코드입니다.

HTML

<div class="circle"></div>

CSS

body{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #990000;
}

.circle{
  height: 400px;
  width: 400px;
  background: linear-gradient(#f00202 0%, #bd0404 10%, #7d0404 50%, #4a0202 100%);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.circle::before{
  content: "";
  height: 360px;
  width: 360px;
  background: linear-gradient(#f06060 0%, #a30505 60%, #4d0202 100%);
  border-radius: 50%;
  filter: blur(18px);
}

.circle::after{
  content: '';
  position: absolute;
  width: 100%;
  height: 60px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6  );
  bottom: -60px;
  z-index: -1;
  filter: blur(10px);
}