Can anyone make box-shadow like this image?

**dileepma** · Aug 11, 2012 23:45

Can anyone make box-shadow like this image?

2ikzkvs.jpg

**ralph.m** · Aug 12, 2012 00:54

Hi dileepma. Welcome to the forums.

Here's a rough attempt:

Code:

<!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.

**dileepma** · Aug 12, 2012 02:45

Originally Posted by ralph.m

Hi dileepma. Welcome to the forums.

Here's a rough attempt:

Code:

<!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!!!!

**ralph.m** · Aug 12, 2012 06:16

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.

**dileepma** · Aug 12, 2012 19:36

Originally Posted by ralph.m

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.

**ralph.m** · Aug 12, 2012 19:41

Great, glad to hear it.

User Tag List

Thread: Can anyone make box-shadow like this image?

Thread Tools

Display

Can anyone make box-shadow like this image?

Bookmarks

Bookmarks

Posting Permissions