1. CSS Button and Text Field Generator

2. CSS Creator

3. CSS Optimizer

4. CSS Form Code Maker

5. CSS Menu Generator

6. Roudned Graphics for CSS Corners

7. CSS Tab Designer

8. CSS Scroll Bar Color Changer

9. CSS Font and Text Style Wizard

10. CSS Table Wizard

Inkscape

An Open Source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format. Inkscape supports many advanced SVG features (markers, clones, alpha blending, etc.) and great care is taken in designing a streamlined interface. It is very easy to edit nodes, perform complex path operations, trace bitmaps and much more. We also aim to maintain a thriving user and developer community by using open, community-oriented development.

I am currently trying out Inkscape as a possible replacement for Illustrator and so far I must say I am very impressed.

Platforms: All

Download Inkscape

Skencil

Skencil is a Free Software interactive vector drawing appliction. Known to run on GNU/Linux and other UNIX-compatible systems, it is a flexible and powerful tool for illustrations, diagrams and other purposes. A somewhat unique (for a drawing program) feature of Skencil is that it is implemented almost completely in a very high-level, interpreted language, Python.

A few highlights of Skencil include:

• Bézier Curves
• Transformed text and images
• Bézier curves, rectangles and ellipses can be used as guides
• Gradient fills

Platforms: GNU/Unix

Download Karbon14

OpenOffice DRAW

As Karbon14 above, OpenOffice’s DRAW, that forms part of the OpenOffice.org package is an often overlooked application. “DRAW – from a quick sketch to a complex plan, DRAW gives you the tools to communicate with graphics and diagrams. With a maximum page size of 300cm by 300cm, DRAW is powerful tool for technical or general posters, etc.”

Platforms: All

Download OpenOffice DRAW

Sodipodi

Sodipodi is general vector illustrating application for Linux/Unix and Windows. It uses W3C SVG as native file and in-memory image format and can do many neat things. Sodipodi is not currently under development anymore but the code is still available from Sourceforge and if your needs are not great, then Sodipodi might just be the right fit for you.

Platforms: Linux, Unix, Windows

Download Sodipodi

If you are looking for some vector graphics that you can freely use and edit in these aplication you might want to look at the Open Clipart Library.

Good vector art is great for various promotional items which are great for promoting your company, items like stress balls and water bottles are sure to useful for people while showing your logo and building your brand.

CSS Tips and Techniques

- Push Your Web Design Into The Future With CSS3 [Smashing Magazine]

- CSS Typography: Contrast Techniques and Best Practices [Noupe]

- Powerful CSS Techniques for Effective Coding [Smashing Magazine]

- 4 Uber Cool CSS Techniques for Links [Css Globe]

- 10 Principles of the CSS Masters [NETTUTS]

- 12 Principles For Keeping Your Code Clean [Smashing Magazine]

- 101 CSS Techniques Of All Time – Part 1 [Noupe]

- Resetting Your Styles with CSS Reset [Six Revisions]

- 53 CSS Techniques You Couldn’t Live Without [Smashing Magazine]

- 101 CSS Techniques Of All Time – Part 2 [Noupe]

- Structural Naming Convention in CSS [Six Revisions]

- 10 Challenging but Awesome CSS Techniques [NETTUTS]

- Improving Code Readability With CSS Styleguides [Smashing Magazine]

- 8 Premium One Line Css Tips [Css Globe]

- 20+ Common CSS Bugs and Fixes [Noupe]

- 30+ CSS Cheat Sheets and Guides [All Web Design Resources]

- 5 Techniques to Acquaint You With CSS 3 [NETTUTS]

- 70 Expert Ideas for Better CSS Coding [Smashing Magazine]

CSS Templates and Layouts

- Free CSS Layouts and Templates [Smashing Magazine]

- CSS Layouts: 40+ Tutorials, Tips, Demos and Best Practices [Noupe]

- CSS Float Theory: Things You Should Know [Smashing Magazine]

- CSS Navigation Techniques (37 entries)

- 38 Free Elegant XHTML/CSS Website Templates [Hongkiat]

- Top 10 CSS Table Designs [Smashing Magazine]

- 50+ Nice Clean CSS Tab-Based Navigation Scripts [Hongkiat]

- CSS-Based Forms: Modern Solutions [Smashing Magazine]

CSS Tutorials

CSS Tutorials by W3Schools

- How to: CSS Large Background [Web Designer Wall]

- Cascading Style Sheets Basics

- Learn CSS Positioning in Ten Steps [BarelyFitz]

- Complete CSS Guide

- The Highly Extensible CSS Interface [Cameron Moll]

- Guide to Cascading Style Sheets

- Creating a CSS Layout from Scratch [Subcide]

- CSS Tutorials by HTML.net

CSS Showcases and Galleries

- 24 CSS Design Showcase Websites [Toxel]

- 120 Excellent Examples of CSS Horizantal Menu [CSS Tea]

- The CSS Gallery List

- 40 Beautiful Dark CSS Website Designs [Toxel]

- Best of CSS Design 2008 [Web Designer Wall]

CSS Resources

- Web Developer’s Handbook

- Dynamic Drive CSS Library

- SitePoint CSS Reference

- 101 CSS Resources [Jason Bartholme]

- 100 Freebie CSS Resources [Software Developer]

CSS Tools

- 50 Extremely Useful and Powerful CSS Tools [Smashing Magazine]

- CSS Validation Service

- 40+ CSS Generators, Creators, and Makers [All Web Design Resources]

- List of CSS Tools [Smashing Magazine]

- CSS Layout Generator [CSS Creator]

- CSS Editors Reviewed [Smashing Magazine]

Lets take a look at recent examples of these …

1. Vertical Animated Menus

1. Nice animated menu using CSS and Mootools

This tutorial illustrates how to implement a nice animated menu using Mootoolsand some lines of CSS and HTML code ready to reuse in your project.

2. jQuery iPod-style Drilldown Menu

A jQuery iPod-style drilldown menu to help users traverse hierarchical data quickly and with control. It’s especially helpful when organizing large data structures that don’t translate well into traditional dropdown or fly-out menus.

3. MenuMatic

MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system.

4. BDC DrillDown Menu

The BDC DrillDown Menu is a compact, hierarchical drilldown menu implemented as a jQuery plugin. A drilldown menu takes up constant space like an accordian menu but offers the deep hierarchy of a flyout menu at the same time.

2. Horizontal Animated Menus

5. Mootools animated sidebar menu

This tutorial explains how to implement an animated menu using mootools. You can see how it works directly from mootools site.

6.Simple Animated Menu for Mootools 1.2

A really nice animated menu created using Mootools, with a flash hover effect of an arrow.

7.
Sliding JavaScript Menu Highlight

This sliding hover effect script is an easy method to add some flavor to your navigation. Using the CSS you can easily customize the navigation to fit your “look and feel”.

8.
Fancy Sliding Menu for Mootools

The menu is developed in Mootools with a nice sliding effect on each tab.

9.
UvumiTools Dropdown Menu

A simple and lightweight menu that can be easily updated by simply editing a <ul> HTML element. Created using Mootools.

10.
Superfish

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu and adds Suckerfish-style hover effect. Features include: Timed delay on mouseout, Animation of sub-menu reveal, Supports the hoverIntent plugin, drop shadows for capable browsers and more…

11.
AJAX Dropdown Tab Menu

e24TabMenu is a plugin written for Scriptaculous. It is a tab menu that expands collapse smoothly.

12. Using jQuery for Background Image Animations

Snook wrote a straignforward script to produce a nice menu background image animation. The animation needs to run when the user moves their mouse over and out of the navigation. The key thing to note is that any animation is stopped before attempting to animate again. This avoids animations queuing up from repeatedly moving the mouse in and out of the element.

13. A Sliding Menu

It is a very simple sliding menu using the effects provided by Interface. The defauly behavior of the menu is to hide after 1000ms (1 sec.) and to display when your mouse hovers over the “menu” label. The menu will also auto-hide after 1000ms when the mouse leaves the menu area. Most of these values, including the sliding effect, can be customized.

We all want to become faster and more efficient – but it often seems like there’s no time to make improvements to the way we work. We can laugh at the self-defeating nature of this circular logic, but that doesn’t get us any closer to a practical solution.

Five easy ways to boost your productivity

1. Zero your inbox
If you can, answer emails right away. If not, file them into folders for bulk-reply sessions. Don’t just let your inbox mushroom, or important emails may get lost in the flood.

2. Don’t reinvent the wheel
If some high-quality, proven and suitable mechanism already exists for something you’re trying to do, and you’re legally entitled to use it, do so, be it a coding library or CMS. If you can create components usable over multiple projects, do so to save working on the same thing over and over.

3. Hone things down
If a client wants a 50-page site and you can see a way of doing it in 10, tell them and convince them to do so. Smaller sites are typically more creative, and offer more clarity and focus.

4. Avoid interruptions
Quit your email client and browsers when you want to fully focus on some design work. At all other times, work with passive communication, so you communicate when you want to. Avoid interrupting others, unless the matter is extremely urgent and simply can’t wait for an extra hour.

5. Get away from your computer

Inspiration rarely comes from staring at a monitor for hours. So walk, visit exhibitions and read, rather getting all your ‘inspiration’ from other websites. Also avoid the temptation to start with the computer. Instead, design and plan freely with paper and a pencil. Work fast and don’t linger – you may find ideas come surprisingly easily.

Five tools to help you design better sites

1. Basecamp

Of 37signals’ portfolio, it’s web- based project management tool Basecamp that comes in for the most praise. “We couldn’t work without it,” says Happy Cog’s Jeff Zeldman. “We use it to collaborate with local and remote partners, keep track of deadlines, and even handle the bulk of our client communications.”

2. Firefox Web Developer toolbar

If you work on standard web pages, you’ve probably already got this installed. If not, you’re missing the means to efficiently and effectively test page components from within a standards- compliant browser.

3. Subversion
This popular open source version- control system enables designers and developers to maintain versions of code. As Andy Budd notes, “This enables you to keep up to date with the latest version of project files, which is especially useful if you’re working with external developers, or if you’ve got a distributed team.”

4. Silverback
This new kid on the block is a ‘guerrilla usability testing app’, enabling you to run low-cost usability tests with hardware you already have in your Mac. It records screen activity, video, audio and mouse clicks, and you can use the Apple remote to define chapter markers when usability problems are encountered. Once tests are finished, video and data is exported to QuickTime for analysis.

5. Pen and paper
Seriously. Turn off your computer, go for a walk, and sketch some ideas, rather than staring blindly at Photoshop or Fireworks, gradually turning your mouse hand into a gnarled claw.

Let’s search the web for an autumn-like palette (yellow, red, brown) using the following 3 services. Let’s see how the search results are like.

1. PicItUp

PicItUp is a visual image search engine that combines word-based with color based search.

Test it: search for [autumn] and choose any color from the left column (I chose yellow). Now let’s look at the results:

Impressive, isn’t it?

What the tool lacks: you can’t combine several colors to refine your search (for example you can’t search for a yellow-red palette) – you are only able to search for one color.

2. Multicolr

Unlike the above one, with the Flickr-based Multicolr service you can combine as many colors as you want.

Test it: choose several colors and watch how the image list changes with each color added (I combined red and yellow):

What the tool lacks:you can’t combine word-based and color-based searches with this service. You are limited with playing with colors only.

3. Etsy

Etsy, an online shop of handmade products, has developed color search for their own product database.

Test it: It’s real fun to play with. Just browse your mouse across the screen and watch various colors and same-palette products pop up.

What the tool lacks: here you are unable to either set the color option or the search term. Nonetheless the tool is such fun to use that you definitely need to try it out.

In this post, you’ll find 10 free tools to help you evaluate and correct issues which decrease your website’s accessibility. There was a high emphasis on the ease-of-use during the selection of these tools.

1. Firefox Accessibility Extension

The Firefox Accessibility Extension is a Firefox toolbar that allows you to inspect every aspect of a web page to determine its accessibility. A helpful toolbar feature is the Text Equivalents menu which allows you to generate lists of elements such as images and links to see whether each are standards-compliant. You can also launch 3rd party applications such as the WC3 HTML Validator and Link Checker services directly from the toolbar.

2. aDesigner

aDesigner, developed by IBM, simulates the experience of visually-impaired individuals so that designers can better understand how a web page is interpreted by screen readers. It has a plenty of features including a summary and detailed report of compliancy to web accessibility guidelines and simulations for blind or low-vision impairment.

3. EvalAccess

EvalAccess is a web-based service for testing your website’s accessibility. You can either point to a web page, an entire website, or directly enter your HTML source code. It checks your mark-up against the WC3’s Web Content Accessibility Guidelines (WCAG 1.0) and provides a summary of the number of errors and warnings and a breakdown of each error.

4. WebAnywhere

WebAnywhere is a browser-based web application that works similarly to screen readers such as JAWS. It’s an excellent way to see how a web page is read and navigated by assistive technologies.

5. Web Accessibility Inspector

The Web Accessibility Inspector, developed by Fujitsu, is a desktop application that indicates web accessibility issues. You can specify a file, folder, or URL to run the inspection on. It has the “View on the screen” option which opens the web page in a browser window with markers that point out elements that have issues.

6. Vischeck

Vischeck simulates how a web page or image will look if viewed by people affected with color-blindness. It simulates three types of color-blindness. You can conduct the test by entering a URL or uploading images.

7. Accessibility Color Wheel

The Accessibility Color Wheel is a web-based tool to help you select the background color and font color. You can enter the hexadecimal values of the colors you want to test, or you can hover over the color wheel to select colors.

8. Colour Contrast Analyser

The Colour Contrast Analyser, developed by Juicy Studio, is a Firefox extension (currently in alpha) that checks all the elements in the Document Object Model for color contrast to insure that content is accessible by people who are color-blind or affected by other visual-impairments. It uses the color and brightness differences algorithm suggested by the WC3 “Techniques For Accessibility Evaluation And Repair Tools” (AERT).

Juicy Studio also has other web accessibility evaluation tools such as the Readability Test, CSS Analyser, and Image Analyser.

9. TAW Web Accessibility Test

The TAW Web Accessibility Test evaluates your website’s accessibility based on the WCAG 1.0. It marks trouble spots directly on the web page, allowing you to quickly see where the errors are. Clicking on the error/warning indicator will bump you down to a summary of the issue. It’s a great way to visualize the areas of a web page that needs work.

10. Web Accessibility Toolbar

The Web Accessibility Toolbar (WAT) is an extension for Internet Explorer or Opera that offers designers a ton of useful tools and features to help in the analysis of a web page’s accessibility. One helpful feature is the Greyscale (Colour > Greyscale) feature which renders the web page in black in white to help you find low-contrast spots in the design.

What’s your viewpoint on web accessibility?

How important is it in your web projects? Do you go out of your way to make your projects accessible? Share your thoughts in the comments section below.

So we’ve decided to take a deep look at articles about CSS-based layouts and the result was a list of 40 tutorials, resources and best practices offering gorgeous and valid CSS-based Layouts.

CSS Layout Tutorials

1-Three column fixed layout structure using CSS- This post explains how to realize an HTML/CSS basic structure to design a simple three column fixed page layout with standard elements (logo top bar, navigation bar, text stage, center column for post categories and right column to insert Google AdSense 120X600 ads), to use in your projects.

• Live Example View it Here | Download

• Live Example View it Here | Download

• Live Example View it Here

• Live Example View it Here

<body>  <div id="container">

...entire layout goes here...

</div>

</body>

Using CSS, the following two rules force whatever is contained within #container to be centered:

body {  text-align: center;

}

#container {

margin: 0 auto;

width: xxxpx;

text-align: left;

}

• Live Example View it Here

• Live Example View it Here

• Live Example View it Here | Download files

• Download a QuickTime movie to see how this is done.

• For Live Examples, you can check these layouts: Absolute Position within a relative box, two floated boxes and using a border to provide the background for a column.

The best Layouts Resources

Most of these demonstrations can be used without asking for permission. However, some will require email approval first. Just check each site for the copyright requirements before use.

20-Sample CSS Page Layouts- Here are a range of CSS page layouts, including 2 column and 3 column layouts.

• For Live Examples, you can check these layouts: Liquid three column layout, Left aligned, set width and Liquid insanity.

• For Live Examples, you can check these layouts: Liquid three column layout, Left aligned, set width and Liquid insanity.

• For Live Examples, you can check these layouts: 3 columns fixed
  centered, fixed Box totally
  centered and 3 columns, all
  dynamic.

• For Live Examples, you can also check these layouts: The Holy Grail 3 Column Layout, The Classic Blog Layout and The Multi Column Layout.

• For Live Examples, you can check these layouts: Cross browser FIXED, Three columns and CSS Frame – The Holy Grill.

• For Live Examples, you can check these layouts: Three fixed Columns, Three percentage columns and Liquid, three columns, hybrid widths .

• For Live Examples, you can check these layouts: 3 columns, the holy grail, 2 columns, ALA style and 3 columns, all fluid .

• For Live Examples, you can check these layouts: 2 columns – left menu, 3 columns – flanking menus and Auto-width Margins .

• For Live Examples, you can check these layouts: Three column CSS layout – left and right menu, Two column CSS layout – top and left menu and Three column CSS fluid layout: 100% width.

• Download YAML here.

Best Practices

Also if you are looking for inspiration for CSS-based layout designs, you will find a nice collection of websites below. These sites show how css layouts can be applied on various type of sites. Check out how the layout can be divided into 2 columns, 3 columns, a mixture of narrow and wide columns.

32-Helldesign

Drop Down Menus :: All Web Menus (http://www.likno.com/allwebmenusinfo.html )
Whenever I need to add a complex drop-down menu to a site, I turn to All Web Menus. This program styles a complex multi level menu in less time then it takes to type the text. All websites need menus and for detailed menus, you should try All Web Menus.

Time saved: 1 Hour per menu.

Image Capture :: Gadwin Printscreen (http://www.gadwin.com/printscreen/)
Gadwin Printscreen utility replaces windows standard printscreen keyboard button with more options and flexibility. It loads on windows startup and runs silently in the background without consuming system resources but it’s always there when you need it. Instead of just capturing the entire screen view, Gadwin allows you to select a rectangular area very precisely with the help of a built in magnifying window. This tool is invaluable to my work. I often use it to grab different pieces to mock up a design.

Time saved: 2 Minutes per screen capture.

Batch Image Resizing :: Multiple Image Resizer .NET (http://www.multipleimageresizer.net/ )
I tried 10-15 different batch resizing programs before setting on Multiple Image Resizer .NET. This program’s ease of use in unparalleled and it has absolutely any function you could desire. Simply select a folder of images you want resized, determine whether to resize, add border, add text, overlay images, crop, rotate or flip them as a whole and save time editing the images one by one. I often use it to add small watermarks to a group of images I’m uploading to a clients website.

Time saved: 20 Minutes for a group of 20 images to an hour or more for a group of 100+.

Web Forms :: My Contact Form (http://www.mycontactform.com)
Web forms take time to build, time to style and time to test. I use My Contact Form because it offers all of these steps in one plus more options then I can easily code. The forms are highly customizable including things like adding attachments, multiple recipients, selecting a recipient and complete control over the look of the form.

Time saved: 30 Minutes to 1 hour per form.

CSS Text Boxes :: Rounded Cornr (http://www.roundedcornr.com/)
Once you have your rough draft laid out in CSS, and you need to start adding style, Rounded Cornr can save you a lot of time. Rounded Cornr quickly and easily creates images and CSS code for different box styles in an easy to use interface. It also offers an option to code it using only one image for all four corners, saving a minimal amount of bandwidth.

Time Saved: 10 Minutes per style.

Vectorizing Images :: Vector Magic (http://vectormagic.com/)
A lot of the time, I’m designing images using Photoshop. I do all of my logo work in Illustrator but I often find the need to convert another one of my designs to a vector so I can resize it without a reduction in quality. Vector Magic is a free online service that does this amazingly well. I was skeptical at first, but after answering a few short questions about my image, they were able to create a high quality vector image from my jpeg. Doing it by hand for complex images would take a lot of time and not turn out quite as precise.

Time Saved: 1-3 Hours per complex vector.

Selecting Color Schemes :: Adobe Kuler (http://kuler.adobe.com/)
This is one site you’ve probably heard of before, but I find it easier to use and with more advanced features then the other color scheme utilities available online. Add Adobe Air and use this tool even when you’re not connect to the internet. Kuler offers many premade color schemes as well that are an excellent source of inspiration for your website.

Time Saved: 5-10 Minutes per scheme over self-selection.

Creating a Patterned Background :: Stripe Generator (http://www.stripegenerator.com/)
A simple patterned background can add a much needed professional finish to your websites. Sometimes, if a site of mine is looking amateur despite clean design, all I need to add is a touch of design to the background. Stripe Generator, as it’s name implies, auto generates a striped background based on your input criteria. You can change all the colors and create a wide variety of non-distracting backgrounds.

Time Saved: 15 Minutes over creating it manually.

Building a Quick Photo Gallery :: Flickr Slidr (http://flickrslidr.com/)
First off, I’m partial to Thickbox, but it isn’t always the easiest to configure exactly as you like and can require use of other programs like the Multiple Image Resizer. Flickr Slidr creates a user controlled photo slideshow that pulls the pictures directly from your Flickr account. You can create a separate account for each project and spend much less time editing the look of the already well-designed gallery.

Time Saved: 25 Minutes over Thickbox.

Testing Your Website in Multiple Browsers :: Browser Shots (http://browsershots.org/)
It’s extremely important that your websites look good on all browsers (or at a minimum, all widely used ones). Most people don’t have very many browsers installed on their computer and even if they did, the time it would take to open your site in each browser would be huge. That’s where Browser Shots comes in. Put in your URL and choose all the browsers you liked to test for. Over 50 browsers are currently supported and you can even specify different screen sizes. Browser Shots then shows you a screenshot of what your website looks like in each browser.

Time Saved: 1-2 Hours if you choose all the browsers.

Stripe generators
• http://www.stripegenerator.com
• http://www.stripedesigner.com

Loader generators
• http://www.loadinfo.net
• http://www.ajaxload.info
• http://www.webscriptlab.com

Ribbon generators
• http://www.quickribbon.com
• http://www.websiteribbon.com

Tabs generator
• http://www.tabsgenerator.com

Corner generator
• http://www.roundedcornr.com
• http://wigflip.com/cornershop
• http://spiffybox.com

Speech bubbles
• http://www.bubblesnaps.com
• http://www.willmayo.com/2007/02/10/css-speech-bubbles

Badge generator
• http://www.freshbadge.com

Button generators
• http://kalsey.com/tools/buttonmaker
• http://tools.blogflux.com/buttonmaker

FavIcon generators
• http://www.degraeve.com/favicon
• http://tools.dynamicdrive.com/favicon

Feed icons
• http://feedicons.com

Reflection effect
• http://cow.neondragon.net/stuff/reflection/