Dylan Greene dot com

Cool - check it out - http://scriptingnews.userland.com/backissues/2003/02/25#When:2:54:09PM - Thanks Dave!
"Dylan Greene did the button in CSS, which is precisely as politically correct as the PNG version."

Here's the properly-compressed PNG version - I used 'pngout' and got it down to 267 bytes:

http://tumbleweed.net/images/xml.png

For those who care about such things, I've tweaked the code a bit and got the CSS button down to 205 bytes: http://zajac.ca/xmlbutton

byte-optimising HTML is madness... any of these would fit into a packet.

Madness? Apparently you've never worked on a high-traffic site. Bandwidth _matters_ when you have to pay for it, not just for the person downloading the page. And if you can do something as well in text as you can in graphics, even better, because then you save another server connection for each pageload. Sweet!

The problem with the css approach is, unless you put the style definition in a class, you have to put the style again and again for every instance of the icon. I understand that you rarely need to do that, but if you are talking about politically corrected approach, I think the PNG version is better.

Also, imo, the PNG version simply uses too many colors. I tried reducing the color palettes to 8, and was able to make the file down to 197 bytes using GIF.

Well, that was just an academic exercise for me. It's interesting to discover how CSS can replace images.

On the other hand, I can envision a situation where you could replace many similar button graphics throughout a site with a linked stylesheet and a single contextual CSS selector.

Well, hey, if you want to play reduce the palette game, no problemo. I got the PNG down to 212 bytes by reducing to an 8 colour palette and using pngout to correctly compress it.

http://tumbleweed.net/images/xml_sm2.png

Yes, bigger than the GIF version, but also not subject to GIF licensing nonsense. :)

You know, it's interesting that the XML button doesn't use web-safe colours. :)

I found that the text is still decorated in Mozilla 1.0.1 (Linux) unless I add a style="text-decoration:none" right inside the A tag itself.

I played around with Antipixel styled xml buttons. After I realized I didn't want the little orange one on my pages.
http://www.rainweb.net/dev/xmlIcon.htm

I've added a follow up message to this one.

http://www.dylangreene.com/blog.asp?blogID=99

xml_sm2.gif = 193 bytes. I use the gif animation program "Animagic" to load gif files in and then save it again. No program can beat animagic when it comes to scrink gif images without any loss of quality at all. Well it was ment to be a gif animator program but it have this nice-side effect : )
an other good gif scrinker is "SuperGIF" but that one faile when it comes to faded colors.

In response to Kam's comment, if you have a global stylesheet that you always include on your pages, why not put it there? Then use an xml class around the links. Voila!

I've been doing something similar - cool to see such a good response over here to it!! :)

New buttons, any color, any size, in no time flat without ever opening Photoshop. Change your mind about the text on the button, and the button resizes itself to fit. This is perfect for all kinds of uses. Thanks, Dylan!

Some CSS buttons will not work in Netscape

I have trouble with Netscape

Hi Dylan,

Terrific idea you had, I'm a bit late as I searched for xml orange button on Google a few hours ago :). So I think using CSS to design XML/RSS buttons is a great idea. I thought about it because you can't search for the XML/RSS buttons using the search feature of your web browser, mine is Firefox. So I thought the only way was to use HTML + CSS. The HTML contents is the RSS plain text and CSS can easily be used to stylize it the way you want. Some people said orange was an awful colourful, maybe they're right but it's one of my favourite :). However I don't know who is the man-designer behind these buttons but I think it chose orange because it's easy to see. It's small so it's doesn't bother people, not like these annoying flash-flashy animated ads. However I think some remarks of Dave Walker were interesting as most RSS newsreaders support autodiscovery, FeedDemon does for example.

About CSS styles I think a better way that talking about bytes and styles would be to create a RSS class to stylize your buttons. The CSS file is usually cached by the web browser so it downloads it once and use it for all the other pages but I'm not sure it's that important.

All notes that replacing images with CSS styles is a bit like using vectors (SVF), you resizes it so it makes the pages more accessible. I often have to zoom the pages because designers decided to fix the fonts, bad idea, small fonts, sometimes even pixellated, shame on them :).

JM

I think mine is nicer...

XHTML:

XML

or

XML

CSS:

.feedButton {

cursor: pointer;

display: inline;

background-color: #ff6600;

border-top: .16em #ffc8a4 solid;

border-bottom: .16em #3f1a01 solid;

border-left: .16em #ff9a57 solid;

border-right: .16em #7d3302 solid;

padding: .04em;

font-family: "Verdana", "Helvetica", "Arial", sans-serif;

font-size: .75em;

font-weight: bold;

color: white;

}

.feedButton, .feedButton:link, .feedButton:visited {

color: white;

text-decoration: none;

}

An example can be seen here:

http://www.cs.cityu.edu.hk/~martin/test-list.php

Oops... HTML is not allowed.

Well, anyway, the class can be applied to an anchor or a button...

Has everyone forgotten about the <NOSCRIPT> tag? Forget which is better, use *both* and image, and CSS! Scripting browsers will save bandwidth, but all will see it the same, and the author has single-point-of-change for the CSS (scripted) part.

Thanx, this was really useful. I too prefer the simpler CSS approach to the bitmapped versions. A lot less work and an decent modern browser supports it.

Tsunami Relief button set

regards,

JT

gifs

Another way to create those CSS buttons can be found here: http://www.jschreiber.com/archives/2004/09/creating_pure_c.html

Hi

Its quite interesting but could you help me out with my problem.

I want to manage a stick up footer on the website for IE 5.0 +. with CSS

As you can see 1 on bmw.co.uk

thanks

Imran Hashmi

This is great thank you so much :)

  kwl

xcxcv

Ö

jklkkklllk

fghjfjfhj  gzghhgg  gzhghghghgghg gggggggggggg

dhhg

Some CSS buttons will not work in Firefox

right

<a href="http://www.e-mago.co.il/e-magazine/intel.htm">מסכי LCD</a>
[url=http://www.e-mago.co.il/e-nagazine/intel.htm]מסכי LCD[/url]

 No more wondering what RSS version you're about to access, and now Google and other search engines will see the words "RSS" on your web site.

I found that some of the CSS buttons do not working!

yOoo thanks.

Hm What is it -?no more stupid things in this forum

ok

movie

thanks a lot

runescape items runescape money sailor moon cosplay warcraft 3 cd key> dofus kamas

http://www.pornspaces.com/assfuck/

I'm still a little confused, I must admit, on what RSS is all about. Why does it matter that the search engines can pick it up? Does that improve your pagerank or something? I mean, I have an RSS feed myself, but that's about all I thought it could do. It appears that there is a heck of a lot more involved here than what I originally suspect. But what it is, I'm not entirely sure. Still, it's great to see your own blog on other's RSS feeds! Makes you feel kind of proud.

<a href=http://www.rs2powerleveling.com>runescapemoney</a>
<a href=http://www.rs2powerleveling.com>runescape account</a>
<a href=http://www.rs2powerleveling.com>runescape accounts</a>

<a href=http://www.rs2powerleveling.com>runescapemoney</a>
<a href=http://www.rs2powerleveling.com>runescape account</a>
<a href=http://www.rs2powerleveling.com>runescape accounts</a>

http://www.hzgames.com  http://www.game-win.com

http://voegeln.123space.co.uk/

http://www.poppen.lenhost.info/

It appears that there is a heck of a lot more involved here than what I originally suspect. But what it is, I'm not entirely sure. Still, it's great to see your own blog on other's RSS feeds! Makes you feel kind of proud.

Is it possible to change the color? Is it possible to customize this?  I guess yes because this is just CSS right?

http://www.models.luesterne.com/

http://www.muttis.luesterne.com/

Best regard thanks!

it is realy useble

<p><a href="http://www.alemizbiz.com" rel="nofollow">http://www.alemizbiz.com</a><br />

best regards! thanks!

http://www.alemizbiz.blogspot.com

http://www.modelssexporno.com/

http://www.frauen-brueste.net/

kkk¼

http://luder.yoll.net/

http://www.pornspaces.com/hausfrauen/