I know these effects are not yet available to all browsers but they are available to all GOOD browsers. (You cannot prove that’s an IE dig) CSS gradient effects are now supported by Firefox 3.6, Safari, Chrome and ahem, Internet Explorer 5.5 – so okay maybe not all of them are good, but the newer ones are :)

Why you should use them: Generating gradients via CSS create a much smaller page size and faster load time because you’re not loading an image that’s larger than it has to be. When we add drop shadows to images or use gradients as background images for title bars and the like, we’re forcing the browser to download another image file or one that’s bigger than it has to be. This is especially true when using PNG files for their ability to show transparency with drop shadows. So the short answer to why we should use them: load time and file size.

But what about IE? Well, support is not there yet without a hack to cover the color stop (the band of color that would appear in a true gradient) but you can get basic gradients to work. Remember that each browser will display a slightly different appearance anyway in most cases and that the effect we’re adding is not essential to the overall usefulness or user friendliness of your site. In other words: sure they’ll be different but they’ll still look good.

So why are we talking about this anyway? Well, funny you should ask. I needed to add a quick gradient to a client’s site this morning and stumbled upon this great WYSIWYG browser-based gradient generator. You can use it to generate Firefox and Webkit (Safari and Chrome) gradients right in your browser. Also check out this great post that addresses how to implement all of the versions so they work in most browsers, including IE.

Related articles by Zemanta

• Take Advantage of CSS3 to Achieve Subtle Design (net.tutsplus.com)
• The Ultimate Roundup of 55+ CSS3 Tutorials (1stwebdesigner.com)
• Quick Tip: Pure CSS Text Gradients (net.tutsplus.com)
• Start Using CSS3 Today: Techniques and Tutorials (smashingmagazine.com)

Disclaimer: Do not use a javascript hack to fix each browser rather than adjusting your style sheets or using a reset style sheet first to solve the big stuff. This is last resort stuff here.

I managed to find a way to have Chrome show styles only set for Internet Explorer. Don’t ask me how but it has something to do with pulling Twitter updates via a js file into a custom WordPress template. The updates themselves already have styles attached to them before I pull them in so I have to undo/override them on my side.

This worked for all browsers using a conditional statement for IE and that straightened it all out – except Chrome. I know what you’re thinking. It can’t be broken in Chrome if it works in Safari. They’re both based on Webkit so they have to obey the same rules. Well, I found one they don’t agree on.

Anyway, here’s a last resort solution for you that will target any browser you want to via the style sheets by just adding the browser name to the selector like .chrome. I was led to the solution via Nathan Rice’s post on the subject but I used the one described in the contents since I couldn’t get his to play nice with the rest of what was going on. Here’s that solution:

Just upload this file to your server, call the script in the header of the page like this:

<script src="css_browser_selector.js"  type="text/javascript"></script>

and then just set your trouble maker selectors using the browser name as a class. So let’s say you want links to be red for IE 6, black for Chrome and blue for Firefox 3.5. You’d do this in your style sheet:

.ie7 a { color: red; }
.chrome a { color: black; }
.ff3_5 a { color: blue; }

Pretty snazzy and works like a charm. Again, don’t use unless you have to but it’s great to know this is out there. There are tons more usage examples and all the browser class titles here.

Related articles by Zemanta

• Is Google Chrome Usage Soaring at Firefox’s Expense? [STATS] (mashable.com)
• From Zero to Almost Ten Percent: How Chrome Surpassed Safari (thechromesource.com)
• Chrome Gains More Converts, Edges Out Safari (wired.com)
• Chrome Passes Safari To Become #3 Most Used Browser In U.S. [Browsers] (gizmodo.com)
• Chase Bank Fail: “Use IE6? (lockergnome.com)

I’ve tried a lot of different slideshows to get something super easy to use that didn’t require a ton of backend work to make it fit the site I was working on. This might be the easiest. Simple Javascript file, simple css files and easy to edit the pictures and appearance/size. Here’s where I installed it today: http://www.tennep.com/solar.php

Click here to visit the site
Andy Berke asked us to create a site that would help him get the message out about his upcoming run for Tennessee State Senator. We built his site using CSS, XHTML and a deathly fear of tables. Translation: It looks pretty good, it loads pretty fast and if Mr. Berke ever wants to change things in the future, it’s easily edited.

We also designed the logo for Andy Berke and his office collateral, including letterhead, business cards, and envelopes – all on Union printed stock.