Forum: Ruby on Rails [OT] How do guys create round corner boxes? Which Graphic to

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
7595ff5e64d9a309c29932d106959973?d=identicon&s=25 Human Dunnil (Guest)
on 2006-05-09 23:43
(Received via mailing list)
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
Ac1da5d66d51a1c3b843221032247b30?d=identicon&s=25 Eric Goodwin (Guest)
on 2006-05-09 23:50
(Received via mailing list)
Hi,
The easiest and cleanest way to do this involves using some javascript.

http://www.encytemedia.com/blog/articles/2005/12/0...
or
http://www.html.it/articoli/niftycube/index.html

Cheers,
Eric Goodwin

Human Dunnil wrote:
> - Dunnil
> ------------------------------------------------------------------------
>
> _______________________________________________
> Rails mailing list
> Rails@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>


--
Eric Goodwin
http://www.ericgoodwin.com
57e939ff00f9df2670a09f417c08da5e?d=identicon&s=25 Josh Knowles (Guest)
on 2006-05-09 23:50
(Received via mailing list)
On 5/9/06, Human Dunnil <h.dunnil@gmail.com> 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).
30269682335f1fb247d71969fa715b5e?d=identicon&s=25 Roberto Saccon (rsaccon)
on 2006-05-10 01:15
(Received via mailing list)
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 !
931d5cc3b6fcb9e740ad2846db11a9ba?d=identicon&s=25 Matt Ramos (Guest)
on 2006-05-10 01:24
(Received via mailing list)
6f7c877de704c7cc03c8a3b2dc52df92?d=identicon&s=25 Carmen --- (carmen)
on 2006-05-10 06:24
> 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..
Eea3feaacbe44706164289d068d94828?d=identicon&s=25 Peter Michaux (Guest)
on 2006-05-10 06:33
(Received via mailing list)
On 5/9/06, cdr <carmen@whats-your.name> 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.
B7ae1a166a9f42a2cb7e87fda8f811e2?d=identicon&s=25 Jim mack (Guest)
on 2006-05-10 08:04
(Received via mailing list)
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 Michaux <petermichaux@gmail.com> wrote:
> a great book. Otherwise google "css rounded corners". Otherwise pick
> apart a website with rounded corners.
> _______________________________________________
> Rails mailing list
> Rails@lists.rubyonrails.org
> http://lists.rubyonrails.org/mailman/listinfo/rails
>



--
Jim
Ad91bce9c9a8c68b6942607e4721f74e?d=identicon&s=25 Beate Paland (Guest)
on 2006-05-10 09:39
(Received via mailing list)
Hi,

2006/5/10, Jim mack <jimmack1963@gmail.com>:
> 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+...

Nifty Corners is much common.

Beate
0bcc972918891ef358b0b3dfb4e7f18b?d=identicon&s=25 Hammed Malik (Guest)
on 2006-05-10 20:05
(Received via mailing list)
If you don't mind using javascript to do it, Rico does a good job:

http://openrico.org/rico/demos.page?demo=rico_corner
316c03a99e8ed311e5462d94f085fc2e?d=identicon&s=25 John Ivanoff (Guest)
on 2006-05-10 20:48
(Received via mailing list)
7595ff5e64d9a309c29932d106959973?d=identicon&s=25 Human Dunnil (Guest)
on 2006-05-11 00:21
(Received via mailing list)
Thank you all guys.
0560635661baf544b197a72b83505db1?d=identicon&s=25 Tam-Minh (Guest)
on 2006-12-15 16:35
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!
B09a3f6cdc4797532647d2d264b5df49?d=identicon&s=25 Jodi Showers (jshow)
on 2006-12-15 20:35
(Received via mailing list)
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
6d3c187a8b3ef53b08e3e7e8572c4fea?d=identicon&s=25 Jeremy McAnally (Guest)
on 2006-12-15 21:10
(Received via mailing list)
I enjoy curvyCorners...it's the only one Ive gotten to work reliably.

http://www.curvycorners.net/
15c80c9bf8be5ba6e5eeac9cb0304464?d=identicon&s=25 Ed Hickey (Guest)
on 2006-12-15 21:38
(Received via mailing list)
not neccessarily a solution, but interesting:
http://ajaxian.com/archives/googles-rounded-corner-generator

On 12/15/06, Jeremy McAnally <jeremymcanally@gmail.com> wrote:
> > > i create a rounded corner box using library of script.aculo.us!
> >
>
> >
>


--
Ed Hickey
Developer
Litmus Media
816-533-0409
ehickey@litmusmedia.com
A Member of Think Partnership, Inc
www.ThinkPartnership.com
Amex ticker symbol: THK
Ec9233451f7c6ba37a83388b87a1f565?d=identicon&s=25 Phrogz (Guest)
on 2006-12-15 22:18
(Received via mailing list)
95ac4011d0e657db0c3be18000eaeb36?d=identicon&s=25 Robert Head (Guest)
on 2006-12-18 10:35
Josh Knowles 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.
01725a108ae624cfeaa5f5e2a91af124?d=identicon&s=25 Daniel Collis-puro (djcp)
on 2006-12-18 16:56
Robert Head wrote:
> Josh Knowles 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 <head> via
stylesheet_link_tag ? That's what I did and it works perfectly.

-DJCP
8fc4156045fdbeed0e625e6a72a8c1f1?d=identicon&s=25 Johannes De jong (jdejong)
on 2007-01-06 19:30
(Received via mailing list)
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
Ac1da5d66d51a1c3b843221032247b30?d=identicon&s=25 Eric Goodwin (Guest)
on 2007-01-19 16:29
(Received via mailing list)
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 Goodwin
8fc4156045fdbeed0e625e6a72a8c1f1?d=identicon&s=25 Johannes De jong (jdejong)
on 2007-01-19 16:31
(Received via mailing list)
Thanks Eric,

I tried it but no happiness :-(

In my dos window I see it load load the js and the css but nothing
seems to happen

I'm stumped and I'm giving it a break and will try again tomorrow it
has been a loong day.

Johannes
D5414cab4ab15ba2c416451fc40fe148?d=identicon&s=25 Win (Guest)
on 2007-04-23 00:35
Johannes De jong wrote:
> Thanks Eric,
>
> I tried it but no happiness :-(
>
> In my dos window I see it load load the js and the css but nothing
> seems to happen
>
> I'm stumped and I'm giving it a break and will try again tomorrow it
> has been a loong day.
>
> Johannes
Hey Johannes,

I just read this thread trying to figure out why my NiftyCubes wasn't
working with my Rails app.

I got it working using the fixes suggested by Eric.  You were on the
right path to but you may have forgotten the "=" in your
stylesheet_link_tag call..

<% stylesheet_link_tag "niftyCorners", :media => "screen"%>

should be:

<%= stylesheet_link_tag "niftyCorners", :media => "screen"%>

Don't know if you just made a typo - but you might want to check

Cheers,
Win
15c80c9bf8be5ba6e5eeac9cb0304464?d=identicon&s=25 Ed Hickey (Guest)
on 2007-09-25 22:47
(Received via mailing list)
you need to set the window.onload.  something like this in your HTML
<HEAD>:

<script type="text/javascript">
window.onload=function(){
  Nifty("div#head_menu a","transparent top");
}
</script>




On 1/4/07, plotzeling@hotmail.com <plotzeling@hotmail.com> wrote:
> has been a loong day.
>
> Johannes
>
>
> >
>


--
Ed Hickey
Developer
Litmus Media
816-533-0409
ehickey@litmusmedia.com
A Member of Think Partnership, Inc
www.ThinkPartnership.com
Amex ticker symbol: THK
This topic is locked and can not be replied to.