CodeStore.net comments on "Adding The Edge To Your Button Images"

Reply from Jaap

Jaap — Fri, 09 Sep 2011 02:31:31 -0500

Great article Jake, reminds me to the time I was doing embossed/indended lines etc. with a thin white and light gray line near to each other on a dark page background ;-)

Reply from Patrick Kwinten

Patrick Kwinten — Thu, 08 Sep 2011 10:35:29 -0500

.lotusBtn I would say or even .lotusBtn .lotusSpecial

http://www-12.lotus.com/ldd/doc/oneuidoc/docpublic/components/buttons.htm

Reply from Jake Howlett

Jake Howlett — Thu, 08 Sep 2011 10:09:29 -0500

There are a few tricks you can use there. I guess you just want to show some text over the top of the button graphic. Troubles start when the length of text outgrows the button. Ideally you'd stop that happening. If not you can do things like split the button in two and have markup like this:

Link

Then put the first part of the button background in the A tag using CSS and the other part to the right of the SPAN's background using CSS.

Reply from Robert Shaver

Robert Shaver — Thu, 08 Sep 2011 10:03:41 -0500

Most of my projects are designed so that the customer can administer it via the web. That means that if they add a new page it appears in a menu somewhere on the site.

So far my navigator buttons use no graphics ... they just use standard HTML UL LI elements with some simple CSS to style them.

But I've always wanted to add the nice buttons like you're talking about but they have to be generic so that they will generate dynamically on the Domino server some way. (I suppose it could be done on the client side with JavaScript but then I've got to contend with browser incompatibilities.)

Reply from Jake Howlett

Jake Howlett — Thu, 08 Sep 2011 03:34:33 -0500

Hadn't seen those buttons (thanks) but am semi-aware of what CSS3 is capable of look forward to the day (in 2 or 3 years?) when it can be used widely in confidence.

Reply from Per Henrik Lausten

Per Henrik Lausten — Thu, 08 Sep 2011 00:03:55 -0500

Hi Jake, have you seen these CSS3 generated buttons:

http://www.red-team-design.com/just-another-awesome-css3-buttons

It's impressive what you can do with CSS3 - and thereby avoid the use of button images.

Reply from Jerry Carter

Jerry Carter — Wed, 07 Sep 2011 15:03:37 -0500

Yes. You just need to store the alpha channeled images as separate resources and combine them as needed. Most modern browsers have no trouble with it.

Another neat trick for auto-generating images... create three images with different alpha layers that are n width where n is a different prime number for each. Use all three for your background image and you'll have a non-repeating pattern from just three small elements.

Reply from Jake Howlett

Jake Howlett — Wed, 07 Sep 2011 14:35:11 -0500

Generated? How so?

Reply from Robert Shaver

Robert Shaver — Wed, 07 Sep 2011 13:57:12 -0500

All my navigator buttons are dynamically generated from the Domino database. Can these be generated dynamically?

Reply from Aaron Hardin

Aaron Hardin — Wed, 07 Sep 2011 13:01:50 -0500

Me too, I like it!

Reply from Ben Langhinrichs

Ben Langhinrichs — Wed, 07 Sep 2011 11:38:26 -0500

Cool. I'll have to try that. Thanks for sharing it.