SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: Rounded corners

  1. #1
    SitePoint Guru
    Join Date
    Jan 2005
    Location
    USA
    Posts
    633
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rounded corners

    Hi

    Apart from Nifty corners are there any other tutorials on rounded corners
    I need to have 4 nested rounded corners and I cannot get nifty corners to
    work

    Thanks
    DD

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    and we see you back in a few weeks time
    lol

    If you don't mind using javascript then theres an unobtrusive method here that's quite useful.

    http://www.curvycorners.net/

    And don't forget sitepoints own rounded corner tool:

    http://tools.sitepoint.com/spanky/

  3. #3
    SitePoint Guru
    Join Date
    Jan 2005
    Location
    USA
    Posts
    633
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    lol

    If you don't mind using javascript then theres an unobtrusive method here that's quite useful.

    http://www.curvycorners.net/

    And don't forget sitepoints own rounded corner tool:

    http://tools.sitepoint.com/spanky/
    Hi Paul

    IF I use the sitepoint tool and I have lets say 6 rounded boxes in by page, will that result in alot of CSS, what do you think.

    Thanks
    DD

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    The sitepoint method reduces the mark-up that you need as long as you can follow the structure laid out and is one of the best ways to accomplish this without using too many extra divs.

    Rounded corners are always heavy in mark-up (even if you use tables) as you always need four hooks to hang the corners on. The sitepoint method utilises existing elements thus reducing the mark-up.

    The javascript method I linked to is also a good option that degrades nicely and needs no extra mark up at all. This is its main benefit as the html doesn't need to be altered at all and you just need to set the correct id or classes to target etc. Those without javascript enabled just get the original square boxes.

    Just try them both and experiment. hey'll probably take a little time to get right but then you can jusdge for yourself

  5. #5
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first time I used rounded corners, I followed Søren Madsen’s article at A List Apart, http://www.alistapart.com/articles/customcorners/.

    Part 2:
    http://www.alistapart.com/articles/customcorners2/

  6. #6
    SitePoint Enthusiast simonpointer's Avatar
    Join Date
    Jun 2006
    Location
    Guildford UK
    Posts
    85
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My site uses a multi stretch rounded 4 corner design.

    Have a look if it helps:

    http://www.simonpointer.com

  7. #7
    Sesame Street Iimitk's Avatar
    Join Date
    Feb 2006
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    The javascript method I linked to is also a good option that degrades nicely and needs no extra mark up at all. This is its main benefit as the html doesn't need to be altered at all and you just need to set the correct id or classes to target etc. Those without javascript enabled just get the original square boxes.
    Paul, do you think the CurvyCorners approach is better than Nifty Corners Cube's regarding JavaScript implementation? The thread starter was actually pointing to the latter method, & your answer implies that you prefer CurvyCorners though I can't tell if you had releazed it.

    Also, generally, do you advice to stick with pure CSS/HTML markup usage with rounded corners or JavaScript is O.K.?

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    & your answer implies that you prefer CurvyCorners though I can't tell if you had releazed it
    The nifty cornes approach looks pretty good but i've never tried them whereas I had implemented the curvy corners quite easily. Javascript isn't my thing really so I can't comment on the best code. I don't think theres much to choose between either really although I haven't looked in depth at them.

    I think the javascript solution for the corners is a good approach as it means that the html can be kept clean and it matters little if javascript is disabled because the full content is available and still reasonably presented.

    However with the javascript solutions offered you are usually stuck to the format that they have programmed and sometimes you may want to do something a bit differently and may not be able to unless you are good at js etc.

    If you are clever then you can reduce the amount of code that css corners need such as the sitepoint spanky corners and use existing elements to use as hooks for the corners. This means that the code isn't so cluttered with nested divs but you have to be organised.

    The only problem I have found with the Javascript corners is that they are a little slow to appear sometimes.

  9. #9
    Sesame Street Iimitk's Avatar
    Join Date
    Feb 2006
    Posts
    662
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    If you are clever then you can reduce the amount of code that css corners need such as the sitepoint spanky corners and use existing elements to use as hooks for the corners. This means that the code isn't so cluttered with nested divs but you have to be organised.
    Interesting, however I'm still a beginner in (X)HTML/CSS. Do you have something in hand?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    [quote]
    Do you have something in hand?
    [quote]

    have a look at the sitepoint spank corners as this explains it in detail.

    http://tools.sitepoint.com/spanky/

    There is even a generator to help you


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
  •