HTML과 CSS를 사용하여 이미지 스태킹의 환상을 만드는 방법은 무엇입니까?

웹 개발에 있어서 착시는 매우 매력적입니다. 우리 웹사이트에서 착시현상을 사용하는 것은 사용자의 마음을 자극하기 때문에 사용자의 관심을 끌게 됩니다. 그것은 실제로 존재하지 않는 것을 믿도록 우리 두뇌를 속입니다. 이러한 환상은 CSS의 다양한 기술을 사용하여 만들 수 있습니다. 가장 일반적으로 사용되는 환상 중 하나는 단순히 깊이에 대한 환상인 이미지 스택 환상입니다. 이 기사에서는 HTML과 CSS만 사용하여 이미지 스택 환상을 만드는 단계에 대해 설명합니다. 시작하자.

이미지 스택 착시란 무엇인가요?

이미지 쌓기 환상은 투명도가 다른 여러 이미지를 쌓아서 만들어지는 시각적 환상입니다. 특정 각도에서 보면 모든 이미지가 서로 섞여 입체적인 이미지 같은 착각을 불러일으킵니다.

이 효과는 이전에 Photoshop을 사용하여 수행되었습니다. 그러나 이제는 HTML과 CSS를 사용하여 간단하게 만들 수 있습니다.

따라야 할 단계

• 이미지가 포함된 div 요소를 만듭니다. 이것이 첫 번째 스택의 표면이 됩니다.

• 테두리 및 상자 그림자 속성을 사용하여 img 요소의 스타일을 지정합니다.

• div 요소의 크기를 지정합니다(class="stack1"). div 요소의 위치를 ​​relative로 유지하여 다가오는 의사 요소(:before 및 :after 요소)의 position이 div 요소에 상대적이 아닌 div 요소에 상대적으로 유지되도록 합니다. 왜냐하면 우리는 이러한 의사 요소의 위치를 ​​유지할 것이기 때문입니다. -요소는 절대 위치입니다. div 요소를 왼쪽으로 띄웁니다. 더 나은 모양을 위해 여백과 패딩을 추가합니다.

• 속성 ":before"을 사용하여 스택의 첫 번째 의사 요소를 추가합니다. 콘텐츠를 추가하지 마세요. 치수를 지정하고 절대 위치를 지정합니다. 배경색, 상자 그림자 및 테두리 속성을 사용하여 스타일을 지정합니다.

• 의사 요소의 Z-색인을 -1로 유지하세요. 상단과 왼쪽에 서로 다른 값을 부여하여 다른 위치를 부여하고 다른 환상을 만듭니다. 의사 요소를 회전하여 다양한 효과를 볼 수도 있습니다.

• 속성 ":after"를 사용하여 두 번째 의사 요소를 만듭니다. 그 스타일은 첫 번째 의사 요소와 유사합니다. 상단, 왼쪽 및 변형 값을 변경하여 착시 현상을 만들기만 하면 됩니다. 이것으로 첫 번째 스택이 완성됩니다.

• 마찬가지로 웹 페이지에서 원하는 만큼 스택을 생성할 수 있습니다. 여기서는 한 페이지에 2개의 스택을 생성했습니다.

예

이 예에서는 여러 이미지를 만들었습니다. 스택의 경우 top, left를 그대로 두고 값을 -15px, -15px 및 rotate(-10deg)로 변환합니다. >:before 의사 요소인 반면, 5px, 0 및 rotate(10deg)는 :after 의사 요소입니다. 더 큰 효과를 얻으려면 각 의사 요소에 서로 다른 배경색을 지정하세요.

으아악

웹 디자인에서 이미지 스택 환상을 어디에 사용할 수 있나요?

웹 디자인에서 이미지 스택 환상을 사용하여 다양하고 흥미로운 시각적 레이아웃을 만들 수 있습니다. 눈길을 끄는 이미지 갤러리와 매력적인 제품 광고 페이지를 만드는 데 사용할 수 있습니다. 또한 디자이너는 이를 사용하여 포트폴리오를 선보일 수 있습니다. 산업체와 대기업은 이 효과를 통합하여 랜딩 페이지를 만들 수 있습니다.

결론

이미지 스택 환상은 웹 개발, 광고 및 그래픽 디자인에 널리 사용됩니다. 많은 사용자의 호소력으로 인해 개발자는 눈길을 끄는 시각적 요소를 더 많이 만들게 되었습니다. 또한 우리는 이 효과를 얻기 위해 더 이상 Photoshop 응용 프로그램에 의존하지 않습니다. HTML과 CSS만 사용하면 쉽게 만들 수 있습니다. 이 문서에서는 원하는 결과를 얻기 위해 의사 클래스(:before 및 :after)를 사용합니다. 우리는 이 글에서 6가지 다른 환상을 살펴보았습니다. 그러나 더 많은 가능성이 있습니다. 여기서 설명한 것과 동일한 단계를 따라 연습하고 자신만의 비주얼을 만들기만 하면 됩니다.

위 내용은 HTML과 CSS를 사용하여 이미지 스태킹의 환상을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!