RSS/XML Icons

For anyone interested in creating RSS/XML Icons...

<div> 
<a target="_blank" title="RSS" href="link-to-your-rss-feed.php">
<span style="border:1px solid;border-color:#FC9 #630 #330 #F96;padding:0 3px;font:bold 10px verdana,sans-serif;color:#FFF;background:#0066FF;text-decoration:none;margin:0;">RSS</span></a>
<a target="_blank" title="RSS 2.0" href="link-to-your-rss2-feed.php">
<span style="border:1px solid;border-color:#FC9 #630 #330 #F96;padding:0 3px;font:bold 10px verdana,sans-serif;color:#FFF;background:#0066FF;text-decoration:none;margin:0;">RSS 2.0</span></a>
<a target="_blank" title="XML" href="link-to-your-xml-feed.php">
<span style="border:1px solid;border-color:#FC9 #630 #330 #F96;padding:0 3px;font:bold 10px verdana,sans-serif;color:#FFF;background:#F60;text-decoration:none;margin:0;">XML</span></a>
</div>

Code (markup):

For a preview check this footer. I hope this can be of help to someone.

 

Good Stuff. Thanks.

 

Ah.. look nice, thanks

Josh

 

That's really cool. I've never seen (that I know of) buttons like that done purely in css. Way to go. I've copied the code, thanks.

 

I've tweaked the colors a little with this new version:

<div> 
<a target="_blank" title="RSS" href="link-to-your-rss-feed.php">
<span style="border:1px solid;border-color:#CCF #336 #033 #79F;padding:0 3px;font:bold 10px verdana,sans-serif;color:#FFF;background:#0066FF;text-decoration:none;margin:0;">RSS</span></a>
<a target="_blank" title="RSS 2.0" href="link-to-your-rss2-feed.php">
<span style="border:1px solid;border-color:#CCF #336 #033 #79F;padding:0 3px;font:bold 10px verdana,sans-serif;color:#FFF;background:#0066FF;text-decoration:none;margin:0;">RSS 2.0</span></a>
<a target="_blank" title="XML" href="link-to-your-xml-feed.php">
<span style="border:1px solid;border-color:#FC9 #630 #330 #F96;padding:0 3px;font:bold 10px verdana,sans-serif;color:#FFF;background:#F60;text-decoration:none;margin:0;">XML</span></a>
</div>

Code (markup):

If you want to change the colors here is a link to for Color Scheme and Web Safe Colors.

 

The new version looks much better.. good job!

Now you just need to make some sexy valid HTML and valid CSS buttons


Josh

 

I was thinking the same thing.

 

Here's at least something...

 
<div>
<span style="border:1px solid;border-color:#663 #663 #663 #663;padding:0 0px;font: 0px color:#FFF;background:#663;">
<span style="border:1px solid;border-color:#fff #fff #fff #fff;padding:0">
<a title="VALID CSS" href="link-to-your-css.php"><span style="border:1px solid;border-color:#F60 #fff #F60 #F60;padding:0 3px;font: 7px sans-serif;color:#FFF;background:#F60;text-decoration:none;margin:0;">V A L I D</span></a>
<a title="VALID CSS" href="link-to-your-css.php"><span style="border:1px solid;border-color:#663 #663 #663 #663;padding:0 3px;font: 7px sans-serif;color:#FFF;background:#663;text-decoration:none;margin:0;">C S S</span></a></span></span>
</div>

Code (markup):

Here is a demo. As before, you can change the text, colors, size, etc. to your suiting.

 

Off topic, but Web Safe Colors is entirely a myth. The lady (I believe) who came up with the pallette did so arbitrarily, and it got popular and picked up by all the graphics packages. I was looking for some pallettes one day and ran accross her web site. she definitely has a sense of humor about it.

 

I didn't know that. You learn something new every day.

 

Any CSS gurus hanging around? This code is off. It displays fine in IE6 but not in Firefox. Can anyone get this to work in both?

<div>
<span style="border:1px solid;border-color:#663 #663 #663 #663;padding:0px;font: 0px color:#FFF;background:#663;"><span style="border:1px solid;border-color:#fff #fff #fff #fff;padding:0px;">
<a title="VALID CSS" href="/"><span style="border:1px solid;border-color:#F60 #fff #F60 #F60;padding:0px 3px;font: 7px sans-serif;color:#FFF;background:#F60;text-decoration:none;margin:0px;">V A L I D</span></a><a title="VALID CSS" href="/"><span style="border:1px solid;border-color:#663 #663 #663 #663;padding:0px 3px;font: 7px sans-serif;color:#FFF;background:#663;text-decoration:none;margin:0px;">C S S</span></a></span></span>
</div>

Code (markup):

Here is a Demo for IE6.

 

not sure if this is the problem, but you are missing a semicolon after 0px for your font: 0px

 

Thanks chachi, I've updated the code. Still no luck however.

 

I might be showing my age, but when folks had 8 bit color displays (256) colors it was important to use only those 256 colors--otherwise the display would substitute colors which were not available--sometime resulting in unfortunate color combinations.

To make things worse, the PC and Mac used different colors. That left only 216 colors (if memory serves me) to use if you wanted to be safe--hence they were called web safe colors. WYSIWYG web editors such as Golive still have this option, I believe.

Today, everyone has 32 bit color (millions of colors) so it is not an issue anymore.

 

I've been looking around and found this page on W3C buttons without images.

 

that's really nice, much better than using images.

 

Heh, what about Netscape, for example 4.6-4.7

 

Here is an article: Advert Buttons using pure CSS v2.0