0

I was able to make the lifted corners for a DIV using CSS. Here is the jsfiddle link Here

I need to design lots of child DIVs that also have lifted corners just like the parent. How can I make this?

jeewan
  • 1,597
  • 5
  • 23
  • 40

2 Answers2

2

Ideally, you want to get your code to the point where simone's answer would work. It might take a bit of work to get to that point, though!

Your first problem stems from the fact that your drop-shadow and lifted classes aren't independent. You need to have a (modified) drop-shadow class appended to any div that you want the shadows to appear on, as you can see in this ugly JSFiddle.

However, I had to make a modification to your drop-shadow class. What I did was get rid of the 'z-index' value on the drop-shadow:before, drop-shadow:after selectors, which was hiding the drop-shadow on the child div.

From this, we can see the first edit we need to make. You need to add

.lifted:after,
.lifted:before {
    position: absolute;
    content: "";
}

which is necessary to make the shadows visible (remember, the before and after pseudoelements won't display if you don't set the content). But this isn't sufficient. The reason is because your absolute positioning is placing the two shadows on top of one another.

Go to this JSFiddle and add/remove the lifted class from the child div to see what I mean.

This JSFiddle almost fixes it, but you should see this question and answer to see why it doesn't! You should be able to use that to fix your problem.

Community
  • 1
  • 1
jamesplease
  • 12,547
  • 6
  • 47
  • 73
  • Hi jmeas, thanks for the answer and the fiddle code. I am trying to fix my requirements but still can not get it. I will also take a look on your solution of this answer. Thank you. – jeewan Oct 16 '12 at 13:39
  • No problem. Again, to explicitly state the solution, you'll need to use non-semantic code to stack elements (`div`s, presumably), because `::before` and `::after` pseudoelements are placed *inside* their parent element. – jamesplease Oct 16 '12 at 16:51
1

You have a .lifted class in your jsFiddle. You can use that same class in every other div you want.

Simone
  • 20,302
  • 14
  • 79
  • 103
  • can you please edit the fiddle and write me the code. I tried yours, I did not work. – jeewan Oct 15 '12 at 20:12
  • But it does not show the lifted corner's shadow for the "child-one" div. I need the "lifted corner shadow" in every child I created inside the parent DIV of class "drop-shadow lifted" – jeewan Oct 15 '12 at 20:16