순수 CSS 램프: 단계별

CSS 아트의 기본 개념에 대해서는 . 이 부분에서는 처음부터 램프를 만들 것입니다.

시작하기 전에 개체를 구성 요소 모양으로 분해해 보겠습니다. 여기에 세 가지가 있습니다. 셰이더, 다리 및 발은 기본 부품입니다. 이제 마크업을 만들어 봅시다.

<div class = "lamp">
  <div class = "shade"></div>
  <div class = "leg"></div>
  <div class = "foot"></div>
</div>

이제 CSS부터 시작하겠습니다.
먼저 문서가 전체 창 전체에 걸쳐 있고 스크롤을 방지하도록 문서를 설정합니다. 또한 우리는 램프가 중앙에 있기를 원합니다. grid 및 place-items 를 사용하여 이를 달성할 수 있습니다.

램프 내에서 구성 요소를 중앙 정렬하려고 합니다. 우리는 flex-box로 이를 달성할 수 있습니다.

body{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.lamp{
  display: flex;
  flex-direction: column;
  align-items: center;
}

이제 구성 요소의 기본 모양을 만들어 보겠습니다.

.shade{
  width: 30vh; 
  height: 20vh;
  background: #EEE4CF;
  border: 1px solid black;
}
.leg{
  width: 2vh; 
  height: 50vh;  
  background: #995136;
  border: 1px solid black;
}
.foot{
  width: 22vh; 
  height: 5vh;
  background: #995136;
  border: 1px solid black;
}

결과는 다음과 같습니다.

(다음 단계에서 모양의 겹침을 표시하기 위해 여기에서 사용된 테두리)
응답성을 높이고 종횡비를 유지하기 위해 높이와 너비의 단위로 vh를 사용하고 있습니다.

이제 약간의 조정을 위해 위치 지정을 사용합니다. 원근감을 위해 다리와 발을 조금 더 위로 이동합니다. 요소 기본 위치에서 약간의 조정을 위해 상대 위치 지정을 사용할 수 있습니다.

또한 다리가 스탠드 앞에 있어야 합니다. Z-인덱스로 변경하겠습니다. (참고: 이와 같은 간단한 경우 맨 위에 표시되는 항목은 마크업을 통해 조정할 수도 있습니다. 요소가 나중에 표시될수록 스택 컨텍스트에서 더 높게 표시됩니다. 여기서는 더 복잡한 경우에 대한 데모 사용으로만 사용합니다.)

*{
  position:relative;
}

.shade{
  width: 30vh; 
  height: 20vh;
  background: #EEE4CF;
  border: 1px solid black;

  z-index: 3;
}
.leg{
  width: 2vh; 
  height: 50vh;  
  background: #995136;
  border: 1px solid black;

  top: -2vh; 
  z-index:2;
}
.foot{
  width: 22vh; 
  height: 5vh;
  background: #995136;
  border: 1px solid black;

  top: -4vh; 
}

결과:


다음으로 각 모양을 자세히 설명하겠습니다.

그늘의 경우 둥근 모서리와 사다리꼴을 원합니다. border-radius 및 clip-path 로 만들 것입니다.

3D 효과를 위해 그라디언트를 사용합니다. background 또는 background-image 에 그래디언트를 설정할 수 있습니다. 그라디언트가 그림자를 표시하는 데만 사용되는 경우 기본 색상을 배경으로 설정하고 transparent와 함께 알파 값이 있는 흑백으로 그림자를 추가하는 것을 선호합니다.

또한 그라디언트는 아래에서 위로 적용되므로 순서를 의식해야 합니다.
shade 의 경우 오른쪽 경사면을 따라, 왼쪽 경사면을 따라, 왼쪽에서 오른쪽으로, 상단에서 타원의 4개 레이어(아래에서 위로)를 적용합니다.
각각의 불투명도와 각도를 파악하는 것은 시행착오를 거쳐야 할 수 있습니다.

.shade{
  width: 30vh; 
  height: 20vh;
  background: #EEE4CF;
  z-index: 3;

  border-radius: 50% / 10%;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  background-image: 
    radial-gradient(closest-corner at 50% 2%, #EEE4CF 70%, transparent 78%),
    linear-gradient(to right, transparent 48%, #ffffff66 58% 75%, transparent 88%),
     linear-gradient(-253deg, #ffffffcc, #E5CB9A 15%, #DBB97C 20%, #EDDBB7 36%, #ffffff33 54%, transparent 95%),
    linear-gradient(253deg, #F8EFDD 20%, transparent)    
}

다리와 유사: 3D 효과를 만드는 그림자

.leg{
  width: 2vh; 
  height: 50vh;  
  background: #995136;
  top: -2vh; 
  z-index:2;

  background-image: 
    linear-gradient(#00000044, transparent 20% 99.8%, #00000033 100%),
    linear-gradient(to right, transparent 15%, #00000055 36% 44%,  #00000011 60%, #ffffff4f 78% 95%, #9B5539 95%)
}

발의 경우 반지름을 사용하여 타원형으로 만들고 그라데이션과 그림자를 사용하여 치수를 지정합니다.

.foot{
  width: 22vh; 
  height: 5vh;
  background: #995136;  
  top: -4vh; 
  border-radius: 50%;
  box-shadow: 0 0.4vh #773321;

  background-image: 
    linear-gradient(to right, transparent 11vh, transparent 12vh, transparent 13vh),
    linear-gradient( 40deg, transparent 5% 24%, #0000001f 28% 36%, #00000011 37% 44%, transparent 50%, #ffffff1c 56%, #ffffff44 68%, #ffffff1c 92%, transparent)
}

그게 다야!
여기에서 펜을 찾을 수 있습니다.