Menu
I have created a shape which represents a page with a shadow that gets bigger towards the bottom.
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}<div></div>I need this to be rotated but when i try to add transform: rotate(10deg), the box-shadow illusion gets ruined and goes on top of the parent layer.
body {
background: #dddddd;
}
div {
background: white;
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
padding: 10px;
transform: rotate(10deg);
}
div:before,
div:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}<div></div>I have found this question: Which CSS properties create a stacking context? but there doesn't seem to be a proposed solution for my requirement.
Would there be any good solutions which would work in my case. I do not mind if they are SVG, filter, canvas or any thing else as long as it is supported reasonably well.
350
Using transforms on the box-shadow (& transform ) property, we can create the illusion of an element moving closer or further away from the user.
they achieve different things. but as an advantage with filter:drop-shadow you can generate shadow around irregular shapes or images, whereas box-shadows generates a rectangular shadow. as you can see , with drop-shadow the pseudo-element also has a shadow around it, whereas with box-shadow it does not.
Use a pseudo-element with box-shadow and rotate it instead of the container element.
You can comma separate box-shadow any many times as you like.
The stronger shadow from .box::after is completely hidden at this point, and you can’t interact with the box: To create the same effect as in the demo, now all we need to do is to scale up the .box on hover, and fade in the pseudo-element and its shadow: That’s it! Hover the box to preview the effect:
The CSS box-shadow property is used to apply one or more shadows to an element. In its simplest use, you only specify a horizontal and a vertical shadow. The default color of the shadow is the current text-color. The color parameter defines the color of the shadow.
Border-radius combined with box-shadow just doesn't work. Border-radius has to be removed. Workaround for missing border regression introduced in RC2 can be found in issue #1920 .
Using a negative spread radius, you can get squeeze in a box shadow and only push it off one edge of a box. You can comma separate box-shadow any many times as you like. For instance, this shows two shadows with different positions and different colors on the same element:
If you use another div it fixes the problem that you are experiencing, so that the background colour is on the inner div and the rotate is on the outer div.
Else you might need to use another method to get the same result.
body {
background: #dddddd;
}
.two{
background: white;
height: 300px;
width: 300px;
padding: 10px;
}
div.one {
margin: 40px auto;
height: 300px;
width: 300px;
position: relative;
transform: rotate(10deg);
}
div.one:before,
div.one:after {
height: 96%;
z-index: -10;
position: absolute;
content: "";
left: 8px;
top: 2%;
width: 30%;
max-width: 300px;
background: transparent;
box-shadow: -10px 0px 10px rgba(0, 0, 0, 0.5);
transform: rotate(1.5deg);
}
div.one:after {
transform: rotate(-1.5deg);
right: 8px;
left: auto;
box-shadow: 10px 0px 10px rgba(0, 0, 0, 0.5);
}<div class="one">
<div class="two">
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
