I'm trying to create an uneven shadow effect for a website, please see an example below of what I need to achieve:
Unfortunately I don't think this can be done with CSS3, to my knowledge the box-shadow property can only be used to create evenly spread shadows.
However, my knowledge of CSS3/HTML5 isn't great so I was wondering if anybody knows of anyway to achieve this without resorting to images/extra div's/relative & absolute positioning which I would rather avoid?
This is the closest what I've came to your image preview, you can wrap these in a positioned relative div and set the positions accordingly
HTML
<div class="container"></div>
<div class="shadow"></div>
CSS
.container {
width: 300px;
height: 200px;
margin: 50px;
background-color: #eeeeee;
z-index: 1;
}
.shadow {
-ms-transform: rotate(2deg); /* IE 9 */
-webkit-transform: rotate(2deg); /* Safari and Chrome */
-o-transform: rotate(2deg); /* Opera */
-moz-transform: rotate(2deg); /* Firefox */
box-shadow: 0 6px 16px -6px black;
height: 20px;
width: 300px;
position: absolute;
top: 225px;
z-index: -1;
left: 50px;
}
The best i could come up with was placing a pseudo-element behind your div:
div::after{
content:"";
display:block;
transform:rotate(5deg);
box-shadow:1px 5px 50px #444;
z-index:-1;
}
I guess you want to play a little with the values and try to get as close as possible to your original.
Yes you can with a few properties. ie:
html:
<div class="main">
<div class="shadow-phantom">
</div>
</div>
css:
.main {
width:100px;
height:100px;
background-color:#e1e1e1;
margin:10px auto;
}
.shadow-phantom {
-webkit-border-radius: 12px 110px 20px 25px;
border-radius: 12px 110px 20px 25px;
margin: -4px 0px 0px -0px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box; background-clip: padding-box;
-webkit-box-shadow: 7px 7px 10px 0px #AAA;
box-shadow: 7px 7px 10px 0px #AAA;
width:90px;
height:100px;
position:absolute;
z-index:-1;
-webkit-transform: rotate(5.5deg);
-moz-transform: rotate(5.5deg);
-ms-transform: rotate(5.5deg);
-o-transform: rotate(5.5deg);
transform: rotate(5.5deg);
}
check this fiddle to see it in action: http://jsfiddle.net/wandarkaf/MKV4Q/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.