抹桥的博客
Language
Home
Archive
About
GitHub
Language
主题色
250
163 words
1 minutes
How to Create a Page Curl Shadow
2015-01-26

Methods for creating some special shadows essentially involve stacking multiple shapes together, then adjusting their stacking order with z-index to finally achieve the desired effect. Curled edge shadow

HTML:

<li><img src="img/1.gif" alt="img" /></li>

CSS:

li::after {
  content: "";
  width: 90%;
  height: 80%;
  left: 1.6%;
  bottom: 4.6%;
  position: absolute;
  background-color: transparent;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
  -webkit-transform: rotate(-4deg) skew(-8deg);
  -moz-transform: rotate(-4deg) skew(-8deg);
  -ms-transform: rotate(-4deg) skew(-8deg);
  -o-transform: rotate(-4deg) skew(-8deg);
  transform: rotate(-4deg) skew(-8deg);
  z-index: -1;
}
li::before {
  content: "";
  width: 90%;
  height: 80%;
  right: 1.6%;
  bottom: 4.6%;
  position: absolute;
  background-color: transparent;
  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
  -webkit-transform: rotate(4deg) skew(8deg);
  -moz-transform: rotate(4deg) skew(8deg);
  -ms-transform: rotate(4deg) skew(8deg);
  -o-transform: rotate(4deg) skew(8deg);
  transform: rotate(4deg) skew(8deg);
  z-index: -1;
}

It’s essentially about taking two parallelograms, rotating them left and right respectively, placing them beneath the original image (as shown in the diagram below), and applying a shadow to them, which will ultimately create the shadow effect seen in the image. Diagram Click here to view the DEMO

This article was published on January 26, 2015 and last updated on January 26, 2015, 3906 days ago. The content may be outdated.

How to Create a Page Curl Shadow
https://blog.kisnows.com/en-US/2015/01/26/rase-shadow/
Author
Kisnows
Published at
2015-01-26
License
CC BY-NC-ND 4.0