HDRebel88 Posted March 13, 2014 Share Posted 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%; } Link to comment https://forums.phpfreaks.com/topic/286941-box-shadow-on-all-sides-except-top/ Share on other sites More sharing options...
adam_bray Posted March 16, 2014 Share Posted 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. Link to comment https://forums.phpfreaks.com/topic/286941-box-shadow-on-all-sides-except-top/#findComment-1472763 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.