[OT] How do guys create round corner boxes? Which Graphic to

Rails
1

Hello,
Yes, I know it’s off-topic and nuby question, but I really don’t know
anything about graphic, I’m all a coder who lives in his text editor, so
sorry at first!

I need to create round corner box for my web app, I know how to form a
box
using CSS, I just dunno how to create those rounded corners.
Is there an easy to use tool for creating them, out there?

Thank you all in advance,

  • Dunnil
2

Hi,
The easiest and cleanest way to do this involves using some javascript.

http://www.encytemedia.com/blog/articles/2005/12/01/rico-rounded-corners-without-all-of-rico
or
http://www.html.it/articoli/niftycube/index.html

Cheers,
Eric G.

Human D. wrote:

  • Dunnil

Rails mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails

–
Eric G.
http://www.ericgoodwin.com

3

If you want antialiased rounded corners with and radius and border of
your
choice and don’t mind 50 KB for that, then take a look at
http://curvycorners.net, you won’t believe it before you have seen it
with
your own eyes !

4

On 5/9/06, Human D. [email protected] wrote:

I need to create round corner box for my web app, I know how to form a box
using CSS, I just dunno how to create those rounded corners.
Is there an easy to use tool for creating them, out there?

I have had good luck using NiftyCube (
Nifty Corners Cube - freedom to round).

5

using CSS, I just dunno how to create those rounded corners.
Is there an easy to use tool for creating them, out there?

(-moz-)border-radius CSS attribute is simplest. if the browser donet
support it you can waste a lot more time integrating something else…

6

http://www.spiffycorners.com/

7

On 5/9/06, cdr [email protected] wrote:

using CSS, I just dunno how to create those rounded corners.
Is there an easy to use tool for creating them, out there?

There is not a really easy cross browser way to do this. The cross
browser method usually uses two or four nested html elements each with
a background image along with some clever element margins and/or
padding. See “Bulletproof Web Design” by Dan Cederholm for more. It is
a great book. Otherwise google “css rounded corners”. Otherwise pick
apart a website with rounded corners.

8

Hi,

2006/5/10, Jim mack [email protected]:

One approach is to use a table, and put an image for each of the four
corners, a horizontal line, and a vertical line, in as background images.

Please don’t. Thats not semantic.

http://www.google.de/search?hl=de&q=round+corners+css&btnG=Google-Suche&meta=

Nifty Corners is much common.

Beate

9

One approach is to use a table, and put an image for each of the four
corners, a horizontal line, and a vertical line, in as background
images.
Another I’ve seen is to generate a graphical image, rounded or whatever,
on
the fly based on its size.

On 5/9/06, Peter M. [email protected] wrote:

a great book. Otherwise google “css rounded corners”. Otherwise pick
apart a website with rounded corners.

Rails mailing list
[email protected]
http://lists.rubyonrails.org/mailman/listinfo/rails

–
Jim

10

If you don’t mind using javascript to do it, Rico does a good job:

11

http://www.html.it/articoli/niftycube/index.html

12

Thank you all guys.

13

There are a lot of solutions found around the net. But i ask myself, can
i create a rounded corner box using library of script.aculo.us!

14

Tam-Minh wrote:

There are a lot of solutions found around the net. But i ask myself, can
i create a rounded corner box using library of script.aculo.us!

I’ve been experimenting a bit with Nifty Corners. It’s a javascript
based solution which requires no graphic files.

I’ve gone the other route (photoshoping, etc), and this one is less
laborous on the backend, but shifts the effort towards browser
rendering time (of which I haven’t noticed any slow down as of yet) and
programming time (most ID/Classes can be rounded in an onload event,
but partials are a little trickier).

Nifty is also nice because you don’t have any special rendering html.
Just tell Nifty the ID(or class) you want to round. The demos are good.

http://www.html.it/articoli/niftycube/index.html

Jodi

15

I enjoy curvyCorners…it’s the only one Ive gotten to work reliably.

http://www.curvycorners.net/

16

My own answers:

17

Josh K. wrote:

I have had good luck using NiftyCube (
Nifty Corners Cube - freedom to round).

Really? In a Rails app?

Only seems to work for me if niftycube.js is in a directory that matches
the path of the URL. For example, if I put niftycube in
(public)/niftycube.js, the effect only occurs on http://mysite.com/, not
on http://mysite.com/anywhere/else.

18

Robert H. wrote:

Josh K. wrote:

I have had good luck using NiftyCube (
Nifty Corners Cube - freedom to round).

Really? In a Rails app?

Only seems to work for me if niftycube.js is in a directory that matches
the path of the URL. For example, if I put niftycube in
(public)/niftycube.js, the effect only occurs on http://mysite.com/, not
on http://mysite.com/anywhere/else.

Niftycube works perfectly for me, everywhere. There does appear to be a
spurious request for the stylesheet in non-existent locations, though.
You’re right about that.

Have you tried including the niftyCube CSS stylesheet in via
stylesheet_link_tag ? That’s what I did and it works perfectly.

-DJCP

19

Hi guys,

I started using NiftyCude today with Rails.

I copied :

  • niftyCorners.css to …/public/stylesheets
  • niftycube.js to …/public/javascrips

And I added : <% stylesheet_link_tag “niftyCorners”, :media => “screen”
%> to my view, but for one reason or another I do not get rounded
corners.

Any ideas what I could be missing / doing wrong?

Thanks

Johannes

20

Hi,
You need to add the javascript file as well. The javascript file will
actually include the css file for you, so you should even need to add
that one.

<%= javascript_include_tag :defaults, ‘niftycube’ %>

-Eric G.