CSS의 부드럽고 사실적인 그림자를 위한 마스터 가이드

이 기사에서는 부드러운 CSS 그림자와 이를 사용하는 쉬운 방법에 대해 알게 될 것입니다. 하지만 우선

그림자는 무엇입니까?
빛이 물체에 닿으면 그림자가 생깁니다. 우리 주변에서 볼 수 있는 그림자는 동일한 원리로 작동하지만 특정 모양이나 길이 또는 크기가 아니기 때문에 실제로 복잡하고 사실적입니다. 그들은 어떤 모양을 취할 수 있으며 모든 방향으로 떨어질 수 있습니다. CSS를 사용하여 웹사이트에 그림자를 만들기 위해 box-shadow 속성을 사용합니다.

예를 들어 box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);

그러나 box-shadow 속성을 통해 실제 그림자를 만들려는 경우에는 할 수 없습니다.

왜요?
'왜?'를 알기 위해서는 box-shadow 속성이 어떻게 작동하는지 이해해야 합니다.box-shadow 속성은 단순히 개체의 흐릿한 실루엣을 생성합니다. 길이, 색상, 흐림, 확산 및 오프셋을 더 이상 변경할 수 없습니다. 그러면 box-shadow 속성을 통해 Natural Super Complex real Shadows를 생성할 방법이 없을 것입니다.

그런데 뜻밖에 방법이 있습니다!
간단한 기술을 사용하면 더 많은 제어 기능을 얻을 수 있고 옵션의 범위를 확장할 수 있습니다. 이 기술은 '레이어드 섀도우'를 사용합니다. 쉼표를 사용하고 점차적으로 흐림 반경, 오프셋을 늘려 그림자를 보다 사실적으로 만들어 간단한box-shadow 속성에서 여러 그림자를 정의할 수 있습니다. 다음은 예입니다.

노멀box-shadow ⏬


레이어드box-shadow ⏬


그림자의 차이를 볼 수 있습니다. 예리한 그림자, 꿈꾸는 그림자, 긴 그림자 등 더 많은 그림자 변형을 생성하기 위해 더 많이 사용자 정의할 수 있습니다.

/* Normal box-shadow */
.box {
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

/* Layered Box-shadow */
box-shadow:
     0 3.9px 4.6px rgba(0, 0, 0, 0.08),
     0 12.3px 8.4px rgba(0, 0, 0, 0.056),
     0 18.8px 19.2px rgba(0, 0, 0, 0.037),
     0 22px 40px rgba(0, 0, 0, 0.019)
;

더 많은 레이어 == 더 많은 사용자 정의 == 더 사실적인 그림자

또한 알파 값(불투명도)을 점진적으로 줄이고 흐림 강도를 높여 선명한 그림자를 생성하여 선명한 그림자를 생성할 수도 있습니다. 동일한 원리를 사용하여 확산된 그림자를 만들 수 있습니다.

샤프 섀도우⏬


디퓨즈드 섀도우⏬


불투명도와 스프레드를 사용하여 짧은 그림자와 긴 그림자를 만들 수도 있습니다. 긴 그림자를 만들기 위해 y 오프셋 값을 점차적으로 늘릴 수 있습니다.

짧은 그림자⏬


긴 그림자⏬


그러나 이러한 종류의 그림자를 만드는 것은 어떤 사람들에게는 정말 엉망입니다. 특히 그러한 사람들을 위해 그리고 우리의 삶을 더 쉽게 만들기 위해 현실적인 그림자 만들기(예: https://shadows.brumm.af/ by Philipp 에서 도움이 될 수 있는 웹사이트가 있습니다.



이 웹 사이트를 통해 원하는 만큼 레이어를 만들고 실시간으로 편집할 수 있으므로 많은 시간과 노력을 절약할 수 있습니다.

Devang의 게시물입니다. 도움이 되기를 바랍니다!
내 포트폴리오를 확인하세요: here