CSS background shadow

	Home Register Search Help Login

Sponsors

Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.

Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.

Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Search Forums

Recent Posts

Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

CSS background shadow

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets >> CSS background shadow

Page: [1]


ziyath Posts: 30 Joined: 10/30/2005 From: maldives Status: offline	CSS background shadow - 3/1/2006 13:27:51 hellow experts i was wondering how does one come about puttin a drop shadow on the site with CSS.. i hear its possible.. a shadow or a fade outside the site.. could u please enlighten me.. thanks ziyath


Tailslide Posts: 5915 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: CSS background shadow - 3/1/2006 13:29:59 What do you want the dropshadow on? Edit: ok well - there is in theory a CSS way of adding dropshadows to text but it's badly supported so I'd avoid it. If you want to add a dropshadow to a photo for instance you could use this method: http://www.alistapart.com/articles/cssdropshadows/ If you want the main text area to have a dropshadow behind it then I'd go for a background-image on the body element and repeat it vertically. Fix it up in Photoshop or whatever then cut it down to a thin slice 2 or 3 pixels high but full width then use that as your background image. < Message edited by Tailslide -- 3/1/2006 13:35:52 > _____________________________ "My strategy is so simple an idiot could have devised it" Little Blue Plane Web Design \| Blood, Sweat & Rust - A Land Rover restoration project (in reply to ziyath)


ziyath Posts: 30 Joined: 10/30/2005 From: maldives Status: offline	RE: CSS background shadow - 3/1/2006 13:39:07 i want a drop shadown on the whole website... www.mhrtrading.com like there...but i want it in css can u help me... ziyath (in reply to ziyath)

Tailslide

Posts: 5915
Joined: 5/10/2005
From: Out here on the raggedy edge
Status: offline

RE: CSS background shadow - 3/1/2006 13:55:55

I see you're using tables for layout - I'm not sure of an easy way to do this with tables.

What I do is for a 100% high background image (top to bottom of the site)

Mock up the white bit of the central page in Photoshop - make it about 760px wide. Add a dropshadow round it. Crop the image so that it's about 3 pixels high and extends to just outside the fade of the dropshadow. Then I add it to the body element of the CSS:

body {text-align:center; background: white url(images/background.jpg) top center repeat-y;}  (plus whatever other rules you need in there)
#container {margin:0 auto; text-align:left;width:760px;}

That will put the background image centrally down the middle of the page top to bottom and centralise a containing div I've called "container" on top of it.

If you want the dropshadow just in a box with a gap top and bottom then you mock it up the same way in Photoshop but make sure that the central white area AND the dropshadow are within the 760px limit so that the site won't cause scrollbars at 800px resolution. Save it the same way to about 3 pixels high.

Then add it to the container element:

body {text-align:center;}
#container {text-align:left; width:760px; margin: 2em auto; background:white url(images/background.jpg) top center repeat-y;}

This centres the box in the middle of the page - 2ems from the top of the page (obviously change that as needed) with the background just around the central containing box. You can then add the "top" fade and the "bottom" fade as background images of other elements to complete the box.

As you're using tables I suppose you could just stick a containing div around your current table.

Edit: See attached gif file for your background image.

Attachment (1)

< Message edited by Tailslide -- 3/1/2006 14:04:13 >

_____________________________

"My strategy is so simple an idiot could have devised it"
Little Blue Plane Web Design | Blood, Sweat & Rust - A Land Rover restoration project

(in reply to ziyath)


bobby Posts: 11394 Joined: 8/15/1969 From: Seattle WA USA Status: offline	RE: CSS background shadow - 3/1/2006 19:25:43 you can also play around with different color and size borders... shades of grey and varying widths can give you a drop-shadow-like effect. there are a few ways it can be done. how complicated do you want to get? _____________________________ If con is the opposite of pro, is Congress the opposite of progress? (in reply to Tailslide)


reformed hater Posts: 167 Joined: 2/1/2006 From: The land of sun and hurricanes; US Status: offline	RE: CSS background shadow - 3/31/2006 9:30:16 There's this one too. I like it and its all using CSS _____________________________ When asked what the White House was like by a British student George W. Bush responded �It is White" (in reply to bobby)


womble Posts: 5461 Joined: 3/14/2005 From: Living on the edge Status: offline	RE: CSS background shadow - 3/31/2006 11:21:33 I think that one was the one Spit recommended to me last week - haven't got round to trying it out yet - I got distracted by another project. sigh...so much code, so little time... (did I mention I HATE javascript? ) _____________________________ ~~ "A cruel god ain't no god at all" ~~ (in reply to reformed hater)


reformed hater Posts: 167 Joined: 2/1/2006 From: The land of sun and hurricanes; US Status: offline	RE: CSS background shadow - 3/31/2006 11:27:51 It is one and the same. I'm in the process of trying it. Hopefully I'll have my terrible site up next week for you all to point and laugh at _____________________________ When asked what the White House was like by a British student George W. Bush responded �It is White" (in reply to womble)


spitfire Posts: 424 Joined: 8/6/2005 Status: offline	RE: CSS background shadow - 3/31/2006 11:39:35 Feel free to use it - I've got another bookmark (in reply to reformed hater)


caz Posts: 3468 Joined: 10/10/2001 From: Somewhere south of Chester, UK Status: offline	RE: CSS background shadow - 3/31/2006 13:33:10 I have used it a few times and found that you have to watch that you have closed all your divs - or else the validator has a fit and you end up in a tangle. You can see a current implementation here _____________________________ Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard. Cheshire cat. www.doracat.co.uk I remember when it took less than 4hrs to fly across the Atlantic. (in reply to spitfire)


dpf Posts: 7121 Joined: 11/12/2003 From: India-napolis Status: offline	RE: CSS background shadow - 3/31/2006 13:58:53 quote: I've got another bookmark a bookmark and a pixel = one heavily armed man _____________________________ Dan (in reply to spitfire)


reformed hater Posts: 167 Joined: 2/1/2006 From: The land of sun and hurricanes; US Status: offline	RE: CSS background shadow - 3/31/2006 14:00:27 my problem is that i can't get it to be opaque in FF, amongst other stuff that you will point out when I publish the site. _____________________________ When asked what the White House was like by a British student George W. Bush responded �It is White" (in reply to caz)


spitfire Posts: 424 Joined: 8/6/2005 Status: offline	RE: CSS background shadow - 3/31/2006 14:10:12 quote: ORIGINAL: dpf a bookmark and a pixel = one heavily armed man You are forgetting I lost me pixel to the dog. Currently I am pixel-challenged. Guess you could call me a one armed man - if you must. (in reply to dpf)


reformed hater Posts: 167 Joined: 2/1/2006 From: The land of sun and hurricanes; US Status: offline	RE: CSS background shadow - 3/31/2006 14:29:33 oh and they took down the buy a pixel link... you could have gotten one there Spit. _____________________________ When asked what the White House was like by a British student George W. Bush responded �It is White" (in reply to spitfire)


spitfire Posts: 424 Joined: 8/6/2005 Status: offline	RE: CSS background shadow - 3/31/2006 14:34:53 Now you tell me (in reply to reformed hater)


womble Posts: 5461 Joined: 3/14/2005 From: Living on the edge Status: offline	RE: CSS background shadow - 4/1/2006 4:05:16 _____________________________ ~~ "A cruel god ain't no god at all" ~~ (in reply to spitfire)