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! ;)

If you are looking for another alternative to create tooltips for your website, CoolTips may help you. It is created by Andrew Okonetchnikov. Currently released in version 1.0, CoolTips is an amazing lightweight unobtrusive JavaScript web-browser tooltips. It is used to replace conventional web-browser tooltips and uses replacement technique.

Advantage Features:

* Lightweight.
* Uses industry-standard libraries — prototype and script.aculo.us.
* Easy customizable look & feel to set different CoolTips instances, without using bunch of parameters or CSS.
* Browser and platform independent. Tested on Windows and Mac. Firefox, Opera, Safari, Internet Explorer 6 & 7.
* Supports transitional effects. Fade in & out appearing.

Use any CSS-query for CoolTips initialization and you can learn more about detailed CoolTips Options by visiting the source page.

Typechart is a web tool to preview and compare web typography while retrieving the CSS.
This is how to use this tool:

1. Browse typographic styles; In quick look up, there is Style ID for each Typeface, which allows you to annotate prototypes and retrieve the css while coding.
2. Download CSS; When you click the “Get CSS” button, there is a sliding tray that displays the CSS.
3. Compare Typeface previews in two different OS; Windows view for (ClearType) rendering, and Mac view for Apple font rendering.

A tool that will save your time whenever you need to have quick overview on several web typos. Keep this Typechart inside your bookmark lists and have a try if you like ;)

This JavaScript is another smart way to rearrange items in a list. From a basic list of bulleted items, this code is developed with some CSS style and cursor hinting to make the dragability more obvious.
Examples of its implementation are to create:
- Sorting floated, wrapped list items.
- Sortable links or buttons
- Windows-like toolbars
- Editable Content
- Sortable, Editable Lists
- Slideshow Sorter
Getting curious? Read more for detailed instructions by visiting ToolMan DHTML Library of Sortable Lists collection to create your own dragable lists into something awe!

Alen Grakalic of CSSGlobe.com wrote an excellent tutorial to create a CSS animated progress bar. You will need a cool background image in the container and a 200px wide background .gif that animates from “zero” to 200px inside the nested element.
View the demo page now to understand whole details about this CSS animated progress bar tutorial!

CSS Type Set is a simple web tool to help you with CSS type customization. In order to use this web tool, you must enable JavaScript. Copy and paste or type in your desired text in the left box, then you can use the control tools (below the box) to instantly changes the style of your copy.
After entering text in the box to the left and adjusting the style controls, you can copy the generated CSS to use on your own website.
This CSS Type Set is pretty handy because every type style customization can be checked instantly together with the CSS codes. CSS Type Set also performs very well for a paragraph text.
Beside the regular type formatting controls, you can see three sliders with different functions to set the style of types and paragraph. They are: letter spacing slider, word spacing slider and line height sliders.

Give a try of this cool CSS Type Set and let us know what you think! ;)

CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elements the background-position CSS property can then be used to shift the visible area to the required component image. This technique can be very effective for improving site performance, particularly in situations where many small images, such as menu icons, are used. If you are new to the technique this CSS Sprite generator will help you creating your first CSS Sprites.

Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts. Based on the popular 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking. Typogridphy is made of fully validate, semantic and strict xHTML, and validate CSS.

This is a nice generator. You put your XHTML code in the form and in return you will get a corresponding CSS frame.

With this website you can automatically generate rounded corners for HTML/CSS boxes. You can select different corner radii and different background colors for the four corners. The generated boxes can be filled with anything you want and can be resized as much as you want without getting distorted.

So you need a grid based layout for your website? Then try this tool. Just by “clicking around” you will be able to create your own custom brid based layout.

Here you find some usefull CSS hacks. For example: “Import Javascript into CSS for IE6″, “get fontSize in pixel”, “design min-width for Internet Explorer 6″, “Taming opacity with Texts for Internet Explorer” and much more.

The author of this nice CSS tutorial “wanted two background images, rather than one. My first background would be a general tiled image, to give the site’s background a nice texture; the second a vertically-repeated image on the left-hand side, to be used in conjunction with a floating nav menu.” So if you want to know how he did it go and check out this article :-)