Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > How do they do it? (Rounded corners, that is.)

Reply
Thread Tools

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

 
 
Jeff Bowman
Guest
Posts: n/a
 
      05-08-2005
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.


 
Reply With Quote
 
 
 
 
GuyBrush Treepwood
Guest
Posts: n/a
 
      05-08-2005
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


 
Reply With Quote
 
 
 
 
Edwin van der Vaart
Guest
Posts: n/a
 
      05-08-2005
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/l...p_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
 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      05-08-2005
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.
 
Reply With Quote
 
Jeff Bowman
Guest
Posts: n/a
 
      05-08-2005

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


 
Reply With Quote
 
Jeff Bowman
Guest
Posts: n/a
 
      05-08-2005
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.


 
Reply With Quote
 
Jeff Bowman
Guest
Posts: n/a
 
      05-08-2005
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/l...p_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/...y_grn_ne.gif);
}

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

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

#ygrp-home .corner-bottom .corner-left {
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/...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>


 
Reply With Quote
 
n|ck
Guest
Posts: n/a
 
      05-09-2005
Jeff Bowman wrote:
> Can anyone spot it?


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/..._lbl_bl_ne.gif
 
Reply With Quote
 
Jeff Bowman
Guest
Posts: n/a
 
      05-09-2005
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/..._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/...y_grn_ne.gif);
}

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

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

#ygrp-home .corner-bottom .corner-left {
background-image:url(http://us.i1.yimg.com/us.yimg.com/i/...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>


 
Reply With Quote
 
n|ck
Guest
Posts: n/a
 
      05-09-2005
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/
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
MCSE exam # 70-216. They they show you the score?? Jack Black Microsoft Certification 1 12-09-2004 11:54 PM
Temporaries - when do they begin, when do they end? Asfand Yar Qazi C++ 4 11-12-2004 11:58 PM
When they're gone, they could be gone for good... Richard DVD Video 10 06-02-2004 07:13 AM
Is "They Shoot Horses, Don't They?" getting a re-release? Maverick DVD Video 1 10-25-2003 02:17 AM
they turn, they power, they make nice pics Keith and Jenn Z. Digital Photography 0 09-21-2003 04:16 AM



Advertisments