Shulou(Shulou.com)06/01 Report--

This article mainly introduces CSS how to achieve photo stacking effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

Steps

1. Initial index.html

To create the first photo, the top one. We just need to add a div that contains the img of the photo. That's it, and the rest of the effect is achieved through CSS. Make sure that the class of div is stackone.

Photo Stack

* {

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)

}

The initial effect is as follows:

2.The First Pseudo Element

Now let's add a layer of film. The effect we want is that the bottom picture looks as if it is under the top photo. We can use the pseudo-class of 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)

}

At this time, the effect is very different.

3. Perfect before

This is not the effect we want. How to fix it? We need to add some positioning to: before, and then set z-index to put it at the back.

.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)

}

The effect is normal at this time, and there is a clue.

4.The Second Pseudo Element

.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)

}

Thank you for reading this article carefully. I hope the article "how to achieve photo stacking effect with CSS" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.