Jump to content

Shadow


Guest crusherboy
 Share

Recommended Posts

Guest crusherboy

Hello,Perhaps this could be done with CSS, I really dont know but I need help.Im trying to create a shadow around my main table (like the border) if I can say...Basically something like this site gamespot example siteWhen you look at this site, it seems they created a shadow all around the border. Thanks for your help!

Link to comment
Share on other sites

CSS3 can do it with border-shadow, but for the moment you have to use images.

Edited by Synook
Link to comment
Share on other sites

trans_lft_rgt.pngtranscorner.pngtrans_top_bottom.pngdownload above images.insert css code into page or external stylesheet and link to that style sheet.<style type="text/css">.t_lc { width: 25px; height: 25px; background:url(transcorner.png) top left no-repeat; } .top { height: 25px; background:url(trans_top_bottom.png) top center repeat-x;} .t_rc { width: 25px; height: 25px; background:url(transcorner.png) top right no-repeat;} .left {width: 25px; background:url(trans_lft_rgt.png) top left repeat-y; } .right{width: 25px; background:url(trans_lft_rgt.png) top right repeat-y; } .b_rc { width: 25px; height: 25px; background:url(transcorner.png) bottom right no-repeat;}.bottom { height: 25px; background:url(trans_top_bottom.png) bottom center repeat-x;} .b_lc { width: 25px; height: 25px; background:url(transcorner.png) bottom left no-repeat; } .border_table { border-collapse:collapse;}</style>insert this code into html document<table class="border_table" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="t_lc"> </td> <td class="top"> </td> <td class="t_rc"> </td> </tr> <tr> <td class="left"> </td><td>ENTER your TABLE HERE</td> <td class="right"> </td> </tr> <tr> <td class="b_lc"> </td> <td class="bottom"> </td> <td class="b_rc"> </td> </tr></table>I know tables are sssssssssooooooo bbbbbbaaaaaaaad, and it should be done using divs etc, so stop your frantic typing to point this out to me, and let me finish.But you really should not use tables, unless it is to show tabular data, in a row-and-column format. Edited by dsonesuk
Link to comment
Share on other sites

There are few ways of producing this effect, the main one is to have top, and bottom rows with background images with rounded corners, then use a repeating background image for the middle/content area. One problem you will have, if you use transparent png image in IE6, is that it won't display it correctly as a transparent, unless a iepngfix (google) is used.

Edited by dsonesuk
Link to comment
Share on other sites

There are few ways of producing this effect, the main one is to have top, and bottom rows with background images with rounded corners, then use a repeating background image for the middle/content area. One problem you will have, if you use transparent png image in IE6, is that it won't display it correctly as a transparent, unless a iepngfix (google) is used.
and even that is limited if certain positioning is used on those images. it does work well mostly, but won't validate (Strict anyway...).
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...