SlickMap CSS is a simple stylesheet for displaying finished sitemaps directly from HTML unordered list navigation. It’s suitable for most web sites – accommodating up to three levels of page navigation and additional utility links – and can easily be customized to meet your own individual needs, branding, or style preferences.

The idea of SlickMap CSS is to streamline the web design process by automating the illustration of sitemaps while at the same time allowing for the predevelopment of functional HTML navigation.

Features and Benefits of the SlickMap CSS

• No need for additional software
• Easily revised with clients on-the-fly
• Clickable anchors with visible URLs
• Design process results in working HTML code

URL: http://astuteo.com/slickmap/

Graphic effects created in photoshop will bring magic if you master the tricks. When it comes to web designing, the powerful mixed and smart conversion between PSD and XHTML can give a professional look to your design. This tutorial will explain you how to create a Professional Dark CSS Menu. It has an elegant result of gradient effect (which is produced in photoshop), and you’ll see this when you hover these menus. CSS background positioning technique just made this effect possible to create.

The only graphics you will need to create this dark menu are: container background, menu background and menu matrix background . You can download them from the zipped file that is provided from the source site.

Find out more about this CSS method by visiting the tutorial ;)

site: http://www.raymondselda.com/professional-dark-css-menu/
demo: http://www.raymondselda.com/demo/dark-menu/?TB_iframe=true&height=130&width=750

The Variable Grid System is a web tool to generate an underlying CSS grid for your site. It is based on the 960 Grid System and it is designed & developed by SprySoft. You can input the pixel width of column and gutter of your grid layout, also the number of columns that you need to use. Those numbers will be auto calculated and you’ll see the result of total width pixels as “Content Width” and ” and “Full Width”.

What makes this tool different, is that you can see a realtime preview of your customized Grid System therefore it will make easier to have full control on the result. When you ready with the custom grid layout, this tool will generate the CSS file.

URL: http://spry-soft.com/grids/

Styleneat is a web tool that turns your CSS selectors, sub-selectors and properties into well structure CSS. It organizes and standardizes your CSS therefore it will be easier to define page areas and see how they relate to each other. It won’t break your layout as the folks who has developed Styleneat have tested it on several websites with huge and complex stylesheets.
You can enter the CSS you would like to format using Direct Input feature. Other features are to upload your CSS file or simply input the stylesheet URL then click the “organize CSS” button to have it re-organized.
There are several options available for advanced formating, they are:

* Sort Properties alphabetically
* Sort Selectors alphabetically
* Import and Organize Linked (@ import rule) Stylesheets
* Multi-line Formatting and Single Line Formatting options
* Safe Organize

If this sounds interesting enough, you’d better try this smart Styleneat rightaway!

URL: http://styleneat.com/index.php

Compass is a CSS Meta-Framework that is ported to Sass to make them easier to configure and apply to your semantic markup. It stands-alone via a simple command-line interface and ready to use in your ruby-based web application.

Best Practices of Compass CSS Framework:

* Use a Base stylesheet file – Create a _base.sass partial to initialize your stylesheets with common variables and the framework utilities you plan to use.

* Write your own Custom Mixins – Mixins let you insert any number of style rules into a selector (and its descendants!) with a single line.

It is not only a collection of classes, because you still can use the best of breed css frameworks such as: blueprint, yui, and 960. So visit the Compass CSS Framework site to learn more!

SenCSs is a Sensible Standards CSS Framework (Pronounce it as “sense”). The current version is 0.5 and supplies sensible styling for all repetitive parts of your CSS.

What features that you can get from SenCSs? Here comes the list:

* Vertical rhythm for all elements
* Common typographic standard across browsers
* Browsers based styling
* Specified fonts for windows, mac and linux
* No “double resets”, to make the CSS as efficient as possible
* Basic styling for forms and common classes
* Typographic niceties styling

However, SenCSs doesn’t seems to force a lay-out system on you or sneak in unsemantic classes

If you are related into this area, you should be ready for the upcoming features of SenCSs, as they are working on better form styling and cross-browser support.

This Free CSS Drop-Down Menu Framework is modular, with themes. Not only that the HTML is separated from CSS, but even CSS definitions are categorized into structural and thematic types.
Creating a new theme is easy with the available templates and takes 10-15 mins.
The code and files are well organized. This Framework is easily transformable. It can be transformed by changing class names only. Available transformations are: horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards.

So if you are looking for an easy way to create your own Drop-Down Menu, you should visit the source page now and have a look at this great free CSS Drop-Down Menu Framework.

site: click here
demo: click here

CSS makes every design possible. Recently we found something interesting posted at SohTanaka.com. Soh, the author of this web blog came up with a brilliant idea of creating a clock that combines CSS and Javascript.

The clock displays user’s local time, by Javascript, and the CSS div tags handle the appropriate hour and minute classes with absolute positioning of clock arms. This clock face is broken down into 3 layers of hour/min/sec arms in transparent PNG files.

You can figure out of how this CSS Clock works beautifully by visiting the source site and also the demo page. Just in case you’ll need this for future project, bookmarking this post is much appreciated! ;)