With CSS3, you can create a border that fades out gradually using the :before and :after css pseudo classes and css gradients.

I haven’t seen this technique done anywhere so I decided to post it. It was inspired by the Multiple Borders technique posted by Jeffery Way you can actually do a lot using the before and after pseudo classes, adding elements to one element that is not considered part of the html structure or the document flow(if positioned absolutely).

View the demo |   Download the source

Related posts:

1. How to Create Books in Coda Coda allows you to add reference books under the...
2. How to create a sidebar navigation in Wordpress Here’s a snippet that will give you an instant...
3. Web Design Resources: December 30th through January 1st My latest delicious bookmarks related to web design, development,...

My latest delicious bookmarks related to web design, development, drupal, wordpress, seo, freelance, design, typography, css, jquery and the list goes on…

• Color Inspiration: Go Green with Envy | Nettuts+ -
• Google Buzz -
• Ubercart | drupal.org -
• The New Hotness: Using CSS3 Visual Effects – Smashing Magazine -
• Safari DOM Extensions Reference -
• Safari HTML5 Audio and Video Guide: Introduction – “HTML5 is the next major version of HTML, the primary standard that determines how web content interacts with browsers.”
• Technical Note TN2262: Preparing Your Web Content for iPad – Use -webkit-user-select:none; to disable cut/copy/paste option in Safari on iPhone OS. Use -webkit-appearance: none to remove styling from form elements
• Apple – iPad-ready websites – “iPad features Safari, a mobile web browser that supports the latest web standards — including HTML5, CSS3, and JavaScript.”
• Plugins/Validation – jQuery JavaScript Library -
• WordPress › White Label CMS « WordPress Plugins – The White Label CMS plugin allows you to remove all the panels from the Wordpress dashboard and insert your own panel, which you can use to write a personalised message to your client and link to the important elements in the CMS.
• Wordpress Manual Plugin – Video Tutorials For Your Clients -

Related posts:

1. Web Design Resources: March 28th through April 3rd My latest delicious bookmarks related to web design, development,...
2. Web Design Resources: December 4th My latest delicious bookmarks related to web design, development,...
3. Web Design Resources: March 4th through March 6th My latest delicious bookmarks related to web design, development,...

Coda allows you to add reference books under the ‘Books’ tab.

More information on adding books to Coda:

• Adding more coda books tutorial
• Google Groups: Coda Book Cover Template
• Adding Sitepoint Reference Books to Coda

Related Post: How to export or save sites in coda

Related posts:

1. How to Export or Save Coda Sites Where is Coda Site Information Stored? Coda currently does...
2. How to create a CSS3 border fadeout With CSS3, you can create a border that fades...
3. How to create a sidebar navigation in Wordpress Here’s a snippet that will give you an instant...

1. Improve your performance with YSlow

http://developer.yahoo.com/yslow/

Yslow grades the performance of your site based on 3 rulesets. The criteria includes http requests, gzip compression, javascript placement at bottom, css expressions, dns lookups, minifying css and javascript, url redirects, 404 errors and more.
With Yslow you can figure out what is holding up the page from loading up fast. I typically check under components to see if there are any 404s for files called.

2. Compress Images with Smushit

http://developer.yahoo.com/yslow/smushit/

Compress images even further than saving for web in photoshop with Smushit.

3. Place Javascript at the bottom of your html document

Javascript calls at the bottom allow the page to load without having to wait until the javascript is loaded.

4. Compress CSS and JS Files

http://www.cssoptimiser.com/

http://www.cleancss.com/

http://javascriptcompressor.com/

5. Use CSS Sprites

The concept of css sprites is to combine multiple images into one and using background-position in your css to display only certain images.

See How to use CSS Sprites: http://css-tricks.com/css-sprites/

Video: Exactly How to use CSS Sprites: http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/

Dave Shea explains CSS Sprites: http://www.mezzoblue.com/archives/2009/01/27/sprite_optim/

Related posts:

1. Web Design Resources: January 19th through January 23rd My latest delicious bookmarks related to web design, development,...
2. Forcing Internet Explorer to obey css using Javascript, CSS hacks and specific style sheets I know all of this has been written before,...
3. Web Design Resources: February 1st through February 3rd My latest delicious bookmarks related to web design, development,...

I know all of this has been written before, but this post has the best of the best in combating the ie6 and ie7 css issues.

Hate IE6?

I found an article that explains that this line of code can crash ie6:

< style >*{position:relative}< /style >< table >< input >< /table >

I have not tried this out. But I have one question: What in the hell was this guy doing to discover this? Either some really bad code or his page was fragmented some how.

How can I make IE6 behave like a normal Browser?

Enter Dean Edward’s IE7.js

This lightweight javascript library forces internet explorer 6 to accept a number of css selectors that standards-compliant browser allow.

Here is a list of what it can do: http://dean.edwards.name/IE7/

IE6 makes it really hard to make use of css’s full potential. With this we can use css the way it will be used when ie6 is no longer a requirement. And best part is that once ie6 is no longer supported we can remove that js code completely. We simply call the script from google’s repository. Find the code here

Download it here

Troubleshooting IE CSS bugs with Firefox & Firefug

Tip for finding ie6 & ie7 css problems

A great way to figure out what’s causing css issues in ie6 or ie7 is by reproducing the issue in firefox.
Of course you need to have some experience and knowledge of css to start. I use firebug to change the css on the fly. Once I have a few ideas of what may be causing the error, I adjust the css.

Knowing the css fix

Knowing what some common issues with IE are helps. Here are some helpful links to fight this:

• Most Common Bugs:http://css-tricks.com/ie-css-bugs-thatll-get-you-every-time/
• IE CSS Bugs that were fixed in IE7http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx

Transparent PNG Fixes

There are many fixes to get ie6 to display pngs properly. On that I like in particular is the twin helix png fix.
Download it here: http://www.twinhelix.com/css/iepngfix/

<!–[if lt IE 7]>
<style type=”text/css”>

div#box { behavior: url(iepngfix.htc); }

</style>
< ![endif]–>

The beauty with this one, is that you can target specific elements so the png fix doesn’t have to be applied to the whole page.

Up with IE Hacks:

Targeting and filtering Internet Explorer 7

(http://perishablepress.com/press/2008/07/15/css-hackz-series-targeting-and-filtering-internet-explorer-7/)
A list of valid and invalid selector hacks and conditional rules for targeting css ie7.

IE7 only css hacks explained

(http://www.evotech.net/blog/2007/04/ie7-only-css-hacks/)

Down with IE Hacks!:

Dave Shea writes a nice article in the advent of IE7 about using separate style sheets.

(http://www.thinkvitamin.com/features/css/stop-css-hacking)

We also have Nick La author of Web Designer Wall calling to trash all ie hacks: http://www.webdesignerwall.com/general/trash-all-ie-hacks/

In his article he addresses the problem that is IE6 support. But the reality is we just have to wait it out. We can fight back using ie7.js if we really have to. It’s difficult to convince a client to display a message for IE6 users to update their browser. This can be an annoyance for users. Don’t get me wrong I have no sympathy for anyone using IE6.

Related posts:

1. Why min-width and maximum-width hacks blow up in IE6 There are many hacks for ie6 to get the...
2. Freelance Web Design Resources: Drupal, Wordpress, SEO, jQuery, CSS: 05-9-10 through 05-10-10 My latest bookmarks related to web design, development, drupal,...
3. Freelance Web Design Resources: Drupal, Wordpress, CSS: 04-24-10 through 04-27-10 My latest bookmarks related to web design, development, drupal,...