CSS로 폴더 '슬릿'효과를 만드는 방법

는 폴더에서 약간 노출 된 용지의 효과 또는 지갑에서 약간 연장되는 신용 카드의 시각적 효과를 디자인의 "크랙"효과라고합니다. CSS를 통해 우리는이 시각적 환상을 영리하게 만들 수 있으며, 요소가 개구부에서 튀어 나오는 것처럼 보이게합니다.

디자인의 열쇠는 그림자이며, 이는 균열을 암시하는 시각적 단서를 제공합니다. 그런 다음 균열을 덮는 요소가 있으며, 아래에서 엿보기 요소를위한 공간을 제공합니다.

함께 함께 우리는 다음과 같은 효과를 만들 것입니다 : 먼저 그림자를 만듭니다 예제의 그림자가 실제 CSS 그림자 (예 :

또는 필터)를 사용하여 생성되지 않는다는 사실에 놀랄 수 있습니다. 대신, 그림자 자체는 독립적 인 요소이며 어둡고 흐릿합니다. 이것은 기본 및 애니메이션 상태에서 디자인을보다 적응력있게 만드는 데 중요합니다.

또 다른 요소는 오버레이이며, 그림자 위에 겹칩니다. 다음 이미지는 그림자와 오버레이가 어떻게 결합되는지 보여줍니다.

그림자는 그라디언트 배경을 가진 작고 직립 사각형으로 구성됩니다. 그라디언트는 중간에 더 어둡습니다. 따라서 요소가 흐려지면 중간에 더 어두운 그림자가 생깁니다.

재현 된 그림자의 왼쪽 절반은 이제 상단의 사각형으로 덮여 있으며, 이는 용기의 배경색과 정확히 같은 색상을 가지고 있습니다.

오버레이와 그림자는 왼쪽으로 약간 움직여 레이어가있는 것처럼 보이게합니다.

커버를 처리하십시오 오버레이를 설계된 배경과 혼합하려면 배경색이 포함 된 요소에서 상속됩니다. 또는 설계 선택 및 요구 사항에 따라 CSS 마스크 및 블렌딩 모드와 같은 표준을 사용하여 오버레이를 배경과 혼합 할 수도 있습니다.

이러한 표준을 적용하는 방법에 대한 몇 가지 기본 사항은 다음과 같은 기사를 참조하십시오. Sarah Drasner의 "마스킹 대 클리핑 : 각 사용시기"는 마스크에 대한 훌륭한 소개를 제공합니다. 또한 관련 주제를 검토 할 수있는이 게시물의 CSS 하이브리드 모드에 대해서도 글을 썼습니다.

내 예제의 소스 코드에서 CSS 그리드 (데모에서 자주 사용하는 레이아웃 표준)를 사용하여 요소 내에 요소를 정렬하고 스택 스택을 정렬합니다. 비슷한 디자인을 재현하는 경우 애플리케이션에 가장 적합한 레이아웃 방법을 사용하여 디자인의 다른 부분을 정렬하십시오. 이 경우 요소에 단일 열 그리드를 설정하여 오버레이, 그림자 및 이미지를 중심으로 할 수 있습니다. <code>box-shadow CSS 그리드는 또한 세 개의 div를 모두 설정하여 drop-shadow() 컨테이너의 전체 너비가되도록합니다.

main > div {
  grid-area: 1 / 1;
}

이것은 모든 것을 함께 쌓게 만듭니다. 종종 우리는 그리드의 다른 요소가있는 요소를 피하려고 노력할 것입니다. 그러나이 예는 이것에 달려 있습니다. 나는

의 너비를 50%로 설정했는데, 이는 자연스럽게 아래 이미지를 표시합니다. 거기에서 나는 부정적인 방향으로 50%를 움직이기 위해 변환을 설정했으며, .slit-cover는 소량의 그림자 (25px)를 이동하기 전에 옮겼습니다. 그게 다야! 폴더, 지갑 또는 기타 다른 것을 엿볼 수있는 매우 자연스럽게 보이는 균열.

더 많은 방법이 있습니다! 예를 들어, Flexbox는 요소를 정렬하고 중앙이 이와 같이 정렬 할 수 있습니다. 요소를 나란히 나타나게하는 방법에는 여러 가지가 있습니다. 어쩌면 속성, 필터 또는 SVG 필터를 사용하여 동일한 그림자 효과를 얻을 수있어 환상을 실제로 향상시킬 수 있습니다.

.slit-cover {
  width: 50%;
  transform: translatex(calc(-50% - 25px));
  /* etc. */
}

자신의 외모와 느낌을 얻기를 원할 때 조정할 수 있습니다. 예를 들어, 그림자와 이미지 위치를 교환하십시오. 또는 색상 조합으로 플레이하고

필터의 값을 변경하십시오. 오버레이와 그림자의 모양도 조정할 수 있습니다. - 나는 당신이 똑바로 그림자 대신 구부러진 그림자를 만들고 주석에서 우리와 공유 할 수 있다고 생각합니다!

위 내용은 CSS로 폴더 '슬릿'효과를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!