SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded corner/Drop-shadow with .PNG, How to?

    Hello,

    Quick Q:

    How would I go about getting this effect (drop-shadow/rounded corners around the main container div - here are a couple examples):

    http://urlgreyhot.com/personal/

    http://www.fiftyfoureleven.com/sandbox/weblog/

    I am aware of the tutorials found on ALA site... but those tuts do not use .png's to achieve the drop-shadow/rounded-corner effect.

    Can someone point me to a nice tutorial?

    I have tried viewing the CSS of above sites, but I have found it a bit confusing, and I would prefer a simplified version of the code.

    Anyone feel like sharing techniques?

    Thanks in advance!
    Cheers
    M

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well the biggest collection of examples of rounded corneres can probably be found here:

    http://css-discuss.incutio.com/?page=RoundedCorners

    You should find something there to suit. There are various ways of achieving the effect.

    The second example you posted above uses a simple effect for a fixed with layout by using three background images.

    The top image (used ina a header):
    http://www.fiftyfoureleven.com/i/nsite/back.png

    The bottom image (used in a footer):
    http://www.fiftyfoureleven.com//i/nsite/foot.png

    and a repeating background image non the body to obtain full height at all times:
    http://www.fiftyfoureleven.com/i/nsite/wrap.png

    Then its just a matter of positioning and placing elements to complete the effect.

    You mention you want to use pngs and not gifs/jpgs etc. If the resaon for the png is to use opacity for the shadows so that the underneath background stills shows through then things get even more complicated because ie doesn't understand opacity and you have to use proprietary filters.

    http://www.pmob.co.uk/temp/opacity.htm

    You will see that it gets very complicated as mozilla and ie have to use different things to achieve the same result. Therefore its best to avoid this technique especially where you are going to have lots of nestings.

    Paul

  3. #3
    .* draziW tnioPetiS *. bronze trophy
    Join Date
    Jun 2004
    Location
    "Then I figure the most good good guy will win."
    Posts
    1,666
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, thanks for all the great information Paul, I really appreciate you taking the time to give a newb like me some advice/linkage.

    Thanks for showing me how they put together that layout, it really clears-up the "How did they do that?" questions I had....

    Now that you mention it, I will avoid the .png usage... Gosh, I can't wait for some consistancy with browser/platforms... how long will it be for that to happen? 5 years? 10 maybe?

    Anyway, thanks for info Paul! You rock! It is really nice to obtain advice from the pros!

    Cheers
    Micky

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,475
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Thanks Mickys - glad to help

    Yes its a shame that we not only have to learn CSS once we also have to learn it again and again for every browser variation.

    Paul


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •