Design Toolbox

40 Incredibly Useful Web Design Tools You Should Use Daily
from the Graphic and Web Design Blog.

Whether you seek code, icons or inspiration, you will find it here. At the risk of blogging about another blog, this is a great little toolkit. Lots of AJAX inspiration, CSS examples, and more. I’ll be coming back time and again to solve problems.

I went to a great DevGroupNW meeting last night about CSS3 and the very cool features it provides. The speaker was Dave McFarland, a local guy who has written a few Missing Manuals on CSS and web stuff. He shared a lot of information with us in a very short period of time.

Keep in mind, these features won’t work in IE6, but it won’t break anything either, just be sure the underlying styles are functional in IE6. With IE6 now down to 12% of the national brower market, it may not be an important presence on the websites you work on. They are good to go in Firefox, Safari, and Chrome.

In CSS3 you are now able to:

• Add icons to links by type (for .pdf or email icons, for example) by creating a unique style for each kind of link by using attribute selectors.
• Style first or last examples of a style within a container, using the first-child and last-child attributes.
• Style table rows with the nth-child attribute.
• Add transparency to a div or by attribute (all the examples of one color, or all h1 tags).
• Create an alpha channel with the RGBA attribute to exclude type within a transparent container.
• Add and style text shadows with the text-shadow attribute. There can even be subsequent layers of shadows.
• Add interactivity with Jquery scripts. Jquery is his recommended flavor of javascript libraries to work with because it works well with CSS3
• And drum roll please… use custom fonts with the @fontface attribute. It has been the last area of design control available to designers, due to the issue of resident fonts on user’s machines. This allows you to upload a font to the server which is downloaded on demand.

And, by the way, HTML5 and CSS3 will be the new web standard, not XHTML, so you can forget learning XHTML for now.
See the offical specification for HTML5.

Want to learn more? Read Dave’s article on how to add transparencies on your websites with CSS3 on CreativePro.com

Font resources

• How to use fonts on your website with the fontface attribute in CSS3
• Free fonts at FontFace.com
• More free fonts at Font Squirrel
• Typekit: a tool for adding custom fonts to your website

Learning CSS3

• css3.info the place to go for CSS3 answers

Browser Testing
Wondering what your website looks like in browsers and platforms you don’t have? Check them out on the Adobe test site. They are still accepting signups and it’s free if you have an Adobe login.

With support in Chrome, Firefox 3.5, Opera, and Safari, HTML 5 is coming at you like a runaway train. Here are some suggestions to help you prepare to get on board rather than be left at the platform or tied to the tracks.

via A List Apart: Articles: Get Ready for HTML 5.

Just when we thought the dust had settled in the move to accept XHTML as the standard for clean, compliant code, up pops HTML 5. I have been curious about the new tags and how to use them, so this article from A List Apart is very handy in outlining the differences and offering suggestions on experiments to try on your own.

Evolution of Photoshop: 1988 – 2009 | Tools.

How long have you been using Photoshop?
For me, 3.0 is when it starts to look familiar, which makes it mid-90s. I was working at Tri-Met then and did most of  the maps in Corel Draw. Illustrator wasn’t available on the PC for a long time and Corel had a great set of tools. I still am a big fan of the early Corel Draw interface.

Aldus Pagemaker was the page layout program of choice on the PC in the early to mid 90s, until it was bought by Adobe. But my first page layout program was Ready Set Go in the late 80s on one of those cute little original Macs with the tiny screen.

What tools were the ones you learned to design with?