Adobeair.me by Hosam Adel is an Adobe Air applications directory that has an extensive collection of applications based on Adobe Air - Adobe AIR is a cross-platform runtime environment developed by Adobe Systems for building rich Internet applications.

There are already services like Adobe Marketplace and Fresh Air Apps, but this new site feels more pretty, effective and easy to use. If you search for AdobeAir applications, then you should pay Adobeair.me directory some very serious attention.

To search the AdobeAir App directory, you have the options to browse applications on the homepage or browse through the categories and subcategories - or simply by using the search engine. Everything is presented in a well organized and appealing manner.

• Visit AdobeAir.me

If you by accident are searching for an easy-to-use and free tool to learn about the new CSS 3, search no more: CSS3 Maker is a new CSS 3 online code generator - to easily experiment with properties and values and generate a CSS stylesheet for your website.

CSS3.0 Maker offers in a stylish environment a set of tools to implement the styling ideas you might have, as you in the very same time can view browser compatibility through the conveniently displayed browser icons. This tool simplifies your CSS 3 coding process.

CSS3.0 Maker Features:

• Browser Compatibility Displayed For CSS 3 elements
• Border Radius
• Gradient
• CSS Transform
• CSS Animation
• CSS Transition
• Text Shadow
• Box Shadow
• Text Rotation
• @Font-Face

Not only that you can copy all of the CSS 3 code you build, you also have the choice or opportunity to download it as a ZIP archive as well.

If you visit this online tool, you can in the footer see some links to other coding tools. Take note of Only Css Menu - a collection of free CSS menus with source codes.

• Visit CSS3 Maker

It is almost a year ago since we did a more extensive listing on CSS tools, and on our Internet one year is a very long time. It is about time for a new serious roundup of tools that can be useful for both experienced web designers and novices of CSS.

Tools for edit, clean up, optimize, menu building, boxes and corners, sprites as wells as frameworks and Firefox plugins and much more are among the CSS tools represented in this list and we did a serious attempt to categorize them in an easy searchable way.

LIST CONTENT

• Check your CSS code
• Clean Up, Optimize and Compress your CSS
• Fonts & Text
• Build Menus
• Build Corners & Boxes
• Build Buttons
• Build Gradients & Sprites
• Build Grids & Tables
• CSS Editors
• CSS Cheat Sheets
• CSS Frameworks or Templates
• Firefox Browser Add-on’s
• Miscellaneous Tools

Cashrevelations.com presents for you 100 useful and time saving free CSS tools in a selection suitable both for experienced web designers and absolute novices of CSS.

Online CSS Tools

This listing represents CSS tools that might be practical and time saving for your design process (and it is by no means complete), but we also recommend you to make an own search if you don’t find what you are looking for on this specific listing of CSS tools.

Check your CSS code

1. CSSDesk - Online CSS Sandbox
CSSDesk by Pixelmatrix Design is a practical and useful online HTML and CSS sandbox. You can easily experiment with your Cascading Style Sheet and see the results instantly. You can also hide the code box for an even bigger preview.

2. CSS Validation Service
Check Cascading Style Sheets and (X)HTML documents with style sheets. The famous W3C CSS Validation Service is a free and well functioning software created by the W3C to help Web designers and Web developers check Cascading Style Sheets (CSS).

3. CSS Analyzer
This simple but handy tool helps you to check the validity of your CSS against the W3C’s validation service, along with a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.

4. CSS Check And CSSCheckUp
CSSCheck (and CSSCheckUp) is a lint to check the syntax, style, and accessibility of Web authors’ Cascading Style Sheets. Validates and checks into browser compatibility issues with your stylesheet. You can also check files on your computer (CSSCheckUp).

5. Website Colors Finder - AJAX Based mooColorfinder
This easy to use online tool extracts any color information, no matter if inline CSS, CSS files via import or link, and even if you have a master CSS file with references to other CSS files, and displays them as a color cloud.

Top

Clean Up, Optimize and Compress your CSS

6. Styleneat - CSS Organizer
This online tool organizes and standardizes your Cascading Style Sheet in a structure that makes it easier to define page areas and see how they relate to each other. There are some additional options like sorting CSS properties and selectors alphabetically etc.

7. Code Beautifier
Code Beautifier is an online tool by Arkikstudio (based upon the no longer maintained open source software CSSTidy) and it is a cleanly designed time saving Cascading Style Sheet formatter and optimizer - online CSS parser and optimizer.

8. Online CSS Optimiser/Optimizer
This practical online tool takes a Cascading Style Sheet file, and parses and outputs a leaner version, removing any redundancies and attributes which are not needed. This tool has also a couple of experimental options, and these are marked with a *.

9. CSS Compressor
According to the developer, this online Cascading Style Sheet compressor makes major changes to stylesheets and is still in development. This handy tool also offers quite many practical options and it is reasonably easy to use (even for a CSS newbie).

10. CSS Drive
Compress your Cascading Style Sheet to increase loading speed and save on bandwidth. You can choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression.

11. CSS SuperScrub
With this simple online tool you can significantly reduce the size and complexity of your Cascading Style Sheet by programmatically stripping unneeded code, stripping redundant calls, and intelligently grouping the remaining element names.

12. Format CSS
With this tool you can automatically format your CSS so they are easy to read and edit. Or use this tool to reorganize your CSS - you simply submit your cascading style sheet, and receive a suggested reorganization.

Top

Fonts & Text

13. CSS Type Set
CSS Type Set is an easy to use and hands-on typography tool allowing web designers and developers to interactively test or learn how to style their web content with CSS. This typography tool is one of the more nice and practical on Internet.

14. Typetester
The Typetester is a stylish online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

15. Font Tester
Font Tester is a free online font comparison tool with a bit messy appearance. It allows you to visually compare fonts side by side with different CSS font styles applied. Useful for web developers who are looking for just the right font styling to use in their pages.

16. Typechart
Typechart is a logically built online tool that lets you flip through, preview and compare web typography while retrieving the CSS. You easily browse through typographic styles and when you find one you like, you just download the CSS.

17. CSS Typoset Matrix
A matrix table (only in German) by Jan Quickels that calculates font sizes and margins for various base font sizes — in pixel and em units. It computes both symmetrical as well as asymmetrical margin and CSS Typoset Matrix also generates the source code.

18. The Box Office
The Box Office lets you wrap, float or contour text around freeform images using CSS for usage in (X)HTML pages. Using The Box Office tool is very easy - just be sure to check the examples section of this site to read some tips and tricks or view some samples.

19. CSS Text Wrapper
The CSS Text Wrapper is an online tool that allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges on the tool.

Top

Build Menus

20. CSS Menu Builder
With this tool you can create a standard compliant xhtml/css menu for your website for free via the online navigation generator. It contains more than a 1000 horizontal, vertical and breadcrumb menus via the CSS Menu Builder. The page downloads a bit slow.

21. CSS Menu Generator
Provide the average webmaster with tools to create custom, cross browser compatible website menus. The menu generator makes it easy to create custom CSS menus without having to know all the complicated HTML and CSS.

22. Visual CSS QuickMenu
This extensive and practical online tool offers a solution for generating fast and feature rich drop down menus. It produces fast clean Cascading Style Sheet list based menus, even capable of functioning in browsers with the JavaScript disabled.

23. CSS Menu Generator - MyCSSMenu
This online tool helps you to create a custom, cross browser compatible CSS menu. It makes it easy to create web navigation - horizontal, vertical, drop-down menu - without having to know all the complicated HTML and CSS.

Top

Build Corners & Boxes

24. CSS3 Generator
This online multi-tool by Randy Jensen generates cross-browser CSS3 snippets that you can use right away on your website. Apart from border radius, you can also get snippets for box shadow, text shadow, RGBA and more. You can preview the code in a sandbox.

25. CSS Border Radius - Generator
This very easy to use online tool by Jacob Bijani helps you to create stylish and good looking curved corners (border-radius) for your web page. You just fill in (in the corners, where default is 0) how many pixels you wish the border radius to be.

26. RoundedCornr - Rounded Corner And Gradient Generator
This practical and easy to use online tool generates the necessary CSS/HTML code and images to decorate your web site with some stylish rounded corners and maybe a nice gradient. The RoundedCornr page itself is built with this tool.

27. CSS Corners - CSS3 Gradient
This is a simple online tool by Cgosborne that allows you to create some nice CSS3 corners and gradients (also CSS3) without even thinking about the current syntax. You can also see a little preview of the corners or gradients on the page.

28. Rounded CSS Boxes
Rounded CSS Boxes are an easy to use and pedagogic online tool that generates images, HTML code, and Cascading Style Sheet code to create some stylish rounded boxes. It produces boxes which scale perfectly and blend smoothly to the background color.

29. CSS Rounded Box Generator
This simple online tool generates customized CSS and HTML for rounded corner boxes. This tool does not offer so many options and has a simple appearance, but it is easy to use and does what it promise to do - generate code for rounded boxes.

30. Cornershop - Rounded Graphics For CSS Box Corners
This online tool generates customized rounded corner graphics and code for Cascading Style Sheet and HTML. You can customize the background color, corner radius and transparency settings for the round cornered graphic.

31. CSS3 Please - The Cross Browser CSS3 Rule Generator
With this online tool you can generate and test CSS3 rules. You can edit the underlined values in the CSS file on the page, and you don’t need to worry about if the corresponding values match, that is all done automatically for you.

32. Spiffy Corners - Purely CSS Rounded Corners
Spiffy Corners is an easy to use online tool to generate the Cascading Style Sheet and HTML you need to create fashionable anti-aliased corners for your web page - and all that without using images or JavaScript.

33. Spiffy Box - Simple Rounded Corner CSS Boxes Made Easy
With this little handy online tool you can automatically and easily generate images and code and for rounded corner Cascading Style Sheet boxes to use in your own web page project. You create your rounded corner box in four simple steps.

Top

Build Buttons

34. Button Maker
Button Maker is a CSS3 button code generator - the tool is actually a demo for a project by Chris Coyier on CSS-Tricks, and you can download the source code. You can preview your button on the left, and customize it on the right control panel.

35. HTML And CSS Rounded Corner Button Generator
This easy to use online tool generates rounded button images (and compatible Cascading Style Sheet code) with different radius, different color and different hover color. You can see examples of generated buttons HERE and HERE.

36. CSS Buttons - Plug And Play Solution
CSS Buttons is the plug and play solution for web designers and developers looking to use accessible and flexible buttons on their web pages. It allows the busy designer to quickly implement consistently looking, cross-browser, buttons regardless of the element used.

37. CSS Button Designer
CSS Button Designer is an easy to use (but not pretty, with a bit irritating ads) online tool from PageTutor for creating and styling HTML buttons with Cascading Style Sheets and JavaScript effects. Not for advanced coders, but for CSS beginners.

38. Navigation Tab Menu Generator CSS
With Tabs Generator you can create navigation tabs with border, gradient, orientation and more. Tweak size, colors, corners and generate your design, then download and use it in your CSS style sheet. Easy to use.

Top

Build Gradients & Sprites

39. Quick 3-Color CSS3 Gradient Generator
This easy to use online tool helps you to create 3-color CSS3 gradients. You simply start by entering three colors. When you have done that you will be presented three styles of gradients. Just copy and paste the code next to the style you like into your stylesheet.

40. CSS3 Gradient Generator
This online tool helps you create CSS gradient codes - it provides a simple graphical user interface for working with CSS webkit gradients, allowing a user preview real time what their gradient will look like and provide the code for the gradient.

41. CSS Sprite Generator
This online tool allows you to automate the process of generating CSS sprites. Simply give it a ZIP file containing 2 or more images and it will generate a sprite image and the corresponding CSS rules to target and display each component image.

42. CSS Sprites - Online CSS Sprite Builder
CSS-Sprites is an online CSS sprites builder or generator written by Nicolas Crovatti. This tool can, given a few image files, generate a clean image sprite with corresponding valid CSS and XHTML code along with an optional hover processing for rollover effects.

43. SilkSprite Blueprint Plugin
Silk Sprite is a nifty Blueprint Cascading Style Sheet plugin providing the Popular Silk Icon Package in CSS Sprite form to improve performance and ease of use. Silk Sprite is Based on the popular Silk Icon Set by Mark James.

Top

Build Grids & Tables

44. nP Grid Generator - Build Your Own Custom CSS Grid
With this easy to use online tool by netProtzo you can design and generate an attractive layout structure, clutter and margin sizes, specifying the number of columns and more. As a result you will get a user friendly commented Cascading Style Sheet.

45. GRIDINATOR - Grid Generator
With the clean and simple online tool you can generate grids for the tiny 1KB Grid, the practical 960.gs, Golden Grid - or you simply could generate a basic generic grid. There is demo versions of the fixed, fluid and elastic layouts available on the site.

46. Blueprint Grid CSS Generator
This handy tool will help you generate more flexible versions of Blueprint’s grid CSS and compressed CSS and grid PNG files. Whether you prefer 8 to 24 columns in your design, this generator now enables you that flexibility with Blueprint.

47. CSS Grid Builder
The CSS Grid Builder from Yahoo! The CSS grid builder is a simple web based interface for quickly creating any number of layouts that rely solely on YUI’s CSS files. The YUI Library is a set of utilities and controls, written with JavaScript and CSS.

48. Grid Designer
This is an online tool by Rasmus Schultz for designing grids and typography styling. Using this tool should not be difficult (most of the functions are pretty self-explanatory) - if you are familiar with grids, a little bit of design and some basic typography.

49. ZURB CSS Grid Builder
This practical online tool helps you create grids faster and easier. You just specify how many columns you want and the column width and gutter width you wish to have. You have also a live preview of how your grid will appear.

50. Variable Grid System
This logic and easy to use online tool by David White allows you to easily generate an underlying Cascading Style Sheet grid for your web site. The Cascading Style Sheet generated file is based on the famous 960 Grid System.

51. The 1KB CSS Grid
This is a simple tool (based on the 960 Grid System) that generates lightweight CSS grid. The basic configuration is a 12 column grid system spread out over 960 pixels. It can for example be used to streamline page templates for content management.

52. Grid System Generator
This tool generates grid systems in valid css / xhtml for rapid prototyping, development and production environments. The grid system generators offer the ability to customize the width, no. of columns and margin(s) to allow more flexibility for various designs.

53. XHTML/CSS Markup Generator
This simple but effective online tools (by Michal Stempien) main purpose is to speed up your work by generating XHTML markup and a Cascading Style Sheet frame out of very intuitive, shortened syntax so you can jump directly to the elements styling.

54. Boks
Boks is an AIR application that provides a user Interface for Blueprint CSS’s framework. It handles grid configuration, baseline rhythm pimpin’, Cascading Style Sheet (without or with compression) and grid.png export, HTML layout and much more.

55. HTML Table Generator With CSS
The HTML Table CSS Style Generator allows you to tinker with different settings and allows you to see the results immediately. Using the table generator can be helpful if you know your stuff, or you are just learning about coding tables.

56. CSS And XHTML Table Generator
With this practical online tool by Corey Campbell you can create valid CSS and XHTML tables. You can set all basic options (like width, columns, rows, cell padding and more) and you have also the possibility to preview your table.

Top

CSS Editors

57. Drawter - DrawAble Markup Language
Drawter is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your site’s code. You can work in draw mode or edit mode - and set page details like page doctype, page title and language.

58. CSS Mate
This is an interactive online CSS editor to design your own CSS styles. The CSS editor is divided into 5 areas (menu, attributes, selection values, preview and code) and you use the menu on the top to select the type of parameter you want to change.

59. Sky CSS
Skye CSS is an online CSS authoring tool (and not the most stylish one but easy to use), that allows you to create CSS classes almost without using manuscript code. You need a JavaScript compatible browser for proper functioning.

60. YAML Builder
The YAML Builder is a small tool for visual rapid development of CSS layouts, based on the (X)HTML/CSS framework “Yet Another Multicolumn Layout”. The application supports all core features of the framework and helps you to create bulletproof CSS layouts.

61. CSS Layout Generator
This tool is a generator that will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages. The generator requires a DOM capable browser with JavaScript enabled.

62. WordPress Theme Generator
This online generator (excellent for coding beginners) creates your own unique custom WordPress theme. Without any need for CSS, HTML or PHP knowledge - and it supports WordPress 2.1 to the new Wordpress 3.0 Themes.

63. CSS Generator
A simple CSS generator that dynamically applies styles as you select them. You can then temporarily apply your chosen styles to another web page. This could be a great tool for beginners experimenting with Cascading Style Sheets.

64. Layout Generators
This tool is a Multi-column layout generator, that lets you generate up to five column liquid and fixed layouts using percentages, pixels or em. The code is delivered with both the HTML and Cascading Style Sheet.

65. Page Maker
CSS Source Ordered Variable Border 1-3 Columned Page Maker. The Page Maker is ready to take your code to make your own style using graphics. You can put 3D effect boxes in the header or footer and sidebars and more.

Top

CSS Cheat Sheets

66. CSS Cheat Sheet (V2) - Added Bytes
The CSS cheat sheet is a one-page reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.

67. CSS2 And CSS3 Help Sheets - GoSquared
This resource by GoSquared is a visually appealing and well structured as well as practical CSS2 and CSS3 (new) overview. According to GoSquared, they have covered most of the basic options possible for the moment with CSS3.

68. CSS Shorthand Cheat Sheet - Eddie Welker
This handy cheat sheet contains all of the cases where a CSS property has a shorthand notation. Added to the sheet is the obscure and rarely implemented outline and outline variations, as well as the Aural pause and cue properties (respecting accessibility).

69. CSS Cheat Sheet - Pxleyes
This cheat sheet includes the following sections: selectors, the box model, positioning, text and fonts, borders and lists, and a bit of miscellany that comes in handy every once in a while. It can be printed on an A4 (standard) sheet of paper.

Top

CSS Frameworks Or Templates

A Cascading Style Sheet framework, is a prepared library that makes styling of a web page a lot easier and faster - CSS frameworks package a number of ready made options for a more standards compliant designing and outlaying of a web page.

70. Drop-Down Menu Framework
This is an easy to use CSS drop-down menu framework - and the developers describe it as a clean, free, standards-friendly, cross browser framework for CSS menus. It contains 14 customizable templates for designing drop-down-menus.

71. Blueprint
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

72. Yet Another Multicolumn Lay
YAML is an (X)HTML and CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users. It is focused on web standards and accessibility.

73. 960 Grid System
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

74. Fluid 960 Grid System
The Fluid 960 Grid System templates (for interactive prototyping, covering main design elements) have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools and jQuery JavaScript libraries.

75. Elements
Elements is a collection of folders and files that helps you work faster. It was made to fit into your existing work-flow, or be its own work-flow. From client files to design to code to getting out on the web, Elements is with you through out the entire process.

76. BlueTrip CSS Framework
This is a full featured Cascading Style Sheet framework which combined the very best of Blueprint, Tripoli (hence the name), Hartija’s print stylesheet, the 960.gs’s simplicity and Elements’ icons. It gives you a sensible set of styles and a common way to build a site.

77. YUI Grids CSS
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.

78. Emastic
Emastic is a Cascading Style Sheet framework hosted on Google Code. The Emastic mission is (described by themselves): to explore a strange new world, to seek out new life and new Web spaces, to boldly go where no CSS framework has gone before.

79. More CSS
This is a lightweight JavaScript library (or framework) with CSS syntax for common things: creating popups, tab menus, list styling, AJAX file inclusion, hyphenation and more. If you know Cascading Style Sheets you already know how to use MoreCSS.

80. Project Deploy
Deploy is a free, open source, online tool which allows users to quickly deploy a web project framework in only a couple seconds. It offers a couple unique features from other project folder downloads, but the most unique is bookmarking.

81. Nice And Free CSS Templates
This easy to use online resource contains free Cascading Style Sheet templates for your website - you just copy and paste and there you have a cool layout for your web site. All the CSS templates are XHTML 1.0 and CSS2 and table-less.

82. Layout Gala - A Collection Of 40 CSS Layouts
This online resource contains a collection of 40 CSS layouts - each of the layouts with valid code, without hacks and a good cross-browser compatibility and represents a site with five main sections: header, content, navigation, other stuff and footer.

83. CSS Layouts - Code Sucks
This online resource by Code Sucks contains a collection of 53 fixed width CSS layouts and 42 Faux column CSS layouts. All markup has been validated against a strict Doctype. These CSS Layouts are made for screen resolutions for 1024 x 764.

84. Fluid Width Layout Templates
This nice online resource by the always so useful and in other ways excellent CSS-Tricks contains an extensive collection of numerous fluid-width layouts and other Cascading Style Sheet and JavaScript downloads.

85. Object Oriented CSS
Object Oriented CSS allows you to write fast, maintainable, standards-based front end code. It adds predictability to Cascading Style Sheet so that even fresh beginners can participate in writing beautiful websites.

Top

Firefox Browser Add-on’s

To use these CSS tools you need a Firefox browser. You should consider to download one, in case you don’t use it already. It will make your work faster and easier if you plan to continue to stylish and build web pages. You can download it for free HERE.

86. CSS Reloader
CSS Reloader is a browser extension for Mozilla Firefox and Google Chrome, that allows you to reload all the CSS of any site without you have to reload the page itself. Uses the keyboard shortcut F9, or the context-menu’s option “Reload CSS” to reload the CSS files.

87. CSS validator
Validates a page using the excellent W3C CSS Validator. Adds a non-intrusive option to the right-click context menu and also to the Tools menu to allow for easy validation of the CSS of the current page. Opens the results in a new tab.

88. Phoenix
An editor with real time syntax highlighting which allows edit, run and test CSS, HTML and JavaScript code. Tell you how many CSS and JS files are loaded into a page, and how big these are, and it will also let you easily edit, pack and de-obfuscate them.

89. Firebug
Firebug integrates with the Firefox browser to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript - modify style and layout of any web page of your choice in real-time.

90. EditCSS
Stylesheet modifier in the browser sidebar. The EditCSS project ought to be an easy way for web developers to edit and modify currently loaded stylesheets. EditCSS is based on a bookmarklet created by Jesse Ruderman (Edit Styles).

91. Dafizilla ViewSourceWith
With this handy tool you can view page source with external applications and open page source as DOM document, open CSS and JS files present on page and more. This tool is also available for Seamonkey, Flock, Songbird and Netscape browsers.

92. CodeBurner For Firebug
CodeBurner is an add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. The core functionality is centered around a Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties.

93. Firefinder For Firebug
Firefinder by Robert Nyman is an extension to Firebug, and offers the functionality to find HTML elements matching chosen CSS selector(s) or XPath expression. You can also auto select elements when hovering or via the context menu.

94. Font Finder
Font Finder is designed for any web designer that needs to find out the CSS information of any text on the page. Simply highlight a single element, right-click and select `Font Finder`, then marvel as the full CSS text styling of the selected element appears.

95. CodeBurner For Firefox
CodeBurner for Firefox provides searchable reference information and code examples for HTML and CSS. It’s a standalone version of the original CodeBurner for Firebug, but with an independent interface, and more dedicated search tools.

96. Dust-Me Selectors
Dust-Me Selectors is a Firefox extension that finds unused CSS selectors. It extracts all the selectors from all the stylesheets on the page you are currently viewing, and then analyzes that page to see which of those selectors are not used.

97. CSS Usage
CSS Coverage is an easy to use extension for Firebug which allows you to scan multiple pages (stylesheets) of your site to see which CSS rules are actually used in your site. This practical tool is a good addition to Firebug’s list of functions.

Top

Miscellaneous Tools

And last but not least (if you for example getting nuts with form styling), a little group of miscellaneous CSS tools that can be time saving in your work with styling a web page.

98. FAARY - Online CSS Form Generator
Faary is an online tool that makes it easy for you to generate CSS forms without writing code - and they will look far better than a plain HTML form. There are not many styles and options to choose from, but if you can a bit CSS it will be easy to customize.

99. Browser Support of CSS Properties And Selectors
This is a list (by CSS Creator) of Cascading Style Sheet properties and selectors with the first browser versions that support them. The list includes most CSS2.1 properties and some of CSS3, and even more will be added later.

100. Conditional CSS
Write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers - you can target CSS to any web-browser. To get started, use the compiler to download a version suitable for your server platform.

101. Replace CSS Colors
This very easy to use online tool enables you to change the entire color scheme without going through the CSS code. You just choose local CSS file, replace colors you want - and download the new and fresh Cascading Style Sheet file.

102. DtCSS
DtCSS is a PHP script (hosted on Google Code) that preprocesses your Cascading Style Sheet file. It speeds up CSS coding by extending the features to CSS - such as nested selectors, color mixing and more. It reads the file with special syntax written for DtCSS.

103. CSS Inliner Tool
With this online and handy inline conversion tool by MailChimp Labs you can automatically transform all of your local styles into inline styles. Useful for those thinking writing CSS inline is time consuming and incredible repetitive.

Top

The CSS tools are not in any particular rating order. A CSS tool on place number 45 is not less valuable, than a tool on place number one. What is a really useful CSS tool, depends in the end on your specific needs, what you need to build your web page. Good luck with your CSS styling - and we would also like to take this opportunity to inform you that we on Cashrevelations.com are not affiliated with any of the tool authors.

You can enhance and feed your design skills and inspiration by surrounding you with a suitable mental environment, and the design sites below will, for a short moment anyway, provide you with that environment - they are a source of inspiration and knowledge.

We have chosen out these particular design sites not only from the criteria that shall be interesting, but also that they shall be truly inspirational and with tips and tricks both for pure amateurs and advanced professionals. Attractive site design is only an extra plus.

Cashrevelations presents 12 inspirational and knowledge filled sites about web design and design in general, you shouldn’t miss to take advantage of in your own web endeavor.

12 Useful And Inspirational Design Sites

Aext - Design Magazine

Aext is a design magazine that publishes all things web design. All the articles on Aext are published by web professionals for web professionals featuring practical tutorials, industry insights, collections and other useful web resources for dedicated web professionals.

AcrisDesign - Web Design Resources & Inspiration

AcrisDesign is a blog by the Internet lover Vikas Ghodke from India, dedicated to web designers and Internet geeks in general. Here you will find topics related to web design, web development, purely inspirational post and various web resources.

DesignersCouch - Designer’s Group

Designers Couch is a platform for the professional and creative design community, who wishes to showcase their portfolio on a professional platform, network with some of the industry’s best, and seeks inspiration and knowledge from their peers.

DesignCritique - Another Perspective in Design

DesignCritique randomly gives critique on any media of design - web and graphic design, motion and advertising. It allows us to stay sharp in our knowledge of design, learn and assess choices of other designs to give you an important different perspective.

Inspired Magazine - Daily Graphic Design Inspiration

Inspired Magazine is a part of the rapidly growing Smashing Network, and the huge and self proclaimed aim is to be a daily inspiration source for web designers, serious Twitter addicts, illustrators, iPhone lovers, and other creative humans dedicated to design.

Designcollector Network

Designcollector started in April 2003 as one of the first, if not the very first, Russian blog dedicated to web design sites. A place to get inspiration and catch up the recent trends in graphic design, motion-graphics, flash, web design, photography and fashion.

FormFiftyFive - Design Inspiration

FormFiftyFive is an innovative design site, founded in 2005 by an ever growing group of young designers and vagabonds eager to collect and share the best design work they came across, FormFiftyFive soon became an international showcase of creative work.

Unmatched Style - Web Design Inspiration & Gallery

Unmatched Style provides constructive design criticism as well as provides inspiration to web designers. They encourage you to submit any site that you feel is worthy of being listed on Unmatched Style and showcased in their huge gallery of quality design.

Abduzeedo - Graphic Design Inspiration

Abduzeedo is a quality blog about design by Brazilian designer Fabio Sasso. There are all sorts of articles for those who want to look for inspiration. Also you will find very useful tutorials for the most used applications out there (including Photoshop and Illustrator).

VisonwidGet - Visual Design Art Small Magblog

VisonwidGet is a website entirely dedicated to visual design art and cover topics related to web design, graphic design, web and graphic tutorials, nice galleries and showcases, inspiration, Photoshop, WordPress and other various resources from the design area.

Design Instruct - For Designers & Digital Artists

Design Instruct is a magazine for active designers and digital artists where you can find and learn design tips and tricks. Apart from general design resources, the magazine also features tutorials from top designers and digital artists from around the world.

Web Design Core

Web Design Core is a platform that offers inspirational resources for web designers and developers. They have an extensive collection of amazing web designs, graphics, useful techniques, helpful and practical illustrations and tutorials to guide you step by step.

We warmly recommend these design sites because of the huge and useful knowledge and inspirational qualities they represent. Your web projects will benefit from visiting them.

We were in need of a stunning font for a project. So, we searched on the huge Internet. From some of those fonts we found when we did our research, we made something we would like to categorize as “a little selection of free and fresh quality fonts for your next web project”. In this short article Cashrevelations.com presents some fonts we think could be useful in various web projects.

Cashrevelations.com hereby presents a selection of 10 fresh, good looking and free quality fonts you can use for your private or commercial web project.

10 Free Quality Fonts

All the fonts presented here are free, but be sure to read the license agreements before using the fonts. Usually you find the license packed inside your font download.

1. PT Sans - by Alexandra Korolkova & Olga Umpeleva & Vladimir Yefimov
PT Sans family was developed as a part of the project Public Type of Russian Federation. The fonts of this project have open user license and can be freely distributed. [...]

2. Fabryka 4F - by Sergiy Tkachenko
S. Tkachenko recently released the monospaced font family Fabryka 4F. Number of glyphs covers major Latin based languages and Cyrillic. One weight in two styles is free [...]

3. Orbitron - by Matt McInerney
Orbitron is a geometric sans-serif typeface intended for display purposes. It features four weights, a stylistic alternative, small caps, and a ton of alternate glyphs. [...]

4. Scriptina Pro - by Fredrick Nader & Roger S. Nelsson
Based on Scriptina by F. Nader. After first cleaning up the outlines, spacing and kerning, Scriptina Pro has been expanded with a set of alternate letters without the loops and swashes, using the OpenType contextual alternates feature [...]

5. Cantarell - by Abattis
The typeface is designed as a contemporary Humanist sans serif, and was developed for on-screen reading; in particular, reading web pages on an HTC Dream mobile phone [...]

6. Glidesketch - by Alexander Nedelev & Veronika Slavova
Elegant custom font with rounded corners, great for logos, posters, motion graphics and t-shirts. The name is inspired by the sleek curves and its smooth look [...]

7. Ripe - by Cameron Sweeney
A Geometric Postmodern slab serifed face. The serifs feature simplistic rounded terminals and its stroke is uniform. Its subtle differences are clear enough to be easily red at both high and low resolutions, perfect for print, web and screen media [...]

8. Wee Bairn - by Ray Larabie & Chikako Larabie
A revival of a rare Larabie Fonts typeface. Many characters have been redrawn. Spacing and kerning have been rebuilt and the character set has been expanded [...]

9. Raleway - by Matt McInerney
Raleway is a sans-serif typeface, designed in a single thin weight. It is a display face that features both old style and lining numerals, standard and discretionary ligatures, a pretty complete set of diacritics [...]

10. Sketchetik Light - by Ossi Gustafsson
The font Sketchetik by Ossi Gustafsson on Hiekka Graphics is a hand-drawn font in four styles: light, regular, bold and black. It is recommended for use as display typeface. Only the font Sketchetik Light is free [...]

The fonts are not in any particular order whatsoever and you decide what font fits best for your project according to your personal taste or professional demands - and again we point out that Cashrevelations is not affiliated with any of the authors.

Last week the World Wide Web Consortium (W3C) released the latest HTML5 and HTML5 Differences From HTML4 working drafts. HTML5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML. If you are interested you can see the WHATWG Editor’s draft HERE.

HTML5 - W3C Working Draft 4 abstract:

This specification defines the 5th major revision of the core language of the World Wide Web: the Hypertext Markup Language (HTML). In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability.

• HTML5 - W3C Working Draft 4 March 2010

HTML5 differences from HTML4 abstract:

HTML5 defines the fifth major revision of the core language of the World Wide Web, HTML. “HTML5 differences from HTML4″ describes the differences between HTML4 and HTML5 and provides some of the rationale for the changes. This document may not provide accurate information as the HTML5 specification is still actively in development. When in doubt, always check the HTML5 specification itself.

• HTML5 differences from HTML4 - W3C Working Draft 04 March 2010

The working drafts above are released (2010-03-04) and copyrighted by W3C (MIT, ERCIM and Keio) under the W3C Document License.

Image: Svilen Milev

HTML 5 and CSS 3 are the close future of web-design and as we wrote before, the arrival has been somewhat noisy and well debated amongst developers. According to the W3C Working Group own timetable, it is estimated that HTML5 will reach W3C Recommendation status by the last quarter of 2010. But already today you can use HTML 5 and CSS 3.

Now is a pretty good time to begin to take in the new, and begin to practice on the HTML standard that will be in a close future. Therefore, Cashrevelations.com put together some recourses that will provide you with an opportunity to start using HTML 5 in an easy way.

5 HTML 5 Startup Recourses

1. 52framework - HTML 5 And CSS 3 Framework
The absolutely easiest method to make an HTML 5 site (or any type of site) is to begin from a framework. A good recourse is the user contributed and maintained 52framework (the first framework for HTML 5 and CSS 3). This new framework contains the most useful elements (or tags) of HTML 5 and CSS3. The 52framework also exist on Google Code as a project. You can read about all the features of 52framework right HERE.

2. Coding An HTML 5 Layout From Scratch - Smashing Magazine
Enrique Ramírez wrote a comprehensive (and logically explained) tutorial on HTML 5 and CSS 3 for Smashing Magazine, and even if the author writes that “HTML5 is not for everyone” you shouldn’t be discouraged by that. This tutorial together with the above 52framework will do at least 60% of the job for you. The final result of this tutorial is a simple (but potentially useful) layout - and you can see the final product (layout) here.

3. HTML5 Glossary - References Of Elements in HTML 5
HTML5 Doctor is a site that publishes articles relating to HTML 5 and it’s semantics and how to use them already now. This site has a comprehensive references of elements that are new or have been redefined in HTML5, presented in a nice and pedagogic way. There is also a section of the site, Ask The Doctor, where you can ask about HTML 5. Be sure to visit their Article Archive - it contains highly useful information for HTML 5 novices.

4. HTML 5 Cheat Sheet
Veign, a website design and development company, has released a 4 pages long HTML 5 guide that you can download for free in PDF format. This practical HTML 5 reference lists all tags supported in the current HTML 5 specification. Tags, tag attributes and a listing of tags removed in HTML 5 (and valid in HTML 4) are all listed in a Cheat Sheet format. You can find other good versions of HTML 5 Cheat Sheets right HERE and HERE.

5. CSS 3 Cheat Sheet
CSS level 3 is still under development and if you are interested of the progress the W3C maintains a bit complicated CSS 3 progress report called Current Work. The so practical Veign (again) has released a CSS 3 guide that you can download for free in PDF format. In this CSS 3 Cheat Sheet you can see the new properties, selectors and allowed values that are being introduced in the new CSS 3 standard.

There is more useful additional recourses on HTML 5 and CSS 3 on the web. Two of them we would like to recommend already here: CSS3 Info, an online resource covering CSS 3, and HTML5 Gallery, a showcase of sites using HTML 5 markup.

Image: Flavio Takemoto

Smashing Magazine published today an interesting article about modern navigation design trends. Today menu design is becoming more and more complex and advanced. Gone are the days when a simple underlined blue link would do as a perfectly alright menu. If you are in need of tips or inspiration for your next design project, then you should read the Smashing Magazine article.

Smashing Magazine: The design of a navigation menu has to be outstanding in order to sustain the user’s interest. As the adage goes, “Content is king,” but getting to the content requires navigation. We’ll be explore some of the more recent trends in navigation design. We’ll look at the aesthetics that recur in today’s best Web designs.

• Showcase Of Modern Navigation Design Trends

crearegroup: Nick and Michael from the Creare Group discuss the advantages of having a lean CSS file. They also go on to show some simple optimization techniques followed by a song to remember the process.

Creare Group is a web design and Internet marketing studio that specializes in web design, website optimization and marketing. On their YouTube channel you can find more interesting video tutorials on web design, SEO and related topics.

The Automated Online Alternative

Like with so many other things nowadays, CSS optimization and cleaning up can be done automatically with some of those various online web services, completely free of course. Below you find some handy online CSS resources that will do the work for you.

1. Code Beautifier
Code Beautifier CSS Formatter and Optimizer - Online CSS parser and Optimizer.

2. CSS Redundancy Checker
Use this tool to find CSS selectors that aren’t used by any of your HTML files and may be redundant. Manually enter the URI for each page that you want to test.

3. Online CSS Optimizer
Online CSS Optimizer is a web tool for reducing the file size of cascading style sheets. The result might look messy sometimes, so be sure to back up your original file before using the optimized one.

4. Format CSS
Automatically format your CSS so they are easy to read and edit. You can use this tool to reorganize your CSS. Simply submit your cascading style sheet, and you will receive a suggested reorganization.

5. CSS Validation Service
Check CSS and (X)HTML documents with style sheets. The W3C CSS Validation Service is a free software created by the W3C to help Web designers and Web developers to check Cascading Style Sheets.

If you are interested of further improvement of your CSS, Cashrevelations.com has collected some CSS resources you can use for free: 60 Tools To Optimize Your CSS.

Using a matching color palette is an easy way to bring some professional and appealing look to your website design. But usually the problem is to choose out the colors to use and many also feel overwhelmed to learn in the amount of information about color theory’s - and others simply don’t have taste.

Don’t worry. As usual, the help is out there, on the Internet.

If you search “color in webdesign” on Google you will get a huge result of resources of various quality - and in a normal Google manner a lot of them are really bad and a waste of time. One of the resources stand out: COLOURlovers - Color Trends + Palettes.

COLOURlovers: “A resource that monitors and influences color trends. COLOURlovers gives the people who use color - whether for ad campaigns, product design, or in architectural specification - a place to check out a world of color, compare color palettes, submit news and comments, and read color related articles and interviews”.

This resource helps you in an easy way to find a color palette for your website and they have a huge selection to choose from. You can for example go in on an individual palette you like and see the HEX and RGB values for each of the colors.

There is also the possibility to see what palettes are popular amongst other users and different color trends - everything presented in a way to make it easier for you to choose your own color palette, or maybe even try to compose one by yourself.

COLOURlovers is an international community of designers and artists of all kinds who search for color inspiration, ideas and feedback - and the registration is completely free.

The video above is by cgorrill, and he has other videos about webdesign worth a look.

• COLOURlovers - Color Trends + Palettes