Box-shadow on All sides except top

HDRebel88 · March 13, 2014

I'm trying to get a box-shadow to be applied to all sides but the top.

Here's the page:

http://www.hydralus.com/index.php

The area in question is the div with the red box-shadow. I want to get rid of the top shadow and keep the left, right, and bottom exactly the way they are. I essentially want that protruding box to merge into the top black box.

I've already tried z-index to force the smaller box behind the bigger one, but no dice.

I'm basically trying to mimic the navigation look of this site: http://www.advancedlumonics.com/

HTML/PHP

<?php
header('X-UA-Compatible: IE=edge');
require 'pages.php';
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<base href="//www.hydralus.com" />
<title>Hydralus</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="verify-v1" content="" />
<meta name="keywords" content=""  />
<meta name="description" content="" />
<meta name="author" content="Hydralus, Andrew McCarrick, Raphael Ades-Aron, Nana Kvaratskheliya, Latisha Lewis" />
<meta name="robots" content="index, follow" />
<link rel="stylesheet" href="style.css" media="screen" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="//hydral.us/jquery/2.1.0.min.js"><\/script>')</script>
</head>
<body>
<div id="wrapper">
<div id="head">
<div id="innerHeader">
<div id="logo">
Logo
</div>
<div id="navbar">
Navigation Bar
</div>
<div id="top">
||
</div>
</div>
</div>

<div id="contentWrapper">
<div id="content">
<?php echo $content; ?>
Content
</div>
</div>

<div id="footerWrapper">
<div id="footer">
Footer
</div>
</div>

</div>
</body>
</html>

CSS:

html,body {
margin:0;
padding:0;
height:100%;
background-color: #F4F4F4;
}

#wrapper{
min-height:100%;
position:relative;
}

#head{
height: 140px;
border: 0;
background-color: #080808;
box-shadow: 0px 3px 4px #828282;
}

#innerHeader{
width: 1000px;
margin: 0 auto;
text-align: center;
padding-top: 10px;
color: #FFFFFF;
}

#logo{
height: 70px;
}

#navbar{
height: 40px;
}

#top{
width: 48px;
height: 24px;
position: relative;
top: 17px;
background-color: #080808;
margin: 0 auto;
box-shadow: 0 0 3px 4px #FF0000;
overflow: hidden;
}

#contentWrapper{
padding-bottom: 65px;
}

#content{
padding: 5px;
min-height: 500px;
}

#footerWrapper{
height: 60px;
position: absolute;
bottom: 0;
width: 100%;
}

adam_bray · March 16, 2014

The box-shadow of the other site is

box-shadow: 0 1px 3px rgba(0,0,0,0.4);

Using RGBA will tone down the shadow as it lowers the opacity, giving a slightly different effect to your original box-shadow.

Sign In

Box-shadow on All sides except top

Recommended Posts

HDRebel88

Link to comment

Share on other sites

adam_bray

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information