Re: [css-d] A good CSS/text button?
> If one has watched the example you have gave closely, he sees the > button has /four/ rounded corners and each of them requires another > (and in this case: empty) html element if the button has to be fully > scalable. > == > Well, you could use JavaScript to add the extra spans, so that the HTML > code stays neat, but > that's straying from the purpose of the list. Something like Nifty Corners > would do it nicely. > I would note that in the original, the use of non-breaking spaces is > redundant (and anti-standards). > Simply adding a little padding, ala padding:0 1em; would achieve the > effect much more gracefully. In short: http://css-discuss.incutio.com/?page=RoundedCorners -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A good CSS/text button?
If one has watched the example you have gave closely, he sees the button has /four/ rounded corners and each of them requires another (and in this case: empty) html element if the button has to be fully scalable. == Well, you could use JavaScript to add the extra spans, so that the HTML code stays neat, but that's straying from the purpose of the list. Something like Nifty Corners would do it nicely. I would note that in the original, the use of non-breaking spaces is redundant (and anti-standards). Simply adding a little padding, ala padding:0 1em; would achieve the effect much more gracefully. -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A good CSS/text button?
> >> Tom, it's very simple. Use the sliding doors method. > >> > >> http://alistapart.com/articles/slidingdoors/ & > >> http://alistapart.com/articles/slidingdoors2/ > > > > I am using one big image for that kind of stuff: > > http://icant.co.uk/articles/flexible-css-menu/ > > Nice. When you blow it up large enough, SOME of the tabs [2nd and 4th) > display a second left-end image. Any clue about why? Well, the image doesn't fit any more. If you really consider the need that some users need to blow up the text to this size, create bigger images. However, this is the danger of these tests: Breaking them is easy but would a needy user really need text that big or would a screen magnifier be needed anyways? > And, what is the best way to create those tab images? Not just what tool, > but how the heck do you draw/shape the curves and shading? Photoshop CS2, comes with a rounded corners shape and a good gradient tool. Also, presets for plastic buttons. There is also a plethora of tutorials out there: http://fresherimage.com/Tips/Photoshop/PlasticButton/ http://www.google.co.uk/search?q=plastic+button+tutorial&start=0&ie=utf-8&oe=utf-8 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A good CSS/text button?
> wrote: >> Tom, it's very simple. Use the sliding doors method. >> >> http://alistapart.com/articles/slidingdoors/ & >> http://alistapart.com/articles/slidingdoors2/ > > I am using one big image for that kind of stuff: > http://icant.co.uk/articles/flexible-css-menu/ Nice. When you blow it up large enough, SOME of the tabs [2nd and 4th) display a second left-end image. Any clue about why? And, what is the best way to create those tab images? Not just what tool, but how the heck do you draw/shape the curves and shading? --Guy K. Haas Software Exegete in Silicon Valley __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A good CSS/text button?
wrote: > Tom, it's very simple. Use the sliding doors method. > > http://alistapart.com/articles/slidingdoors/ & > http://alistapart.com/articles/slidingdoors2/ I am using one big image for that kind of stuff: http://icant.co.uk/articles/flexible-css-menu/ -- Chris Heilmann Book: http://www.beginningjavascript.com Blog: http://www.wait-till-i.com Writing: http://icant.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] A good CSS/text button?
Tom, it's very simple. Use the sliding doors method. http://alistapart.com/articles/slidingdoors/ & http://alistapart.com/articles/slidingdoors2/ -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] A good CSS/text button?
Hi everyone,
I'm searching for a good solution that will allow us to use scalable,
graphic backgrounds as buttons while still using plain text. The main reason
for this is to allow for ease of editing buttons without going back to the
image editor, as well as internationalization.
Currently, one of our developers implemented this solution:
-
.green-button {
padding: 0 0 10px 0;
display: inline;
font: bold 12px Arial;
vertical-align: middle;
white-space: nowrap; }
.green-button span.l {
text-decoration:none;
background: url("button_left.gif") left center no-repeat;
padding: 4px 6px 4px 0; }
.green-button b {
text-decoration:none;
color:#ff;
background: url("button_center.gif") center center repeat-x;
padding: 4px 0; }
.green-button span.r {
text-decoration:none;
background: url("button_right.gif") right center no-repeat;
padding: 4px 6px 4px 0; }
.green-button:hover b { text-decoration: none; }
Add to
Watchlist
-
You can see what it looks like (with CSS inline) at:
http://www.pixelmech.com/rev/cssbutton.html
It works, but I'm not crazy about it for a couple of reasons. One is that it
is tricky to position correctly. And I am just wondering if there is a
better way to do it. (A sliding doors method perhaps?) I've searched for css
buttons, but all I seem to come up with is stuff I am familiar with -
basically replacing text with an image or css rollovers, but none of that
really fits what we need here.
Any suggestions on how to improve what we have, or a better solution
altogether? (I'm thinking there is a better way to do this.)
Thanks
Tom
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
