Can anyone make box-shadow like this image?
Hi dileepma. Welcome to the forums.
Here’s a rough attempt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Box Shadder</title>
<style media="all">
div {
width: 215px;
height: 80px;
border: 1px solid #ccc;
position: relative;
border-radius: 15px;
background: white;
}
div::before, div::after {
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
position: absolute;
left: 10px;
bottom: 12px;
z-index: -1;
width: 50%;
max-width: 100px;
height: 20px;
content: "";
}
div::after {
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
It’s only tested on webkit browsers (Chrome/Safari) so you’d need to add in other vendor prefixes etc for other browsers.
Thanks Thanks Thanks !!! No words to say say !!! Thank you again!!!
You’re welcome.
Remember that it won’t work in all browsers, though—even with vendor prefixes for Firefox etc. (CSS3 is still experimental, and some old browsers like IE8 and under hang around like a bad smell.) You could use an image instead to create that effect if you need it to work in all browsers.
I used browser vendors hacks for work it on all browsers…I just need to display it on IE9 , Chrome/Safari latest version, Firefox latest version & Opera latest version.All the hacks works for me.
Great, glad to hear it.