Be a Supporter!

Problem w/CSS box-shadow property

  • 576 Views
  • 3 Replies
New Topic Respond to this Topic
Pilot-Doofy
Pilot-Doofy
  • Member since: Sep. 13, 2003
  • Offline.
Forum Stats
Member
Level 37
Musician
Problem w/CSS box-shadow property Nov. 9th, 2012 @ 02:06 PM Reply

I have a little problem that I can't quite figure out with CSS Overflow. The problem is on the account page of FretFast.com and you will have to login to see it, but here is some test account info that will allow you to login without creating an account:

URL: http://fretfast.com/#account
Email: les@paul.com
Pass: gibson

Anyway, if you look at the left most button on the lower navigation panel, labeled "My Profile", you'll see that it almost looks right, but it has that overflow problem in the bottom right corner with the shadow and the gray line at the bottom won't disappear.

The other buttons are also a little off. If possible, I would like for them to meet the top of the content area but to go under the content area's shadow, to create a depth effect.

I've been fiddling with this all day and night so any help would be greatly appreciated. I found a tutorial on how to do it, and I feel really stupid for not being apply it to my example, but I think it might be because my <li> elements are the ones with the shadow and the <ul> element is the only one with a shadow in the example. It sucks, but it seems my coding abilities have really fallen off since I haven't used them much in the past 4-5 years. :( I need to get back into this shit full-time!

Finally, here is my code:

/* CSS CLASSES REFERENCED IN THE NAVIGATION TABS */
.menu {
	float: right;
	height: 40px;
	margin: 0 auto;
	padding: 0;
}

.menu ul {
	margin: 0;
	padding: 0px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

.menu li {
	float: left;
	border-left: 1px solid #000000;
}

.menu a {
	display: block;
	height: 35px;
	padding: 10px 15px 0px 15px;
	text-decoration: none;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Abel', sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #111100;
	border: none;
	background: #FF9900;
}

.menu li {
    position: relative;
    z-index: 2;
	color: #331100;
	text-decoration: none;
}

.menu a:hover, .menu .current_page_item a {
	background: #AA5500;
	color: #331100;
	text-decoration: none;
}

.blurBottom {
    box-shadow: 0px -3px 10px 0px #111100 inset;
}

.blurTop {
    box-shadow: 0px 3px 7px 0px #111100 inset;
}
// PHP/HTML  
// ignore the slashes in front of the single quotes, that's just because it's stored in a PHP string
        <div class="menu" style="float: left; width: 100%; height: 25px; position: relative; top: 0px; left: 5px;">
            <ul style="overflow: hidden;">
                <li id="homeLink" class="current_page_item" style="overflow: hidden;"><a href="/#home" onClick="loadPage(\'home\');"
                    class="blurTop" style="height: 28px; background: #FFFFA3; ">My Profile</a></li>
                <li id="blogLink"><a href="/#blog" onClick="loadPage(\'blog\');"
                    class="blurTop" style="height: 25px;">My Settings</a></li>
                <li id="helpLink"><a href="/#help" onClick="loadPage(\'help\');"
                    class="blurTop" style="height: 25px;">My Messages</a></li>
                <li id="freeLink"><a href="/#free" onClick="loadPage(\'free\');"
                    class="blurTop" style="height: 25px;">My Lessons</a></li>
                <li id="premiumLink"><a href="/#premium" onClick="loadPage(\'premium\');"
                    class="blurTop" style="height: 25px;">Directory</a></li>
                <li id="accountLink" style="float: right;"><a href="/#account" onClick="loadPage(\'account\');"
                    class="blurTop" style="height: 25px; margin-right: 12px;">Log Out</a></li>
            </ul>
        </div>
Pilot-Doofy
Pilot-Doofy
  • Member since: Sep. 13, 2003
  • Offline.
Forum Stats
Member
Level 37
Musician
Response to Problem w/CSS box-shadow property Nov. 9th, 2012 @ 10:48 PM Reply

Sorry, forgot the link to the example:
http://www.pamgriffith.net/blog/complex-uses-of-css3-box-sha dow

smulse
smulse
  • Member since: Mar. 24, 2005
  • Offline.
Forum Stats
Member
Level 31
Blank Slate
Response to Problem w/CSS box-shadow property Nov. 10th, 2012 @ 04:38 PM Reply

It looks like you've been making some changes as I wrote this, did you get it sorted?

I think the problem is that inset box-shadows don't have any transparency. Hence why things aren't blending nicely/don't stack in quite the way you would like.

If you didn't already fix it, this probably isn't exactly what you're after but hopefully it'll get you close enough you can make a few tweaks to get it looking how you want.
1. Give .menu a position: relative; z-index: 2;
2. Give .post a position: relative; z-index: 2;
3. Change box-shadow on .post to box-shadow: 0 0 5px 4px #ffffa3;
4. Tweak margins and paddings on .post to get what you want, maybe something like padding: 0; margin: 7px;


BBS Signature
Pilot-Doofy
Pilot-Doofy
  • Member since: Sep. 13, 2003
  • Offline.
Forum Stats
Member
Level 37
Musician
Response to Problem w/CSS box-shadow property Nov. 12th, 2012 @ 12:14 AM Reply

Thanks for the response, but yea I just changed it back to the original way and gave up on the left/right edge shadows for the outer buttons. I read that it's not possible with inset shadows and is only possible with outer shadows, which definitely makes sense now after all the things I tried, including the z-index manipulation. I was going to do an outer shadow to fix it, but with a background as dark as the one I have, it doesn't really give the same effect.

No worries, though. I have a designer working with me right now and we'll be revamping the design so it will definitely be looking better in the next week or so and I can't wait! :)