SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    inverse rounded corners

    Hi guys,
    I was wondering if someone was willing to help me with a CSS problem I am having. I am trying to create inverse rounded corners for a design.

    I need be I can post an image of the design, but would rather not if I can help it right now.

    So far I can only think of doing it with the old <div> and <img> system which is rather shoddy. Other way is to use background image within the <div>s but apprently IE doesnt like this, and neither does Opera -

    I know how to make rounded edges, but cant seem to flip one corner to round inwards.

    Any help or suggestions would be appreciated

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, the background images on <div>'s should work just fine . Post a link to the problem site where the background images isn't working and we will tell you where you went wrong .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

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

    I'm not really sure what you mean by inverse round corners so a drawing would help

    It sounds as though a normal round corner layout would still do the trick (as Ryan mentioned) albeit with revised images.

  4. #4
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    its a Wordpress theme (custom) but still in the stages of making a static html/css file(s) so nothing is online yet.....

    Design is @ flickr.com/ photos/nathanbarlow/4340916677/sizes/m/ (take out spaceS)


    I have used css to set borders to 2px and then put in a background image just for the odd corner. Problems lay with positioning and also backgroundcolor. Positioning in the right place means that part of thee image is hidden (because have to use negative height placement to get pixels in right place) by the border. Similarly, if you put bgcolor (in css) to white, it covers the background.

    For the header div, I ended up using a whole image for the thing, but cant do that for thisdiv, as it is a variable height div.

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

    I can see the rotoract page and they just look like normal round corners with shadows to me. the only inverse corners are where the round rotoract club image is placed and that will create the inverse corners anyway as it will sit on top of the other two divs.

    Unless I'm missing something important (I usually do) it just looks like your basic shadowed round box of which there are many variations about.

    If you are doing transparent round corners then you need to pull the corners outside of the background which can be a little awkward.

    You may need to explain in a bit more detail if I've missed the point entirely

  6. #6
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the Rotaract logo is a seperate DIV - there is a gap between the borders of info panels and this logo, and this gap means that I cant just lay the logo over it, - i kinda want the DIVs with borders to float around and wrap around the logo with like a 10 px gap or so. Shadows arent too much of an issue, but prefer to have them.

    I really dont want to end up with multiple images and doing a table-like. Prefer to do it CSS way, as then I can set several stylesheets for different purposes (need to be able to degrade it for accessability for blind etc users)

    AS you might have guessed, I did the design in photoshop, and now EVERYONE in the club likes the design and I cant port it to code without breaking it haha

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by nathanbarlow View Post
    the Rotaract logo is a seperate DIV - there is a gap between the borders of info panels and this logo, and this gap means that I cant just lay the logo over it,
    Why not? That's exactly how I would do it.

    I would just lay the rotoract image on top of those two columns and include the space that's needed around them all in one image. All elements are rectangular in css and whether you create the cut out on the columns or on the round image itself it makes no difference. Except that of you do it on the round image you only need one image. If you do it on the columns you need three images.

    I would cut it as one solid non transparent image with background included. It is always the same distance from the top so the gradient on the body background will alwyas match as long as you place it correctly.

    I really dont want to end up with multiple images and doing a table-like. Prefer to do it CSS way, as then I can set several stylesheets for different purposes (need to be able to degrade it for accessability for blind etc users)
    Whether you use tables or css makes no difference to the number of images that you use as you still need images for each corner and hooks to hang them on. Of course tables shouldn't be used for this but the number of images is irrelevant.

    To make it easy I would simply top and tail the columns, assuming the columns are fixed widths, and paste the two top corners in one go and the same for the bottom. All images could be contained in one sprite to cut down loading time.

    AS you might have guessed, I did the design in photoshop, and now EVERYONE in the club likes the design and I cant port it to code without breaking it haha
    I think it's quite straight forward if you plan it carefully and there are plenty of round corner tutorials about as I linked to above.

    You may just have to bite the bullet and puts something temporary up that we can help you with. (I have to rush off now but I'm sure someone else can chip in and help.)

  8. #8
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SO far:

    I have managed to get the corners orientated how I need them, but the problem is that I am using CSS to round the other three corners of the div, but cant turn off the css for the corner which has the image.....

    Also need to limit the length of the border, so it doesnt 'draw' over the png's for the corners.

    Finally background color of the div needs to be behind the corner pngs, and also not cover outside the curved line of the images. I cant make the pngs have the brown background colour because we want to beable to change the page background color and also the Div background color (for dyslexics and color blind people etc)

    Any help much appreciated

    It is online, (cant post link grrr) at nathanbarlow dot vacau dot com

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

    You seem to be making progress ok

    If you want to be able to change the background then you can't use the method I mentioned as you point out above.

    I don't think you will have any other choice but to make the top part of those column corners as transparent images so that the section under the rotoract logo is transparent.

    This means not placing a border on the top of the columns but using an image for the top left corner, and also the border, and also the section around the circle (and vices versa for the right top column).

    It would be impossible to rub the border out for the reason you mentioned in that you want the body background to show in the gaps which means you can't put a solid image on top.

    Therefore your only choice is to use transparent images for the whole section so that you can overlay it correctly.

    I don't see any other sensible way to accomplish it.

  10. #10
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    why not place the image in main div and use negative margins to push it up and over the existing divs and images? Then you make the required APPARENT inverse rounded corners and any shadow effect part of the rotoract club image itself.
    No separate div is required that way.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    why not place the image in main div and use negative margins to push it up and over the existing divs and images?
    For the same reason that my idea was rejected because the space around the round image is transparent and showing the background of the body It can't be used to rub anything out because the body background is to change on other pages.

  12. #12
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    okay

    Update with the suggestion made by Paul O'B -

    i have just made the two white curves part of the logo, and for now have left the image background that brown color. Link is http://nathanbarlow.vacau.com/trial_...e/website.html

    It all works well enough, but I was thinking the following:

    If I edit the image so the background is transparent (ie no brown in the image) and then either
    add another same sized, same position DIV behind the logo and set the z-indexes correctly
    or
    set the background-color of the original DIV to the brown color

    Would I then be able to use the idea for colour changing the background - by changing both the body colour and the relevent div colour?

    Hope you get my drift, and as always advice is welcomed and appreciated
    Nathan

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I get redirected here
    http://www.000webhost.com/admin-review

    You see this page, because the system administrator of 000webhost.com is currently checking this website for malicious content. This redirect will be removed once we will finish manually checking all files on this account. As far we check over 100 websites, it can take about 2-4 hours to complete. If you are the owner of this website, you will get email confirmation once it's done. If you are a visitor - please come back later.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  14. #14
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *****in. meh. Seems like free = slow turn around. Hopefully it'll be accessable in a while.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Would I then be able to use the idea for colour changing the background - by changing both the body colour and the relevent div colour?

    Hope you get my drift, and as always advice is welcomed and appreciated
    Nathan
    I did think of that earlier but thought it too difficult to explain

    If the only transparent part of the round image is the small gap around it then applying a background color to the div underneath that matches the body background colour should work. If you are using a gradient for the body background then you could apply that image also but would need to offset the vertical background position to match.

    It sounds as though it should work

  16. #16
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    would I need to have a second DIV underneath the DIv with the image, or can I just use the background-color setting for the DIV with image?

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,275
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Yes I think you can just add the background to the #rotaractlogo div ok. As far as I can tell that should work. Sometimes you just have to try it and see


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
  •