Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts

    Box-shadow All sides except top

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

    Here's the page:
    Hydralus

    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
    Code:
    <?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
    Code:
    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%;
    }
    Last edited by HDRebel88; 03-13-2014 at 03:46 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello HDRebel88,
    The selectors on box-shadow are not top,right,bottom,left like margin or padding. Those zeros you have at top and right are removing the horizontal and vertical offsets. Have a look at this page that explains how box-shadow works.

    Maybe something like this?
    Code:
    	box-shadow:  4px 4px 4px -3px #f00;
    Last edited by Excavator; 03-13-2014 at 05:21 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts
    I can get the top box-shadow to go away by doing this:
    Code:
    box-shadow: 0 6px 2px 2px #FF0000;
    But now the bottom box shadow is far too large. I want the left, right, and bottom box shadows all to have the same thickness and blur. The top box shadow should be zero.



    EDIT: I used another DIV and positioned it over the excessive thickness on the bottom of the div with the box-shadow.
    http://www.hydralus.com/index.php
    Last edited by HDRebel88; 03-13-2014 at 06:25 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    A shadow, if you imagine a beam of light coming from above, is not going to be equal on three side. Look at this page to see what I mean.
    Maybe you can get the desired effect with a border, something like this
    Code:
    #top {
    	width: 48px;
    	height: 24px;
    	position: relative;
    	top: 17px;
    	background-color: #080808;
    	margin: 0 auto;
    	overflow: hidden;
    	border-shadow: #f00;
    	border: 1px solid #f00;
    	border-top: none;
    }
    Why didn't z-index work? Post your code so we can see how you tried that.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,677
    Thanks
    6
    Thanked 1,008 Times in 981 Posts
    I haven’t looked at your code but two general things you might want to consider:


    • You can apply a negative spread radius to a shadow, e. g. box-shadow: 0 3px 5px -3px black;. This will not do a straight cut-off but perhaps it’s already doing the job; play around with blur and spread radius a little.
    • You can cut off a shadow by applying overflow: hidden to a parent element (if the shadowed element sits right at the top edge). Perhaps your mark-up fits this requirement.

  • #6
    Regular Coder
    Join Date
    May 2011
    Posts
    124
    Thanks
    12
    Thanked 6 Times in 6 Posts
    I would use a border but I want a blurred effect, which you can't do with a border.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Here is how z-index would need to be set up to stack things in the right order. Have you looked into border-image at all?
    Code:
    <!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" />
    <style type="text/css">
    html, body {
    	margin: 0;
    	height: 100%;
    	background: #f4f4f4;
    }
    #wrapper {
    	min-height: 100%;
    	position: relative;
    }
    #head {
    	height: 140px;
    	position: relative;
    	z-index: 2;
    	background: #080808;
    	box-shadow: 0px 3px 4px #828282;
    }
    #innerHeader {
    	width: 1000px;
    	margin: 0 auto;
    	text-align: center;
    	padding-top: 10px;
    	color: #fff;
    }
    #logo { height: 70px; }
    #navbar { height: 40px; }
    #top {
    	width: 48px;
    	height: 24px;
    	position: relative;
    	top: 1px;
    	z-index: 1;
    	background: #080808;
    	margin: 0 auto;
    	box-shadow: 0 0 3px 4px #f00;
    	overflow: hidden;
    }
    #contentWrapper { padding-bottom: 65px; }
    #content {
    	padding: 5px;
    	min-height: 500px;
    }
    #footerWrapper {
    	height: 60px;
    	position: absolute;
    	bottom: 0;
    	width: 100%;
    }
    </style>
    </head>
    <body>
    	<div id="wrapper">
    		<div id="head">
    			<div id="innerHeader">
    				<div id="logo"> Logo </div>
    				<div id="navbar"> Navigation Bar </div>
    			<!--end innerHeader--></div>
    		<!--end head--></div>
    				<div id="top"> || </div>
    		<div id="contentWrapper">
    			<div id="content"> <?php echo $content; ?> Content </div>
    		<!--end contentWrapper--></div>
    		<div id="footerWrapper">
    			<div id="footer"> Footer </div>
    		<!--end footerWrapper--></div>
    	<!--end wrapper--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New to the CF scene
    Join Date
    Jul 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try this code
    .allSides
    {
    width:350px;height:200px;
    border: solid 1px #555;
    background-color: #eed;
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 0 10px rgba(0,0,0,0.6);
    }

    Source : CSS Shadow Examples

    Chris


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •