16 replies [Last post]
Greg-J.com
Offline
Enthusiast
Last seen: 12 years 48 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

The CSS purist is going to hate this, but it is the only way I can think of accomlishing exactly what I am trying to accomplish. Which is creating an 8 piece shadow around a div. I know it's been done to death, but this one is a little tricky. Rather than try and explain it, I've posted a link as well as the code for it.

As it is, it works perfectly and as expected in Opera, FF and IE. I can chage its height, width, border and padding without negatively effecting the shadows position.

My problem isn't as much a problem as it is a quest to do this without the table while maintaining its ability to havea fluid shadow regardless of size.

I suppose it's more of a challenge to see if it can be done to the same effect using css.

link: http://www.greg-j.com/help/css/table_shadow.html

note: The shadow will not appear correctly IE, as the png transperancy fix is not included since it is not necessary for the layout.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Table_Shaddow</title>
<style type="text/css">
.adj {
	width: 400px;
	height: auto;
	padding: 50px;
	border:10px solid #CC0000;
	background-color:#009999;
		position: relative;
		left: -12px;
		margin-right:-24px;
		top:-16px;
		margin-bottom:-24px;
		z-index: 1; /*Opera needs this*/
	}
td {
	width: 20px;
	height: 20px;
	}
	.tl{background-image:url(img/tl.png);}
	.tm{background-image:url(img/tm.png);}
	.tr{background-image:url(img/tr.png);}
	.lm{background-image:url(img/lm.png);}
	.rm{background-image:url(img/rm.png);}
	.bl{background-image:url(img/bl.png);}
	.bm{background-image:url(img/bm.png);}
	.br{background-image:url(img/br.png);}
</style>
</head>

<body>
<center>
<table cellpadding="0" cellspacing="0">
	<tr>
		<td class="tl"></td>
		<td class="tm"></td>
		<td class="tr"></td>
	</tr>
	<tr>
		<td class="lm"></td>
		<td>
			<div class="adj">
				This div needs to be able to be any width and any height, 
				while the surrounding border adjusts accordingly.
			</div>
		</td>
		<td class="rm"></td>
	</tr>
	<tr>
		<td class="bl"></td>
		<td class="bm"></td>
		<td class="br"></td>
	</tr>
</table>
</center>
</body>
</html>

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

A div and a table: Blissful marriage or heading for divorce?

Its easy to do in CSS and it shouldn't require more than four images. Visit A List Apart and look up custom corners and borders.

Greg-J.com
Offline
Enthusiast
Last seen: 12 years 48 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

A div and a table: Blissful marriage or heading for divorce?

I was afraid someone was going to miss the point.

If you pay attention, you will notice that I'm not going after a cobbled together border like the one found on ALA and other places. The one I have created is a proper 1:1 replication of a zero offset shadow done in PS. Picky? probably a little too much. But it's what I am after and it is what I have achieved. I'm not against tables if they're used sensibly, so it doesn't really bother me that much. I just wanted to know if this particular method could be converted to pure CSS is all.

Anonymous
Anonymous's picture
Guru

A div and a table: Blissful marriage or heading for divorce?

Greg-J.com wrote:
... you will notice that I'm not going after a cobbled together border like the one found on ALA and other places. ...
Explain how your version isn't cobbled together. :?

Greg-J.com wrote:
I'm not against tables if they're used sensibly,...
I'm not against tables if they're used semantically.

Greg-J.com
Offline
Enthusiast
Last seen: 12 years 48 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

A div and a table: Blissful marriage or heading for divorce?

I'm not trying to insult anyone. I just wanted to know if anyone could achieve the same likeness and fluidity without resorting to a table.

When I call the other--more well known--methods of creating shadows around images/divs "cobbled together", I am referring to the way the represent (or rather, do not represent) a proper shadow. Regardless of semantics.

The technique used on A List Apart is actually the least aesthetically pleasing method I have seen. The other method that I am sure people are familiar with at Newt Edge is an o.k. facsimile of a shadow, but still not quite there. About a week ago, I came across a version at The Shape of Days site, but the original version is gone. Replaced by a heavier weight, albeit simpler method using js/DOM to draw the html. While it's definitely the cleanest method, it's still not perfect.

So when I say "cobbled together", I am referring to the manner in which the shadow is represented and how dynamic it is. Not how well the underlying code is composed. In any of the above methods--either the shadow is not consistent when applied to elements of varied proportions--or the shadow does not adequately represent a shadow--or both. My method may not be as pretty to look at when viewing the source, but it succeeds where all others fail and requires about the same amount of markup, does it not?

Anonymous
Anonymous's picture
Guru

A div and a table: Blissful marriage or heading for divorce?

Greg-J.com wrote:
... So when I say "cobbled together", I am referring to the manner in which the shadow is represented and how dynamic it is. Not how well the underlying code is composed. In any of the above methods--either the shadow is not consistent when applied to elements of varied proportions--or the shadow does not adequately represent a shadow--or both. ...
I've read this over and over and I have to say that I can't figure out what you mean.

I'm not being weird about this, I just don't know what you mean by "not consistent when applied to elements of varied proportions.

This is also confusing: "... manner in which the shadow is represented and how dynamic it is ..." The shadow is "represented" using a picture that is easily replaced but I have no idea what is meant by "dynamic" in this case.

The "shadow does not adequately represent a shadow" part is easy. You do know you don't have to use their images to use their technique, right?

Greg-J.com
Offline
Enthusiast
Last seen: 12 years 48 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

A div and a table: Blissful marriage or heading for divorce?

I'm just going to reply once more and then leave it alone. I've got the answer I needed, and I'll probably just continue to confuse people the more I say.

The method on ALA is not suitable to apply to elements with varied dimensions by nature. Use it on an element that is100px x 100px and then to an element that is 500px x 3000px. You don't get the same effect. It's not just the image they use. It's their method. So using my own image(Drunk simply wouldn't work.

It's also very easy to see that the Newt Edge version(Drunk don't scale well at all.

The Shape of Days is pretty damn close though. The problem is that they use .gif images. If you look at the way it is constructed closely, you will notice that the only reason the bottom corners work well, is because their "white-area" (or rather the area that is not the shadow) covers the background image tiling across the bottom. If these were replaced with .png images you would see the background image bleed through and the corners would look off. In addition, their corner images are opposite their image corner-to-corner which is not a proper shadow.

I hope that helps. If not, go ahead and try to recreate my shadow using my images and any of those methods or your own. I don't think it can be done using less markup, if at all.

Thank you for entertaining me though.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

A div and a table: Blissful marriage or heading for divorce?

I'm just as likely to be missing the same point as everyone else, but have you see The Thrashbox?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Greg-J.com
Offline
Enthusiast
Last seen: 12 years 48 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

A div and a table: Blissful marriage or heading for divorce?

I have seen the thrashbox, yes. To be quite honest, the markup scares the hell out of me Shock

I'm sure it comes in quite handy for a lot of people, in many situations. I'm not--nor do I pretend to be--a CSS guru by any means, dut it's a piss-poor method as far as I am concerned. That's simply my opinion though, and I'm sure it differs dramatically from many others'. It either offers minimum scalability, or you need a monster image to use it (in my case, anyway) otherwise it breaks fairly easily. For my purpose, the PNG's I would need would take up roughly 50KB. So as far as speed an efficiency is concerned, it's not an option really.

I'm sure you're aware of the limitations in using a PNG as a background and the effect the workarounds have on <a> tags on top of them as well.

So I lied. I commented again. Thank you for the suggestion though. It would almost work for me if it weren't for the incredibly long pages it will be used for.

Anonymous
Anonymous's picture
Guru

A div and a table: Blissful marriage or heading for divorce?

Greg-J.com wrote:
I'm just going to reply once more and then leave it alone. I've got the answer I needed, and I'll probably just continue to confuse people the more I say.
Take this in the way it is intended, not as an insult but as an observation when I say, I honestly think you are the confused one here. Again, I'm not being weird, just trying to help . Smile

Greg-J.com wrote:
... it's a *beep*-poor method as far as I am concerned. ...
:roll: *ahem*tables*cough*4*cough*layout?

Greg-J.com wrote:
Thank you for the suggestion though. It would almost work for me if it weren't for the incredibly long pages it will be used for.
My site uses the thrashbox technique and it is very long. :shrug:

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

A div and a table: Blissful marriage or heading for divorce?

Maybe, I'm thick, but I fail to see what the problem is. Its simple to recreate the element layout of the table without using a table. It might not be pretty, but its certainly no less pretty than using a table.

<div class="outer">
  <div class="inner">
  This div needs to be able to be any width and any height, 
  while the surrounding border adjusts accordingly.
  </div>
  <div class="tl"></div>
  <div class="tm"></div>
  <div class="tr"></div>
  <div class="lm"></div>
  <div class="rm"></div>
  <div class="bl"></div>
  <div class="bm"></div>
  <div class="br"></div>
</div>

Obviously, it needs CSS which locates the 8 border elements absolutely, relative to .outer.

The fact that you are using alpha-channel png's implies you aren't so much interested in this working on IE. In which case you can make use of display: table-xxx properties.

To be honest, you would have made things a whole lot simpler if you explained in your original post that you couldn't make use of overlapping elements as that would affect the overall transparency - due to the underlying display having to filter through two levels of opacity.

If you really want to keep clean markup add the shadows using javascript, refer example, which with a little more effort could calculate box margins and adjust the offsets of the surrounding elements accordingly, removing the need for any extra markup in your original html.

Greg-J.com
Offline
Enthusiast
Last seen: 12 years 48 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

A div and a table: Blissful marriage or heading for divorce?

I guess I am the one who's being a little thick here :s

As far as IE is concerned, I am using the sleight pngHack for IE 5.5 and above. As long as it works for IE / Opera / FF / Safari I am happy. I'm really not that interested in supporting anyone else.

I thank you for the effort you put into the example above though.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

A div and a table: Blissful marriage or heading for divorce?

Things become clear.

IE, of course, ignores one offset of an opposite pair, if both are specified making my previous example unworkable.

I suspect you could still manage it, using three nested boxes and two corner pieces. The inner most box would hold your content, the middle box would be shifted with postion relative by the top & left padding amounts (which are no longer needed). Bottom & right padding amounts are placed on the middle element. Sleight background would need to be modified to use a sizing method of crop rather than scale. and the middle element would use IE's drop shadow filter rather than a background image. Is it worth the effort Wink

Greg-J.com
Offline
Enthusiast
Last seen: 12 years 48 weeks ago
Joined: 2005-04-27
Posts: 71
Points: 0

A div and a table: Blissful marriage or heading for divorce?

Quote:
Is it worth the effort

/me shakes magic 8-ball...
"outlook does not look good"

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 1 week 4 days ago
Joined: 2004-06-30
Posts: 9679
Points: 815

A div and a table: Blissful marriage or heading for divorce?

Greg-J.com wrote:
Quote:
Is it worth the effort

/me shakes magic 8-ball...
"outlook does not look good"

Outlook is made by Microsoft, of course it doesn't look good.

Laughing out loud Laughing out loud

Verschwindende wrote:
  • CSS doesn't make pies

Anonymous
Anonymous's picture
Guru

A div and a table: Blissful marriage or heading for divorce?

thepineapplehead wrote:
Greg-J.com wrote:
Quote:
Is it worth the effort

/me shakes magic 8-ball...
"outlook does not look good"

Outlook is made by Microsoft, of course it doesn't look good.

Laughing out loud Laughing out loud

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 18 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

A div and a table: Blissful marriage or heading for divorce?

Popping back on topic ... briefly.

Actually it should be possible in IE. I'll be like Gary, and leave it for the class to work out Laughing out loud