SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot HardDriver's Avatar
    Join Date
    Feb 2004
    Location
    Kentucky, USA
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scalable Gradients - are they possible?

    I've been racking my brain for days now, and I just don't think this is possible. I've got a plain inline, horizontal list, and I want the "current" tab (the one that's active, or highlited) to have an inner shadow so that it looks "sunken" compared to the others, and "even" with the rest of the page below it. This requires three different gradients - one for left, right, and top, and each corner has to be different. In other words, the side shadows have to line up with the shadow running along the bottom of the other tabs, and the top shadow has to meet up with the sides in an appropriate corner transition. I've included an image of my creation in Fireworks in the attachment below.

    None of this is a problem if you're dealing with fixed dimensions, but I want these tabs to be scalable depending on font size, so the tabs scale appropriately as font size increases. Is this possible with drop shadows? Or would it be more trouble (and code) than it's worth, and I should just stick to a set size?
    Attached Images Attached Images

  2. #2
    SitePoint Member
    Join Date
    Aug 2005
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello well are you useing them as background images? You and just do background-repeat: repeat-x; or background-repeat: repeat-y; to make them scaleable, then use ems as your defineng size (obviously), other than that, I don't know what you are looking for.
    www.jpschroeder.com

  3. #3
    SitePoint Zealot iCreate's Avatar
    Join Date
    May 2005
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could set the horizontal shadow to be the background image of the sell, and as man4mac said, use the repeat properties but if you wanted it so it scaled vertically as well, then you would need to chop it up into a couple more images (one for either side) and set those as background images also, and again, use the repeat property. Its not a challenging task and won't take long for you to do.

  4. #4
    SitePoint Zealot HardDriver's Avatar
    Join Date
    Feb 2004
    Location
    Kentucky, USA
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, no, it's not that simple. First of all, yes I'm using three different image backgrounds, but you can't repeat them because of each of the four corners must be different. The gradients must "meet" and fit together to look realistic, and you have to choose whether you want to include this corner in the top or side gradients. And of course, as soon as you do that, that image background's height or width is set and it cannot be repeated.

  5. #5
    SitePoint Addict psychedelic's Avatar
    Join Date
    Feb 2002
    Location
    Boston
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's possible.

    Check this out for your gradient issue:
    http://www.alistapart.com/articles/slidingdoors/

    It'll be tricky setting it up just for that one item, but doable.
    The Internet is prettier on a Mac.

  6. #6
    Ding Fries are Done! inter4design's Avatar
    Join Date
    Mar 2003
    Location
    usa
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why not just set the background to transparent when it is active and just have the shadows from the normal state show ontop?
    DoesItMatter
    - anyone seen my underwear?

  7. #7
    SitePoint Addict psychedelic's Avatar
    Join Date
    Feb 2002
    Location
    Boston
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by inter4design
    why not just set the background to transparent when it is active and just have the shadows from the normal state show ontop?

    The buttons are scalable, that is their width depends on their content, so a generic shadows image won't do.
    The Internet is prettier on a Mac.

  8. #8
    SitePoint Zealot HardDriver's Avatar
    Join Date
    Feb 2004
    Location
    Kentucky, USA
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the help, everyone. Unfortunately, none of the suggestions here are able to fix my problem. However, I found a new style for my navigational elements and have given up looking for a solution to this puzzle.

  9. #9
    SitePoint Addict psychedelic's Avatar
    Join Date
    Feb 2002
    Location
    Boston
    Posts
    284
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by HardDriver
    Thanks for all the help, everyone. Unfortunately, none of the suggestions here are able to fix my problem. However, I found a new style for my navigational elements and have given up looking for a solution to this puzzle.
    The link I gave you shows you how to do it. It's just slightly trickier CSS. I have a scalable gradient page design here: http://www.learntoquestion.com/resources/database/
    The Internet is prettier on a Mac.


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
  •