Drop-Shadow를 사용한 CSS의 사실적인 그림자

소개

최근 우리는 Little Thai와 함께 진행 중인 새 프로젝트를 위해 사실적인 그림자를 만드는 과제에 직면했습니다. 광범위한 조사 끝에 우리는 이용 가능한 정보가 많지 않다는 사실을 발견했습니다. 우리는 CSS에서 그림자 명령을 사용하여 자체 기술을 개발하기 시작했고 그 결과는 놀라웠습니다. 오늘 우리는 이를 달성한 방법을 커뮤니티와 공유하여 모두가 이 발전의 혜택을 누릴 수 있도록 하고자 합니다.

이 개발 부분에 대한 요구 사항은 명확했습니다. Little Thai 매장의 제품에는 사실적인 그림자가 필요했습니다. 왜? 아이디어는 사용자가 이 회사가 제공하는 제품을 구입할 수 있도록 디지털 쇼케이스를 만드는 것이었습니다. 제안 아이디어는 제품을 마치 테이블 위에 올려놓은 것처럼 위에서 내려다보는 관점으로 보여주는 것이었습니다. 더욱 사실적으로 만들기 위해 사진처럼 사실적인 그림자를 만들기 위해 이러한 재료가 필요했습니다. 이 시점에서 두 가지 선택이 있었습니다. 한편으로는 Photoshop을 사용하여 수행할 수 있습니다. 이 영상에서는 그렇게 하는 방법을 설명합니다. 반면에 새로운 drop-shadow 명령을 사용하면 CSS로 이를 수행할 수 있습니다.

앞서 말씀드린 것처럼 Photoshop에서 사실적인 그림자를 만드는 방법에 대한 정보가 없었기 때문에 이는 어려운 일이었습니다. 하지만 이로 인해 매장에 있는 수십 개의 제품을 Photoshop에서 편집할 필요가 없어졌고, 게다가 새 제품이 추가될 때마다 편집할 필요도 없었습니다. 그럼 어떻게 됐나요?

기술

CSS의 그림자 명령은 그래픽 요소에 그림자를 추가하는 강력한 도구입니다. 그러나 사실적인 효과를 추구할 때 이 방법을 사용하는 것이 항상 간단한 것은 아닙니다. 우리의 솔루션은 더 깊고 사실적인 효과를 얻기 위해 다양한 매개변수를 사용하여 여러 그림자를 적용하는 것을 기반으로 합니다.

사용된 CSS 코드

사진처럼 사실적인 그림자를 만드는 데 사용한 CSS 코드는 다음과 같습니다.

필터: drop-shadow(17px 17px 13px rgba(0, 0, 0, 0.3)) drop-shadow(7px 7px 4.5px rgba(0, 0, 0, 0.3));

코드 설명

첫 번째 드롭 섀도우: 17px 17px 13px rgba(0, 0, 0, 0.3): 이 그림자는 가장 크고 가장 확산됩니다. 매개변수는 X축과 Y축 모두에서 17px 변위된 그림자를 나타내며, 흐림 효과는 13px이고 불투명도는 30%입니다.

두 번째 드롭 섀도우: 7px 7px 4.5px rgba(0, 0, 0, 0.3): 이 그림자는 첫 번째 그림자보다 더 작고 덜 확산됩니다. 매개변수는 X축과 Y축 모두에서 7픽셀 변위된 그림자를 나타내며 흐림 효과는 4.5픽셀, 불투명도는 30%입니다.

이 두 그림자의 조합은 하나의 그림자로는 표현하기 힘든 깊이감과 현실감을 만들어냅니다.

시각적 예 다음은 사실적인 그림자 기술을 사용하여 최종 결과가 어떻게 보이는지 보여주는 시각적 예입니다.

다음 두 가지 사항을 강조하는 것이 중요합니다.

— 순백색보다는 부드러운 회색톤에 섀도우가 가장 잘 어울리네요.

— 이 경우 그림자는 평면도 관점에서 디자인되었습니다. 다른 각도에서는 잘 안 나오더라구요.

실제 응용

이 기술은 온라인 상점의 제품 이미지부터 기업 웹사이트의 그래픽 요소까지 다양한 맥락에서 사용될 수 있습니다. 사실적인 그림자를 생성하는 기능은 프로젝트의 시각적 외관과 인식 품질을 크게 향상시킬 수 있습니다.

CSS의 온라인 사실적 그림자 생성기

MandarinaWebs 웹사이트에서 온라인 생성기를 찾을 수 있습니다

결론

이 기술을 개발자 및 디자이너 커뮤니티와 공유하게 되어 매우 기쁩니다. 우리는 이것이 웹 프로젝트의 미학을 향상시키려는 모든 전문가에게 귀중한 도구가 될 수 있다고 믿습니다. 우리는 귀하의 피드백을 듣고 이 기술을 귀하의 작업에 어떻게 적용하는지 보고 싶습니다.

위 내용은 Drop-Shadow를 사용한 CSS의 사실적인 그림자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!