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


#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
removed_email_address@domain.invalid
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. removed_email_address@domain.invalid 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 (
http://www.html.it/articoli/niftycube/index.html).


#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 removed_email_address@domain.invalid 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 removed_email_address@domain.invalid:

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. removed_email_address@domain.invalid wrote:

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


Rails mailing list
removed_email_address@domain.invalid
http://lists.rubyonrails.org/mailman/listinfo/rails


Jim


#10

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

http://openrico.org/rico/demos.page?demo=rico_corner


#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 (
http://www.html.it/articoli/niftycube/index.html).

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 (
http://www.html.it/articoli/niftycube/index.html).

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.