Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Member goldfish's Avatar
    Join Date
    Aug 2005
    Posts
    35
    Member #
    11023
    Hi there,

    Just wondering if anyone has seen any examples of people using rounded corners (through images, javascript, whatever) on elements where there is an image as the background.

    I know how to do this using images or with the "nifty corners" javascript method, but I've yet to see a decent example where the element is sitting on top of an image. (actually, I just made one - it's tolerable)

    I don't care too much about the element itself changing colour. That's not a problem. But using mountaintop corners works - with the masking method (since the background is dynamic) it doesn't, but using the filling method it does - BUT the corners are nasty looking and are not antialiased.

    That is probably the big problem - antialiasing. I could probably get away with it using a PNG - however IE6 would throw a fit. I'd have to write a Javascript or something which would only apply the PNG corners if the browser supported PNG alpha blending correctly.

    Anyone encountered this before?
    Goldfish
    Blueshadow Multimedia

  2.  

  3. #2
    Junior Member CanadaWebDesign's Avatar
    Join Date
    Mar 2006
    Posts
    23
    Member #
    12738
    something like this would work :
    <style type="text/css">
    .spiffy{ display:block
    }
    .spiffy *{ display:block;
    height:1px;
    overflow:hidden;
    background:#0a67e6
    }
    .spiffy1{ border-right:1px solid #95bdf4;
    padding-right:1px;
    margin-right:3px;
    border-left:1px solid #95bdf4;
    padding-left:1px;
    margin-left:3px;
    background:#478dec;
    }
    .spiffy2{ border-right:1px solid #e6effc;
    border-left:1px solid #e6effc;
    padding:0px 1px;
    background:#3883ea;
    margin:0px 1px;
    }
    .spiffy3{ border-right:1px solid #3883ea;
    border-left:1px solid #3883ea;
    margin:0px 1px;
    }
    .spiffy4{ border-right:1px solid #95bdf4;
    border-left:1px solid #95bdf4;
    }
    .spiffy5{ border-right:1px solid #478dec;
    border-left:1px solid #478dec;
    }
    .spiffy_content{ padding:0px 5px;
    background:#0a67e6;
    }
    </style>
    <div> <b class="spiffy"> <b class="spiffy1"><b></b></b>
    <b class="spiffy2"><b></b></b>
    <b class="spiffy3"></b>
    <b class="spiffy4"></b>
    <b class="spiffy5"></b>
    </b> <div class="spiffy_content">
    <!-- Your Content Goes Here -->
    </div>
    <b class="spiffy"> <b class="spiffy5"></b>
    <b class="spiffy4"></b>
    <b class="spiffy3"></b>
    <b class="spiffy2"><b></b></b>
    <b class="spiffy1"><b></b></b>
    </b>
    </div>


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:26 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com