CSS에서 그림 스태킹 효과를 얻는 방법-CSS 튜토리얼-php.cn

CSS에서 그림 스태킹 효과를 얻는 방법

王林

풀어 주다： 2020-03-12 17:57:05

앞으로

3851명이 탐색했습니다.

CSS에서 그림 스태킹 효과를 얻는 방법

1. 초기 index.html

첫 번째 사진, 즉 맨 위에 있는 사진을 만듭니다. 사진의 img가 포함된 div를 추가하기만 하면 됩니다. 그게 다입니다. 나머지 효과는 CSS를 통해 달성됩니다. div의 클래스가 stackone인지 확인하세요.

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
  <title>Photo Stack</title> 
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .stackone {
      --img-width: 480px;
      --img-height: 320px;
      border: 6px solid #fff;
      float: left;
      height:var(--img-height);
      width: var(--img-width);
      margin: 50px;
      position: relative;
      -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    }
    .stackone img {
      width: var(--img-width);
    }
  </style> 
 </head> 
 <body> 
  <div> 
   <img  src="../../../assets/image/landscape-4378548_960_720.jpg" / alt="CSS에서 그림 스태킹 효과를 얻는 방법" > 
  </div>  
 </body>
</html>

로그인 후 복사

초기 효과는 다음과 같습니다.

CSS에서 그림 스태킹 효과를 얻는 방법

(권장 튜토리얼: CSS 소개 튜토리얼)

2. 첫 번째 의사 요소

이제 네거티브 레이어를 추가합니다. 우리가 원하는 효과는 하단 이미지가 상단 사진 아래에 나타나는 것입니다. 이를 달성하기 위해 CSS 의사 클래스: before를 사용할 수 있습니다.

.stackone::before {
  content: "";
  height:var(--img-height);
  width: var(--img-width);
  background: #eff4de;
  border: 6px solid #fff;
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

로그인 후 복사

3. Before 개선

:before에 일부 위치를 추가한 다음 z-index를 설정하여 뒤에 놓습니다.

.stackone::before {
  content: "";
  height:var(--img-height);
  width: var(--img-width);
  background: #eff4de;
  border: 6px solid #fff;
 
  position: absolute;
  z-index: -1;
  top: 0px;
  left: -10px;
 
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
 
  -webkit-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

로그인 후 복사

4. 두 번째 의사 요소

.stackone::after {
  content: "";
  height:var(--img-height);
  width: var(--img-width);
  background: lightblue;
  border: 6px solid #fff;
  position: absolute;
  z-index: -1;
  top: 5px;
  left: 0px;
  -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
}

로그인 후 복사

완성된 사진:

CSS에서 그림 스태킹 효과를 얻는 방법