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

E

Edwin van der Vaart

Jeff said:
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.
 
K

kchayka

Jeff said:
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.
 
J

Jeff Bowman

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.
 
J

Jeff Bowman

GuyBrush said:

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.
 
J

Jeff Bowman

Edwin said:
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>
 
J

Jeff Bowman

n|ck said:
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>
 
T

Toby Inkster

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>
 
A

Andy Dingley

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.
 
A

Andy Dingley

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.
 
J

Jeff Bowman

Jeff said:
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>
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top