Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > rounded corners without images

Reply
Thread Tools

rounded corners without images

 
 
aaron.reese@tiscali.co.uk
Guest
Posts: n/a
 
      07-09-2006
Guys,

I am trying to add rounded corners to my CSS containers (some of which
are still tables - BOO!!!!)

I dont want to use images becuase I need to update the both the
foreground and background colours on a regular basis and as you know,
only one colour of a gif can be transparent so either the foreground or
background colour will be wrong...

I am using php as a server side scripting language and was thinking of
using <HR> in a loop and using Sine and Cosine calculations to
determine the length of the <HR>.

E.g.

I have a table 100 px wide and want a curve with a radius of 10 on each
corner. This means that the first <HR> needs to be the same width as
the table (100px) and the 20th <HR> needs to be 120px (10px overlap on
each end). The length of the intermeidate <HR>s is determined using
algebra based on how far round the curve you are.

The problem is that <HR> seems to leave white space around the element
even when you set border, padding and margin to be zero. Does anyone
have any ideas??

Obiron

 
Reply With Quote
 
 
 
 
Edwin van der Vaart
Guest
Posts: n/a
 
      07-09-2006
http://www.velocityreviews.com/forums/(E-Mail Removed) wrote:
> Guys,
>
> I am trying to add rounded corners to my CSS containers (some of which
> are still tables - BOO!!!!)

Rounded corners in CSS works only in Netscape and Mozilla, perhaps also
in Opera. With the following example:
-moz-border-radius: 1em;
--
Edwin van der Vaart
http://www.semi-conductor.nl/ Links to Semiconductors sites
http://www.evandervaart.nl/ Edwin's persoonlijke web site
Explicitly no permission given to Forum4Designers, onlinemarketingtoday,
24help.info, issociate.de, velocityreviews, umailcampaign.com,
gthelp.com, webfrustration.com, excip.com and many other to duplicate
this post.
 
Reply With Quote
 
 
 
 
Toby Inkster
Guest
Posts: n/a
 
      07-09-2006
aaron.reese wrote:

> I dont want to use images


The CSS(3) way is "border-radius", but I don't think any browsers fully
support it yet; Mozilla has an experimental implementation, but you need
to use "-moz-border-radius".

There is an HTC hack for Internet Explorer. It's not standards-compliant
of course, but as long as you include the standards-compliant equivalent,
it shouldn't do too much harm.

http://www.akatsukinishisu.net/itazu..._behavior.html

That page should show you everything you need to know. It's in Japanese,
but the code samples should be usable, and you should be able to download
"round.htc" for the IE-stuff.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
aaron.reese@tiscali.co.uk
Guest
Posts: n/a
 
      07-09-2006
Edwin van der Vaart wrote:

"Rounded corners in CSS works only in Netscape and Mozilla, perhaps
also
in Opera"


Yes, I know and I want this to be browser independant because
unfortunatley most people still use IE.

I want to write straight HTML, proably without CSS that looks like this

<HR width = 100>
<HR width = 104>
<HR width = 107>
<HR width = 110>
<HR width = 112>
<HR width = 113>
<HR width = 114>

so that the edge looks like this (HRs centered); each dash representing
a pixel

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


So that the end is curved.

The problem is that I can't get two HRs to sit next to each other
without any white space.

I am prepared to use any in-line tag such as tables or divs but I think
HRs would be easier if I can get them to work.

Tables would require creating a table 120 cells wide and then using
colspan on each row which is produces messy code; and again I am
struggling to eliminate white space between cells and rows.

Obiron

 
Reply With Quote
 
aaron.reese@tiscali.co.uk
Guest
Posts: n/a
 
      07-09-2006
OK, Got it.

I've not seen it done anywhere and this is a bit of a rough
implementation:-

You need to get your server side script to generate code that looks
like the following:-

<div
style='font-size:20px;overflow:hidden;height:1px;width:100px;b order:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:2px;width:105px;b order:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:2px;width:109px;b order:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:2px;width:112px;b order:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:3px;width:114px;b order:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:4px;width:115px;b order:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:3px;width:115px;b order:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:2px;width:114px;b order:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:2px;width:112px;b order:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:2px;width:109px;b order:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:2px;width:105px;b order:solid
0px;background-color: #00ffff'>text</div>
<div
style='font-size:20px;overflow:hidden;height:1px;width:100px;b order:solid
0px;background-color: #00ffff'>text</div>


Note that on the height and length change on some of the divs. This
example gives a rounded end to the colour block (a bit blocky but that
should be possible to fix with some neat anti-alais code to fade the
foreground to the background)

The size and position would need to be generated from some calcuations.

I've not seen this solution mentioned anywhere else. What is the
problem with it in other browsers? (i use a Slimbrowser, built on IE so
have not tried it in Mox, Fox, Opera etc.)

Obiron

 
Reply With Quote
 
Martin Jay
Guest
Posts: n/a
 
      07-09-2006
In message <(E-Mail Removed) .com>,
(E-Mail Removed) writes

>I am trying to add rounded corners to my CSS containers (some of which
>are still tables - BOO!!!!)
>
>I dont want to use images becuase I need to update the both the
>foreground and background colours on a regular basis and as you know,
>only one colour of a gif can be transparent so either the foreground or
>background colour will be wrong...


"Nifty Corners" provides rounded corners without using any images. I
haven't explored the disadvantages of using this method, though. See:
<http://www.html.it/articoli/nifty/index.html>

>I am using php as a server side scripting language and was thinking of
>using <HR> in a loop and using Sine and Cosine calculations to
>determine the length of the <HR>.


Well, if you're using server side scripting you could make the rounded
corners on he hoof. One way is to create a large circle and reduce it
to the desired size - this will give you nice anti-aliasing. Then chop
the circle into quarters and you have your corners.
--
Martin Jay
Phone/SMS: +44 7740 191877
Fax: +44 870 915 2124
 
Reply With Quote
 
Toby Inkster
Guest
Posts: n/a
 
      07-10-2006
aaron.reese wrote:

> You need to get your server side script to generate code that looks
> like the following:-
> [snip]


This is a really horrible idea.

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

 
Reply With Quote
 
aaron.reese@tiscali.co.uk
Guest
Posts: n/a
 
      07-10-2006

Toby Inkster wrote:

> This is a really horrible idea.



Why?, It seems to me to be quite an elegant solution.

It works without images so is not color dependant, is scalable, can be
contained inside another container div to precisely place it on the
page, does not require javascript which some users turn off, and as it
only uses CSS2 tags it should be browser independant. I agree that
writing in-line style sheets is not great, but you could farm quite a
lot of the setting to a REL style sheet and simply override the width
element in-line

I am going to write a PHP function and post it here (and cross post on
PHP boards - I know... but I need the feedback from them and they won't
see it here)

It will take the following arguments:-

divwidth - The width of the element to be contained
xradius - the length of the radius on the X- axis
yradius - the length of the radius on the Y-axis
fgcolor - the colour of the border
bgcolor - the colour of the background

I will then do the following:-

work out the difference between xradius and yradius and divide by
yradius to give me the radius-step.

then loop for yradius to 1

using pythagous theorem, I will calculate the length of the line to
fill the radius on the x axis.

X^2 * Y^2 = Z^2

I know Y becuase it is the loop counter, decreasing one pixel for each
line.

I know Z because it is yaxis + ((yaxis - loopcounter) * radius-step)

so I can calculate X. I have not worked out the anti-alaising yet.

end loop

I will then add 2 * the loop result to the divwidth and create a div
of this width

I suspect it will look dodgy with radius curves of less than 20px but
we will give it a go. I will post the whole function when it is
finnished.


If you wanted to try to keep layout separate from content, the
parameters for the function could always be included in an include file
which would allow you to set up different 'classes' of rounded corners


obiron

 
Reply With Quote
 
Rik
Guest
Posts: n/a
 
      07-10-2006
(E-Mail Removed) wrote:
> If you wanted to try to keep layout separate from content....


Yes indeed.
What are al those <hr>'s doing? They have nothing to do with the content.
That's the bit people fall over. <hr> is already highly dubious when talking
about semantic meaning, and now you're flooding your HTML with it...

Grtz,
--
Rik Wasmus


 
Reply With Quote
 
Travis Newbury
Guest
Posts: n/a
 
      07-10-2006
(E-Mail Removed) wrote:
> Yes, I know and I want this to be browser independant because
> unfortunatley most people still use IE.


Why dos it have to be unfortuanatally?

 
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
Rounded corners Mark Rae ASP .Net 7 09-24-2009 07:48 PM
Rounded corners on panel/div etc kurt sune ASP .Net 1 10-12-2005 08:52 AM
Rounded corners in menu Table and Bottons Francisco J. Jurado ASP .Net 3 05-31-2004 09:36 PM
Advice required to create rounded corners Alan HTML 4 11-10-2003 10:51 AM
rounded corners in data grid Konrad ASP .Net 2 08-30-2003 02:45 PM



Advertisments