How do they do it? (Rounded corners, that is.)

Discussion in 'HTML' started by Jeff Bowman, May 8, 2005.

  1. Jeff Bowman

    Jeff Bowman Guest

    I guess I must still be pretty new to CSS--for the life of me I can't figure out
    how they managed get these corners to show as rounded:

    http://groups.yahoo.com/

    Can anyone spot it?

    Thanks.
     
    Jeff Bowman, May 8, 2005
    #1
    1. Advertising

  2. On Sun, 08 May 2005 11:59:06 -0800, Jeff Bowman wrote:

    > I guess I must still be pretty new to CSS--for the life of me I can't figure out
    > how they managed get these corners to show as rounded:
    >
    > http://groups.yahoo.com/
    >
    > Can anyone spot it?
    >
    > Thanks.


    http://www.w3.org/Style/Examples/007/roundshadow.html

    --
    "Don't worry about people stealing your ideas. If your ideas are any good,
    you'll have to ram them down people's throats."
    -- Howard Aiken
     
    GuyBrush Treepwood, May 8, 2005
    #2
    1. Advertising

  3. Jeff Bowman wrote:
    > I guess I must still be pretty new to CSS--for the life of me I can't figure out
    > how they managed get these corners to show as rounded:
    >
    > http://groups.yahoo.com/
    >
    > Can anyone spot it?

    They use a background image (width 3px, height 3px) for those corners.
    You can find the links in the style sheet.
    http://us.js1.yimg.com/us.yimg.com/lib/yg/css/ygrp_site_v07.css

    However there is a mozilla style sheet markup.
    Example: -moz-border-radius: 1em;
    I don't know if it works in Opera. But I'm sure it doesn't work in IE.
    --
    Edwin van der Vaart
    http://www.semi-conductor.nl/ Links to Semiconductors sites
    http://www.evandervaart.nl/ Under construction
     
    Edwin van der Vaart, May 8, 2005
    #3
  4. Jeff Bowman

    kchayka Guest

    Jeff Bowman wrote:
    > I guess I must still be pretty new to CSS


    Are you new to google, too? ;)

    > --for the life of me I can't figure out
    > how they managed get these corners to show as rounded:
    >
    > http://groups.yahoo.com/


    Hmmm... they look pretty square to me.

    Whatever... google for: CSS rounded corners

    I bet the first thing that comes up will tell you pretty much everything
    you need to know.

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, May 8, 2005
    #4
  5. Jeff Bowman

    Jeff Bowman Guest


    > Are you new to google, too? ;)


    No, not at all. I already tried that, but I didn't find any samples that were
    what I'm looking for. The Yahoo page is /exactly/ what I'm looking for, but I'm
    not figuring it out. I've tried copying what I think must be the relevant
    markup, but to no avail.

    If you understand the mechanics of how it works, would you mind taking a moment
    and explaining it? I'd be very grateful.

    Thanks.
     
    Jeff Bowman, May 8, 2005
    #5
  6. Jeff Bowman

    Jeff Bowman Guest

    GuyBrush Treepwood wrote:

    > http://www.w3.org/Style/Examples/007/roundshadow.html


    Thanks, but unfortunately the sample shown there doesn't work in IE, which is my
    largest audience. Even if it did, though, it's not the look I'm after.

    What I'm really after is to find out how the Yahoo page does it--it's the exact
    look I want, but due to my inexperience I can't decipher it. I've been throwing
    stuff at it for about an hour now, and I finally threw my hands up by coming
    here.

    Can you figure it out?

    Thanks.
     
    Jeff Bowman, May 8, 2005
    #6
  7. Jeff Bowman

    Jeff Bowman Guest

    Edwin van der Vaart wrote:

    > They use a background image (width 3px, height 3px) for those corners.
    > You can find the links in the style sheet.
    > http://us.js1.yimg.com/us.yimg.com/lib/yg/css/ygrp_site_v07.css


    Hm, I looked at that earlier but didn't spot it. Thanks.

    Even still, though, I'm not getting it. I'm really hung up on this one
    particular design, since it's the only one I've seen that fits exactly what I'm
    looking for. I'm including my markup below--could you have a look at it and
    maybe notice what I'm missing? (Note: I'll replace their image links with my
    own once I get it working.)

    If you have a moment and you can reproduce their effect in summary, maybe you
    could fire back a quick snippet to demonstrate?

    Thanks.


    p.s. What's the significance of the (properties?) being separated by a single
    space and no comma? I thought there was supposed to be a comma:

    #ygrp-home .corner-top .corner-left


    ----------------------------------------------------------------

    <html>
    <head>
    <title>Rounded Corners</title>
    <style>
    /* Container with Rounded Corner Border */
    .ygrp-container-border {
    border:1px solid #7b9ebd;
    width:auto;
    margin:0 0 5px 0;
    padding:0;
    }

    #ygrp-home .corner-top {
    background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_grn_ne.gif);
    }

    #ygrp-home .corner-top .corner-left {
    background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_grn_nw.gif);
    }

    #ygrp-home .corner-bottom {
    background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_grn_se.gif);
    }

    #ygrp-home .corner-bottom .corner-left {
    background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_grn_sw.gif);
    }
    </style>
    </head>
    <body>
    <div class="ygrp-container-border" id="ygrp-home">
    <span class="corner-top"><span class="corner-left"></span></span>
    Rounded Corners?
    <span class="corner-bottom"><span class="corner-left"></span></span>
    </div>
    </body>
    </html>
     
    Jeff Bowman, May 8, 2005
    #7
  8. Jeff Bowman

    n|ck Guest

    n|ck, May 9, 2005
    #8
  9. Jeff Bowman

    Jeff Bowman Guest

    n|ck wrote:

    > I'd say they use the same technique everyone else uses (nested divs) and
    > background graphics to achieve the rounded corner effect:
    > http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_lbl_bl_ne.gif


    That's just my point, though--what's the technique? I'm not able to reproduce
    it, no matter what I try.

    Here's what I've got so far, below. Are you able to see why it's not working and
    theirs is?

    Thanks.


    -------------------------------------------------------------------------------

    <html>
    <head>
    <title>Rounded Corners</title>
    <style>
    /* Container with Rounded Corner Border */
    .ygrp-container-border {
    border:1px solid #7b9ebd;
    width:auto;
    margin:0 0 5px 0;
    padding:0;
    }

    #ygrp-home .corner-top {
    background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_grn_ne.gif);
    }

    #ygrp-home .corner-top .corner-left {
    background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_grn_nw.gif);
    }

    #ygrp-home .corner-bottom {
    background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_grn_se.gif);
    }

    #ygrp-home .corner-bottom .corner-left {
    background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_grn_sw.gif);
    }
    </style>
    </head>
    <body>
    <div class="ygrp-container-border" id="ygrp-home">
    <span class="corner-top"><span class="corner-left"></span></span>
    Rounded Corners?
    <span class="corner-bottom"><span class="corner-left"></span></span>
    </div>
    </body>
    </html>
     
    Jeff Bowman, May 9, 2005
    #9
  10. Jeff Bowman

    n|ck Guest

    Jeff Bowman wrote:
    > Here's what I've got so far, below. Are you able to see why it's not working and
    > theirs is?


    Sorry, I don't have the time but have a look around at alistapart.com - I found
    this article but I don't think it's the same technique. I'll have another look
    tomorrow: http://www.alistapart.com/articles/customcorners/
     
    n|ck, May 9, 2005
    #10
  11. Jeff Bowman

    Toby Inkster Guest

    On Sun, 08 May 2005 23:21:59 +0100, Jeff Bowman
    <> wrote:

    > p.s. What's the significance of the (properties?) being separated by a
    > single
    > space and no comma? I thought there was supposed to be a comma:
    > #ygrp-home .corner-top .corner-left


    Comma and space mean two different things.

    A,B {color:red}

    will make all As and all Bs red.

    A B {color:red}

    will make Bs red, only if they're nested inside an A.

    <title>Example</title>
    <style type="text/css">
    A B {color:red}
    C,D {color:blue}
    </style>
    <a><b>I am red.</b></a>
    <b>I am not.</b>
    <b>Nor am I.</b>
    <b><a>Nor I.</a></b>
    <c>I am blue.</c>
    <d>I am too.</d>

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, May 9, 2005
    #11
  12. Jeff Bowman

    Jeff Bowman Guest

    Jeff Bowman, May 9, 2005
    #12
  13. Phil Thompson, May 9, 2005
    #13
  14. Jeff Bowman

    Andy Dingley Guest

    On Sun, 8 May 2005 11:59:06 -0800, "Jeff Bowman"
    <> wrote:

    >I guess I must still be pretty new to CSS--for the life of me I can't figure out
    >how they managed get these corners to show as rounded:
    >
    > http://groups.yahoo.com/


    In the code we see this:
    <span class="corner-bottom"><span class="corner-left"></span></span>

    In the CSS (I've not looked) there will be background-image rules to
    show a single corner image in each of these spans.


    Yahoo write some very nice code (sometimes). They're one of the "big
    four" (Google, eBay, Amazon, Yahoo) that have enormous budgets to get
    things right and must make their pages work across a very wide range of
    browsers. This often involves "clever" code that's downright ugly, but
    "works" provided you understand its intricacies. Old programmers will
    recognise the pattern and groan.

    OTOH, MSN hack any old crap together and call it a page.

    The nice thing with Yahoo's approach is that it's quite simple HTML,
    it's a lightweight addition to the page that doesn't complicate the
    structure of the rest of it (as many pure CSS-based round corner schemes
    do). The clever part is that it degrades particularly well (because of
    the use of <span> rather than <div>) in situations with bad CSS support.


    For some of the worst round corner schemes out there, try this
    http://csszengarden.com/?cssfile=/157/157.css&page=0

    Now that's an unfair criticism to some extent. The HTML page for the zen
    garden is (by definition) unchangeable and it just doesn't have the
    hooks to allow neat corner-rounding. However this is not a good page
    (it's too rigid in sizing) and it's not an example that should ever be
    copied.


    For a really bad page, try some old HP (Hewlett Packard, who used to
    make printers) pages from 2000-2002, where they had a particular
    obsession for 3x3 tables and rounded cornering. Pure HTML and stinking
    CSS.


    --
    Cats have nine lives, which is why they rarely post to Usenet.
     
    Andy Dingley, May 9, 2005
    #14
  15. On Mon, 09 May 2005 12:49:18 +0100, Andy Dingley wrote:

    > On Sun, 8 May 2005 11:59:06 -0800, "Jeff Bowman"
    > <> wrote:
    >
    >
    > For some of the worst round corner schemes out there, try this
    > http://csszengarden.com/?cssfile=/157/157.css&page=0
    >


    What exactly is wrong with this scheme? He just puts an image as
    background of h3. Maybe not very 'correct' but I think this page shows the
    power of css. Without changing the html, obtaining a complete new layout.

    --
    "Don't worry about people stealing your ideas. If your ideas are any good,
    you'll have to ram them down people's throats."
    -- Howard Aiken
     
    GuyBrush Treepwood, May 9, 2005
    #15
  16. Jeff Bowman

    Dirk Malorny Guest

    Jeff Bowman schrieb:
    > I guess I must still be pretty new to CSS--for the life of me I can't figure out
    > how they managed get these corners to show as rounded:
    >
    > http://groups.yahoo.com/
    >
    > Can anyone spot it?


    only for mozilla browsers, but another good solution:
    look at the css of the site http://erweiterungen.de/

    Dirk
     
    Dirk Malorny, May 9, 2005
    #16
  17. Jeff Bowman

    Jeff Bowman Guest

    Toby Inkster wrote:

    > Comma and space mean two different things.


    Ah, got it.

    Thanks Toby :)
     
    Jeff Bowman, May 9, 2005
    #17
  18. Jeff Bowman

    Andy Dingley Guest

    On Mon, 09 May 2005 14:43:43 +0200, GuyBrush Treepwood
    <> wrote:

    >What exactly is wrong with this scheme?


    As a solution _within the constraints of CSSZenGarden_ it's a good one.

    >He just puts an image as background of h3.


    He generates the round corners as images. Not only does he generate the
    corner alone (which can't be done on CSS Zen Garden) but he does it as a
    stripe with both left and right corners. This forces the column to be a
    fixed width in pixels, which is a bad thing for supporting different
    sizes and resolutions for fluid design.
     
    Andy Dingley, May 9, 2005
    #18
  19. Jeff Bowman

    Jeff Bowman Guest

    Jeff Bowman wrote:

    >> http://www.alistapart.com/articles/customcorners/

    >
    > Well, now that looks like something I can do something with...


    Oops, it turns out this one won't work for me. Here's why:

    http://www.alistapart.com/d/customcorners/step1.1.html

    See the Bottom Left section? This means I'll have to slice a special image for
    each rounded-corner DIV I want on the site.

    What I'm really after is to know how they did it on Yahoo. Given the markup
    below, are you able to see why theirs is working and mine isn't?

    http://groups.yahoo.com/

    Thanks.


    -------------------------------------------------------------------------------

    <html>
    <head>
    <title>Rounded Corners</title>
    <style>
    /* Container with Rounded Corner Border */
    .ygrp-container-border {
    border:1px solid #7b9ebd;
    width:auto;
    margin:0 0 5px 0;
    padding:0;
    }

    #ygrp-home .corner-top {
    background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_grn_ne.gif);
    }

    #ygrp-home .corner-top .corner-left {
    background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_grn_nw.gif);
    }

    #ygrp-home .corner-bottom {
    background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_grn_se.gif);
    }

    #ygrp-home .corner-bottom .corner-left {
    background-image:url(http://us.i1.yimg.com/us.yimg.com/i/yg/img/ui/cr_y_grn_sw.gif);
    }
    </style>
    </head>
    <body>
    <div class="ygrp-container-border" id="ygrp-home">
    <span class="corner-top"><span class="corner-left"></span></span>
    Rounded Corners?
    <span class="corner-bottom"><span class="corner-left"></span></span>
    </div>
    </body>
    </html>
     
    Jeff Bowman, May 9, 2005
    #19
  20. Jeff Bowman

    Jeff Bowman Guest

    Phil Thompson wrote:

    > I don't how they do it but you can do it with javascript:
    > http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html


    Hi Phil, thanks for the link--I'll add it to my Tips & Tricks collection.

    A relatively high percentage of my users, however, will have disabled javascript
    in their browsers, so I won't be able to use it for this round.

    Thanks though!
     
    Jeff Bowman, May 9, 2005
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Konrad

    rounded corners in data grid

    Konrad, Aug 30, 2003, in forum: ASP .Net
    Replies:
    2
    Views:
    833
    Ken Schaefer
    Aug 30, 2003
  2. Francisco J. Jurado

    Rounded corners in menu Table and Bottons

    Francisco J. Jurado, May 31, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    606
    John Timney \(Microsoft MVP\)
    May 31, 2004
  3. kurt sune

    Rounded corners on panel/div etc

    kurt sune, Oct 12, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    6,007
  4. Mark Rae

    Rounded corners

    Mark Rae, Jan 20, 2006, in forum: ASP .Net
    Replies:
    7
    Views:
    2,641
    mkrawats
    Sep 24, 2009
  5. Alan
    Replies:
    4
    Views:
    524
    Whitecrest
    Nov 10, 2003
Loading...

Share This Page