Guest crusherboy Posted July 14, 2009 Share Posted July 14, 2009 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 More sharing options...
Synook Posted July 15, 2009 Share Posted July 15, 2009 CSS3 can do it with border-shadow, but for the moment you have to use images. Link to comment Share on other sites More sharing options...
dsonesuk Posted July 15, 2009 Share Posted July 15, 2009 download 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. Link to comment Share on other sites More sharing options...
hanwall Posted July 19, 2009 Share Posted July 19, 2009 So, all websites having this shadows has a background using shadows or separate transparent pictures with shadow then? Link to comment Share on other sites More sharing options...
dsonesuk Posted July 19, 2009 Share Posted July 19, 2009 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. Link to comment Share on other sites More sharing options...
thescientist Posted July 20, 2009 Share Posted July 20, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.