It is about four weeks ago I got my brain bleeding (Stroke) and I feel all right now. Strange enough, it was not so dramatic as I had imagined – of course it makes some difference, everything goes slower and my concentration is not on the top and to meet the own mortality sure makes you think.

Things that were important for me before, don’t touch me anymore. HTML5, CSS3 or whatever, don’t seem so essential for me – I suppose it take some time to be back in a normal state after a stroke. It is a struggle to get back what I had before, I need to reclaim my everyday life. Practically, for the part of this blog, it will mean that it will be more time between my blog postings. I am also hoping to find some suitable guest-bloggers.

Two new online tools were released during early March which embrace some of the great possibilities of the rapidly emerging CSS3. CSS Warp and CSS3 Generator are practical tools for web designers or web developers that will simplify relatively complicated coding.

Already today many major browsers support CSS3. If you want to know the status of browser support for CSS3, then you can read Louis Lazaris as he cleverly summarizes where CSS3 stands as far as browser support goes. For other CSS3 news, go HERE.

CSS3 Generator and CSS Warp are completely free to use and require no registration. Both tools are easy to learn and CSS Warp even offers an instruction on how to use it.

CSS Warp – CSS3 Text To Path Generator

CSSWarp by Dirk Weber is an online tool for “warping” HTML text directly in your browser. As the developer describes, it will apply text transforms to your CSS in a way that you will have native text in an HTML page that looks as if it were created with Illustrators attach to path tool. Read the developers very own presentation of this handy tool.
Visit CSS Warp…

CSS3 Generator – CSS3 Gradients Generator

This online tool by Peter Funk and Eric Hoffman is a user friendly CSS gradient generator. The settings panel allows you to select the gradient colors, colors for the background and border – and you can also easily modify border radius, box shadow and opacity level. The generated code can be copied – optionally with or without minimal support for IE 7 and 8.
Visit CSS3 Generator…

Take also some time to visit Eleqtriq, the blog of the creator of CSS Warp (Dirk Weber – designer & web developer), there are some interesting and useful articles you can read.

First Image: W3C

This is our first real roundup of CSS techniques, although we wrote some articles about CSS tools. This time we choose to concentrate on some fresh and useful CSS3 tutorials.
Our definition of new and fresh CSS3 tutorials includes publication during actual period – and in our specific case the period is between October 1 and December 1 this year.

Note: Chris Coyier investigates in an article a number of different techniques for accomplishing fluid width equal height columns: Fluid Width Equal Height Columns

Cashrevelations.com presents a selection of new and fresh CSS3 techniques – 10 brand new CSS tutorials released during the period of October 1 until December 1 this year. All these interesting CSS3 techniques are presented with demo.

10 New & Fresh CSS3 Tutorials – December 2010

1. CSS3 Mega Drop-Down Menu
In this pedagogic tutorial by Guillaume Marty you will learn how to build a cross-browser, awesome and impressive CSS only drop-down mega menu, using nice CSS3 features – an effective solution to display a lot of content while keeping a clean layout.
View Demo

2. Flip Effect by Using CSS3
In this tutorial by Sam De Decker (aka DemiNoodle) you will learn how to create a stylish flip effect just by using the transform property – when the card is hovered, a webkit transform of rotateY is added, which rotates the object 180 degrees on the Y axis.
View Demo

3. CSS3 Animated Dropdown Navigation
In this tutorial by Eric Bannatyne you will learn how to build a pure and simple CSS3 animated dropdown menu. One advantage with this method is that you don’t need a browser that supports CSS3 transitions, your menu will work perfectly fine anyway.
View Demo

4. CSS3 Animated Bubble Buttons
Learn how to create a useful set of animated buttons with the power of CSS3′s multiple backgrounds and animations. With this button pack, you can easily turn any link on your page into an animated button by just assigning a class name.
View Demo

5. CSS3 Slideup Boxes
In this video tutorial (screencast) by Chris Coyier you will learn how to create a few very simple CSS3 transitions to create a “slideup” box effect. Hover with your mouse, and the title slides out of the way and a descriptive box of information jockeys its way into place.
View Demo

6. Natural Object-Rotation With CSS3 3D
In this tutorial by Dirk Weber you will learn how to build a 3D packshot in HTML and CSS by applying some CSS 3D-transforms. Works in Chromium or Safari – the packshot will also work nicely in Safari for iOS-platforms like iPhone or iPad.
View Demo

7. CSS3 Floating Follow Tab With Rollover Effects
In this easy to follow tutorial by Matt Doyle you will learn how to use CSS3 to create a stylish and non-intrusive, translucent Newsletter, RSS, Twitter and Facebook tab with nicely rounded corners, gradient background and drop shadow.
View Demo

8. Reveal Extra Content With CSS3 Transitions
This is a nice source code by Jason Weaver that allows you to create a function to reveal some extra content with CSS3 transitions. Each post in the loop has the featured image, post title, comment count and “read more” link.
View Demo

9. CSS3 Box-Shadow Rolled Corners
This is a source code by Paul Farning that allows you to create box-shadow rolled corners with some CSS3. The box-shadow property isn’t entirely flexible enough to really create the effect, but with a couple layers it can be approximated in some browsers.
View Demo

10. Mimic Equal Columns With CSS3 Gradients
In this quick tutorial (with video in HD format) by Jeffrey Way you will learn how to in an easy way create some mimic equal columns with CSS3 gradients – with zero images. As usual with Nettuts+, you can also download all the source files of this tutorial.
View Demo

The different CSS3 tutorials presented here in this article are not in any particular order – and Cashrevelations is not by any means affiliated with anyone of the tutorial authors.

There is a lot of theories about how a great website layout should be – but I suspect the consensus is greater when it comes to the advantages of a CSS based layout compared to a table based layout. Personally, I think table based layouts feel kind of obsolete – but not at all totally useless. I must admit that I still use tables and I honestly think even if they feel obsolete, tables fill a function and have an undeserved bad reputation – it is as with so many things else, there is a lot of strange myths involved.

Michael Locke of mlwebco.com describes this issue well in his video Tables vs Divs. And now when we mention Michael Locke, I also would like to recommend another video of him, The Standard Website Layout – a layout that can be used for every website.

Click here to view the embedded video.

Anyway, a good idea for effective web layout (or webdesign in general) is to follow some basic guidelines. Keep it simple and user friendly – or a simple website is much more user friendly than a complicated and cluttered. A standard layout with, lets say, two or three columns and a billboard is proven to be effective and useful for most sites. Think about functionality – it is far better to have a functional website than a beautiful. Use a clearly readable font size and face. Be inspired by experienced webdesigner (but don’t steal).

Let the two words, simplicity and functionality, be your Star of Bethlehem in webdesign.

6 CSS Frameworks – CSS Layout Resources

A good and simple way to get a relevant and appealing layout is to turn to the skillful professionals. On Internet there is plenty of ready made layouts you can use for free – commonly known as frameworks or templates. Right below you have 6 useful frameworks which will help you to get a good and user friendly layout for your web page.

A Collection Of 224 Grid & CSS Layouts – Iron Myers
These very practical layouts are suitable for Content Management Systems, blog themes, website templates or as a starting point for your web projects. They are SEO optimized and each CSS layout will look and behave the same in all Internet browsers.

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.

Elastic CSS Framework
A simple CSS framework to layout web-based interfaces – with a capacity to make elastic, fixed and liquid layout easily. According to the developers, Elastic provides a declarative syntax language to define the layout structure and behavior.

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.

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.

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.

This article was just a few thoughts or mini tutorial about web layouts and webdesign in general – if you are interested of further information about webdesign you could begin with a visit to Wikipedias article Web design and Webdesigndev (webdesign in general).

For me personally, it feels like easier to write CSS code manually, and it do work well. But not even after a bottle of wine (or something more manly) and a lottery win, I can, with good conscience, say that it looks beautiful. The code ends up messy, and deep in my mind I think I will fix it later – but usually it will never happen. The CSS file remains ugly as a statement of the coders laziness. But even for us, lazy webmasters, there is help.

Code beautifiers. Code optimizers. CSS organizers. These nice online services have many names and they all help you to clean up a messy CSS code – easy, fast and without any hassle. And today we are taking a quick look at a few online CSS services that can assist you in your tiresome quest to make your CSS code more beautiful and effective.

ProCSSor – Advanced CSS Prettifier

This CSS tool is new, and it proves that online CSS tools do not have to be cluttered with different promotions and other annoying distractions. ProCSSor has a stylish and user friendly, intuitive design. Qelix, the developers behind this tool, describe it like an “advanced CSS Prettifier with some unique formatting styles and several customizable options”. I like this tool because it is easy to use and it does what it promises to do.
Visit ProCSSor

Styleneat – CSS Organizer

This CSS tool by Inmeres Solutions has been online for a while, and like ProCSSor it has a clean and functional design. It organizes and standardizes your CSS in a structure and makes it easier to define page areas and see how they relate to each other, and it also provides you with some additional (more or less practical) options like, for example, sorting CSS properties and selectors alphabetically and just a few more.
Visit Styleneat

Code Beautifier – CSS Formatter And Optimizer

This tool by Arkikstudio is based upon the famous and no longer maintained CSSTidy, and it is a bit less cleanly designed than the two CSS tools above, but still not bad and with a functional approach. It could shortly be described as an easy to use and time saving online CSS formatter, parser and optimizer. Just like the other tools in this article, also this CSS tool offers a fair amount of the usual but handy additional options.
Visit Code Beautifier

2 More New CSS Tools

The two following tools are actually not CSS code organizers – one of them, Stylebot, is not even an online tool. But they are kind of new and interesting enough to be rewarded with some attention, and we thought we should take this opportunity to mention them.

Instant CSS Code – Create a Web Project Framework
Instant CSS Code is a user friendly tool that allows you to create a custom framework with valid HTML or XHTML and CSS. You need only select options or modules from the list, and when you are ready you simply download your framework as a ZIP archive.

Stylebot – Chrome Extension
Stylebot is a Chrome extension. According to the developer, Ankit Ahuja, Stylebot aims to simplify customizing the web, making it more accessible and adaptable. With this tool you can analyze and modify CSS on any webpage and actually without writing any CSS code.

The CSS tools in this article are in a particular order. Usually we don’t rank the tools we present, because in the end it is just a personal opinion on what one feels comfortable to use. But anyway, this time we place the tools in the order we prefer them (except the two extra CSS tools in the end) – we rank them after usability, performance and design. But this is only according to our opinion, you might have a different.

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.