PHP Versions Question posted in
You can find a list of all versions here.

Responsive paper curl effect with CSS – PHP Versions

I want to create the curl and shadow effect as seen on w3resource’s code box:
https://www.w3resource.com/jquery-exercises/part1/jquery-practical-exercise-6.php
It’s responsive. The effect is only on the side. The middle part is shortening with the narrowing window.
There are many examples for that around but I couldn’t find a responsive version.
w3resource uses inline style. I believe an experienced person can figure it out quickly.

Tags:

2

Answers


  1. 0

    There are two box shadows you have to apply the first one is

    
box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%),
 0 3px 1px -2px rgb(0 0 0 / 20%),
 0 1px 5px 0 rgb(0 0 0 / 12%);

    the next in a separate class will be

    0 6px 10px 0 rgb(0 0 0 / 14%), 
0 1px 18px 0 rgb(0 0 0 / 12%),
0 3px 5px -1px rgb(0 0 0 / 20%);

    To make the div responsive start with making the div width: 100%;. If you want to set up the entire page you need to create some sort of layout with flexbox of grid

    Login or Signup to reply.
  2. 0

    The curl effect is basically an optical illusion. There is no curl, the bottom of the ‘paper’ is a straight horizontal bottom of an element. Your eye thinks it is curling because of the shadows.

    The shadows are applied using before and after pseudo elements to the ‘piece of paper’. The example you gave uses ems to size and position the shadows – you may like to play with them to get the effect you want and to make it make sense whatever size of ‘paper’ you are trying to make ‘curl’.

    Here’s a simple snippet to get you started. It is responsive in that the sizes of paper and shadow are percentage values. You need to experiment to see whether using %s for the shadow makes sense or whether you are better off sticking to ems (or, actually, pxs). Also, to maintain paper aspect ratio it’s worth considering using vmin instead of %s (e.g. to keep the ratios needed for A4 or letter paper, depending on your use case).

    .curl {
  width: 60vmin;
  height: 80vmin;
  background-color: #eeeeee;
  position: relative;
  border: solid 0.5px #fefefe;
}
div.curl:after {
  right: 0.75em;
  left: auto;
  transform: rotate(2deg);
}
div.curl:before, .curl:after {
  content: '';
  z-index: -2;
  display: block;
  position: absolute;
  bottom: 0.75em;
  left: 0.18em;
  width: 40%;
  height: 20%;
  box-shadow: 0px 13px 8px #979797;
  transform: rotate(-2deg);
}
    <div class="curl"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search