template question

  • gt8ost4l
  • Student
  • Student
  • User avatar
  • Posts: 99

Post 3+ Months Ago

does anybody have any links to tutorials on how to make side shadows on centered templates?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

gt8ost4l wrote:
does anybody have any links to tutorials on how to make side shadows on centered templates?

The only way of I know is Photoshop and that is merely setting the blending options. Maybe there are some CSS (actually there is one... to lazy to research right now).
  • zaiah
  • Proficient
  • Proficient
  • zaiah
  • Posts: 375

Post 3+ Months Ago

http://www.google.com/search?q=css+drop ... =firefox-a
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

css3 although most browsers don't support that yet (Safari 3 has support for that shadow thing).
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

gt8ost4l - do you mean shadows like the ones at:
http://alternative-internet.com/webmasterstuff/nwccc/

I did those using Faux Columns (http://www.alistapart.com/articles/fauxcolumns/) and a 1 pixel high background image.

Obviously, there are other ways to go about it - such as using 2 divs or table cells (one for each side) that stretch the full window height (always the tricky part) and using the shadows as background images for said divs/cells.

As for making the shadow image itself - just hop in your favourite graphics program and create a gradient from black or grey to your background colour (or black to transparent, if you are using a PNG image), then cut off as much of the black/grey as you necessary until you've got the right amount of shadow for your needs.
  • gt8ost4l
  • Student
  • Student
  • User avatar
  • Posts: 99

Post 3+ Months Ago

yes the first link thats what i meant how exactly do you do that
  • Hob Bramble
  • Proficient
  • Proficient
  • User avatar
  • Posts: 351
  • Loc: Indiana, USA

Post 3+ Months Ago

Well, like I said, there's more than one way to do it. I used the Faux Columns method, as explained at:
http://www.alistapart.com/articles/fauxcolumns/

If you haven't heard of/used it, it's essentially using a single vertically tiled background image to create the illusion of multiple column backgrounds/separators. In this case, rather than separators or backgrounds, shadows.

To do it, all you need to do is create your centred div, and a background image the width of your div (give it whatever background colour or pattern you want your div to have).

Then, add your shadows to the sides of your background image (a gradient from black or grey to your page background will do it fine), making your background image larger to suit.

Finally, set your background image to be centred on your page and tiled vertically. That's it.

For example, here is the CSS for my div and background image:
Code: [ Select ]
body {
    background:#CCCCCC url(whiteline.gif) repeat-y 50% 0;
    margin:0px;
}
#content_div {
    position:relative;
    width:242px;
    margin:5px auto;
}
  1. body {
  2.     background:#CCCCCC url(whiteline.gif) repeat-y 50% 0;
  3.     margin:0px;
  4. }
  5. #content_div {
  6.     position:relative;
  7.     width:242px;
  8.     margin:5px auto;
  9. }

The background image I'm using - whiteline.gif - can be seen at:
http://alternative-internet.com/webmast ... teline.gif

It's a simple 1 pixel high white strip the length of my div, with shadows added on the sides. Simple, eh?


Once again, there are other ways to do this. You could, as I mentioned before, using two divs on either side of your content div (or two cells on either side of your content cell, if you are using tables), and place the fades as backgrounds in them. This is somewhat more flexible, in a few ways, but on the other hand, it requires you to jump through a few hoops getting the divs/cells to stretch the full height of the page.
  • Bogey
  • Genius
  • Genius
  • Bogey
  • Posts: 8399
  • Loc: USA

Post 3+ Months Ago

Only one hoop the way I see it. height: 100%; Maybe I'm missing on something

Post Information

  • Total Posts in this topic: 8 posts
  • Users browsing this forum: No registered users and 75 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.