Top 60 CSS tools For Your Web Designing/Devlopement Project

Layout.

YAML Builder This is by far the best layout generator out there, definitely use this if you want to practice CSS.

Templatr– Almost like YAML without the pretty colors.

CSS Creator– This generator 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.

Firdamatic– Firdamatic™ is an online tableless layout generator that allows you to create and customise layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze.

The Generator Form– Allows the creation of easy to create websites right from the click of a button.

Qrone CSS Design Editor– You can easily edit CSS with this design editor by Qrone.com

CSS template generator– This HTML & CSS Style Sheet template generator outputs a full featured 3 column template. Resulting in an instant web page with a customized template that can be used to control the look n feel of an entire site.

HTML PHP CSS Website Template Maker– This PHP – HTML – CSS template generator creates a two column layout with both a header and a footer. This PHP / CSS Style Sheet template generator outputs full featured tableless code i.e. tables are NOT used for the template with the column layout.

CSS rounded box generator– Allows for the creation of rounded CSS boxes.

CSS layout generator– This generator will create a fluid or fixed width column layout, with up to 3 columns and with header, footer and menu. Values can be specified in either pixels or percentages.

WordPress Theme Generator– This online generator creates your own custom unique WordPress Theme. Without any need for HTML, JS, PHP, or CSS knowledge.

Optimization

Online CSS Optimizer– This tool is used to optimise CSS code. Enter either a URL or Copy & Paste the stylesheet into the box, and click Go. More information on this tool can be found on the about page.

CSS Compressor– Use this utility to compress your CSS to increase loading speed and save on bandwidth as well.

CSS Analyzer– This service has been provided to allow you to check the validity of your CSS against the W3C’s validation service, along with a colour contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.

Clean CSS CSS formater and optimizer based on CSS tidy.

CSS Tidy– CSSTidy is an opensource CSS parser and optimiser. It is available as executeable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality).

Tabifier– The tabifier is a tool to properly indent computer code. The style it produces is a mix of my personal preferences for indentation plus what he could manage to make a program produce from dirty source.

Lonnie Beast– CSS online formatter, easily format your CSS without any programs.

Navigation

DOMTab– DOMtab is a JavaScript that turns a list of links connected to content sections into a tab interface. The script removes any “back to top” links in the section and automatically hides all but the first one when the page is loaded. You can use as many tabbed menus on the page as you want to.

List-O-Matic– List-o-matic lets you choose the content, layout and presentation of your list-based navigation menus. Just give it a go – it’s child’s play!

Tabs Generator– Creating tabs has never been this easy!

CSS Navigation Generator– This web tool generates the necessary code you need to build up a valid and accessible text based imaged navigation bar with one sprite image, XHTML and CSS.

CSS Menu Generator– CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons.

CSS Button Generator– Generate buttons and field text easily.

CSS Play– Huge database of menus.

List-O-Rama– List-O-Rama will allow you to generate nice CSS inline menus in seconds. Just walk through the wizard and insert the text of the links, choose the vertical or horizontal menu, pick the design and click on finish.

Izzy Menu– Choose from dozens ready styles or create your own menu style. IzzyMenu, online menu generator is the best solution for amateurs and professionals!

CSS Buttons– CSS Buttons will allow designers to quickly implement consistently looking, cross-browser, buttons regardless of the element used. CSS Buttons is a plug n’ play solution for Multilingual, CMS, Blogs, and similar web sites faced with dynamic content challenges.

CSS Tab Designer– CSS Tab Designer is a unique and easy to use software to help you design css-based lists and tabs visually and without any programming knowledge required!

CSS Menu Generator– Over 31 designs of CSS menus ready to be picked.

CSS Menu Generator– Easily generates menus for your use.

Listamatic– Nested list options, there are plenty to choose from.

Fonts

Type Chart– Type chart lets you flip through, preview and compare web typography while retrieving the CSS.

EM Calculator– Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design.

Vertical rhythm calculator– Want to convert pixel values to EM values, this calculator is for you!

Type Tester– It has beautiful layout and a very friendly user interface.

CSS Font and Text Style Wizard– Allows for the easy creation of css font options.

Font Tester– Are you tired of having to refresh the page to view how your font will look like? Font tester to the rescue.

Sky CSS Tool– Online CSS Authoring Tool. «Sky CSS» allows you to create CSS classes almost without using manuscript code.

Clear CSS Generator– You can easily select colors from the palette to preview your future web-project design right now.

CSS Frameworks

Elements– Elements is a down to earth CSS framework. It was built to help designers write CSS faster and more efficient.

Hartija– It attempts to create printer friendly pages.

Sen CSS– SenCSS is a sensible standards CSS Framework. This means that SenCSS tries to supply standard styling for all repetitive parts of your CSS, allowing you to focus on the fun parts. In that sense, senCSS is a bit like a large CSS Reset.

Eswat– Easy to edit grid based layouts.

Emastic– Emastic is a CSS Framework, it’s continuing mission: 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.

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

Clever CSS– CleverCSS is a small markup language for CSS inspired by Python that can be used to build a style sheet in a clean and structured way. In many ways it’s cleaner and more powerful than CSS2 is.

Logic CSS– The Logic CSS framework is a collection of CSS files and a toolset designed to cut development times for web-standards compliant web layouts and templates.

CSS Firefox Extensions

CSS Validator– Validates a page using the W3C CSS Validator. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page.

Firebug– Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…

Grid Fox– GridFox is a Firefox extension that overlays a grid on any website. If you can open it in Firefox, you can put a grid on top of it.

Aardvark– Clean up unwanted banners and surrounding “fluff,” especially prior to printing a page.

FireScope– FireScope is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS.

CSS Viewer– I love this tool! If you ever go into a website and want to see its CSS properties this tool will allow you to do just that.

CSS Mate– Inline CSS Editing Evolved. Originally a port of the fantastic EditCSS tool that he had been using for many months. He gutted it, made each stylesheet load into a seperate tab.

Miscellaneous

CSSHttpRequest– CSSHttpRequest is cross-domain AJAX using CSS.

Grid Designer– Creates grids without having to waste time creating them manually.

CSS Text Wrapper– Ever thought about making shapes with text? Then this tool is right for you.

Collaborative Javascript Debugging– Test live JavaScript with HTML and CSS context

Fixed Width CSS Layouts– Stop wasting time creating your own layouts, instead use one of these.

How To Create Stylesheet only for IE

Sometimes it is better to create alternate css files for different browsers (esp. IE), than using hacks. It is important in big projects, when client requires the site to be fully cross-browser. The basic technique to attach an IE-Only stylesheet is using the HEAD section conditions:

CSS FILE LOADED FOR BROWSERS OTHER THAN Internet Explorer:

<![if !IE]>
<link rel=“stylesheet” type=“text/css” href=“NOT-IE.css” />
<![endif]>


 IE 6 ONLY CSS FILE:
<!??[if IE 6]>

<link rel=”stylesheet” type=”text/css” href=”IE-6-SPECIFIC.css” />
<![endif]??>

IE 5 ONLY:

<!??[if IE 5]>

<link rel=”stylesheet” type=”text/css” href=”IE-5-SPECIFIC.css” />
<![endif]??>

IE 5.5 ONLY:

<!??[if IE 5.5000]>

<link rel=”stylesheet” type=”text/css” href=”IE-55-SPECIFIC.css” />
<![endif]??>

VERSION OF IE VERSION 6 OR LOWER: (I find this one pretty handy)

<!??[if lt IE 7]>

<link rel=“stylesheet” type=“text/css” href=“IE-6-OR-LOWER-SPECIFIC.css” />
<![endif]??>

IE 7 ONLY:

<!??[if IE 7]>
<link rel=“stylesheet” type=”text/css” href=“ie7.css” />
<![endif]??>

The biggest advantage of using this methos is that it passess W3C validation and you don’t have a mess of different hacks in your css code.

6 DropDown Navigation CSS Menus Must be Learned

For larger sites with a lot of content or pages, drop down menus are popular because the can make it easier to move through the site with less clicks, In this post you can learned and use on your own site.

Ok guys, i have uploaded two Css Demo for you to see how it really look’s like
Nvidia Demo:

http://ed80e418.linkbucks.com

http://8da85695.linkbucks.com

download

http://rapidshare.com/files/231252662/free-css-drop-down-menu.rar

99 Cool Resources for Web 2.0 Design

BADGES

Web 2.0 Badges – A set of free badges to download and use in your own designs.

Fresh Badge – Quickly generate your own badge.

adClustr – Starburst badges.

Deziner Folio – A collection of different badges.

BittBox – Free vector badges.

Official Seal Generator – An alternative to the typical badge.

Photoshop Tutorial – A quick lesson on making your own badge.

Glossy Photoshop Tutorial – Create a glossy badge with this tutorial.

BUTTONS

My Cool Button – A nice online tool that will help you to quickly create the button that you want.

Adam Kalsey’s Button Maker – Simple tool to make your own buttons.

Button Maker from Blog Flux – Create your own custom button.

Brilliant Button Maker – A similar button maker to the previous 2.

CSS Buttons – Choose the text, border, and background.

Buttonator – A paid option for creating buttons.

RSS Button Maker – The name pretty much says it all.

Button Boost – A little bit different than some of the other button generators.

ButtonGenerator.com – Create buttons for navigation menus.

Crystal Button – Slick web buttons made easy.

Chicklet Creator – Create buttons that allow visitors to subscribe in their feed reader of choice.

ROUNDED CORNERS

Rounded corners are a staple in web 2.0 design. Here are some tools and scripts that will help you to quickly create your own rounded corners.

RoundedCornr

Corner Shop

Spiffy Box

Canvas Corner

Spanky Corners

Sliding Doors Text Box

Smart Rounded Corners

Rounded Corners in CSS

News List

LOGOS

Each of these tools will create a simple web 2.0 style logo.

Web 2.0 Logo Creator

Web 2.0 Logo Creatr

Web 2.0 Logo Creator

Web 2.0 Stylr

ICONS

A web 2.0 site can’t ignore icons. Here are some free collections of icons to use in your own projects.

UtomBox – A great collection of web 2.0 icons.

Feed Icons – The standard RSS icon.

Map Icon Factory – Create your own map icon.

Perishable Press – A nice collection of RSS icons.

Glass Style RSS Icons

Snap2Objects – Vector RSS icons.

31 Sources of Quality, Free Icons

GRADIENT IMAGES

Another common element of web 2.0 is gradient images. Here are a few tools to help you.

Gradient Image Maker

Gradient Generator

Online Gradient Image Maker (OGIM)

SPEECH BUBBLES

Speech bubbles are commonly used for styling comments or blockquotes.

Will Mayo

Bubblesnaps

CSS Play

XHTML Speech Bubbles

WigFlip

Fluid CSS Speech Bubbles

MySpace Speech Bubble Generator

Photoshop Tutorial

BACKGROUND IMAGES

Background Image Maker – Create background images with choices like transparency and gradients.

Stripe Generator 2.0 – If you’re looking to add a striped background to an element on your page, you can use this tool to customize the look you want.

Stripe Designer – Easily create striped images.

Tartan Maker – Create a tartan background image.

Texture Generator – Creates textured images that you can use as a background.

All Free Backgrounds – Choose the background you want.

COLORS

The Colors of Web 2.0 – Are you looking to match the color of a popular web 2.0 site?

Web 2.0 Color Pallete – Popular web 2.o colors.

Color Schemer Gallery – Having problems choosing a color scheme? Find one you like in this gallery.

COLOURlovers – More samples of color combinations.

Website Color Picker – Test color combinations quickly.

I Like Your Colors – Get the colors used by a particular site.

NAVIGATION

CSS Menu Generator – Easily create attractive CSS menus.

Listamatic – Collection of CSS menus.

List-O-Matic – Create your own CSS menus.

List-U-Like – Another tool to create your own navigation bars.

Tabs Generator – Create tabbed images for navigation.

Flash Buttons – Create navigation menus with flash buttons

CSS Play – An extensive collection of CSS menus.

Exploding Boy – Tabbed CSS navigation menus.

CSS Navigation Menu Generator – A tool to help you create your own menu.

FAVICONS

Favicon Generator – Create your own favicon from an image on your computer.

Favicon from Pics – Create a favicon from a photo.

Favicon Editor – Upload a photo, create a favicon.

Favicon.cc – Another option for favicons.

Photoshop Tutorial – Creating a favicon with Photoshop.

CHARTS

PHP/SWF Charts – Create attractive charts.

amCharts – Flash charts.

OTHER

Avatar Maker – Create and edit an avatar.

Shrink Pictures – Create an avatar from your photo.

ScaleNine – Collection of skins and themes created for Flex and Adobe AIR.

VectorMagic – Converts bitmap images to vector art.

Templatr – Create a layout.

PsycHo – Blog template generator.

Web 2.0 Generator – Creates layouts.

Typetester – Compare fonts on-screen.

BlogPoll – Create a free poll for your blog.

RSSxl – Convert an HTML page to RSS.

Meta Tag Generator – Easily create meta tags for your pages.

URL Rewrite – Create search engine-friendly URLs for dynamic pages.

.htacces generator – Quickly create an .htaccess file.

Thumbnail Generator – Create thumbnails for a large amount of images.

Reflection.js – Adds reflections to your photos.

Drop Shadow – Improve your images with a drop shadow.

CSS Sprite Generator – From Website Performance.

Vecteezy – Stupid name. Cool vectors.

Brusheezy – Photoshop brushes.

PSBrushes.net – More Photoshop brushes.

deviantART – Photoshop brushes at deviantART

How to make a Round corners with CSS???

Let’s start with a ’rounded-corner’ tutorial. In this tutorial you’ll learn how to make them. This isn’t the only method there is to produce round corners; this is just the method I use.

First, make two files, called index.html and roundcorners.css. We willl start with the index.html. The code provided isn’t everything you should have in your index.html. You should know how to add structure in your document. If not, please download the final code at the end of this tutorial.

This is very simple. We start with a DIV with id box. This is the box where all the elements of the box will appear in. In this box, we’ll add the corners and the content. Take a look below to view the codes.

<div id="box"></div>

As you can see, I have structured the document. I think this should be very easy to follow and the HTML part has been finished now!

We will continue with the CSS. Open up your roundcorners.css file now. You should understand we use images to give the box its round corners. I will use the following images.

top-left.gif
top-right.gif
bottom-left.gif
bottom-right.gif

CSS

body{
background-color: #CFCFCF;
}
#content{
float:none;
padding:20px 20px 0 20px;
}
#box{
width:300px;
background:#ffffff;
}
#top-left{
width: 19px;
height: 16px;
background: url(images/top-left.gif) top left no-repeat;
float:left;
}
#top-right{
width: 22px;
height: 22px;
background: url(images/top-right.gif) top right no-repeat;
float:right;
}
#bottom-left{
width: 22px;
height: 16px;
background: url(images/bottom-left.gif) bottom left no-repeat;
}
#bottom-right{
width: 22px;
height: 21px;
background: url(images/bottom-right.gif) bottom right no-repeat;
float:right;
margin-top:-21px;
}

As you can see, I’ve placed the div with id top-left at left (with float:left;) and made the div as small as the image itself. With the background style attribute I define a background (top-left.gif) and as you can see when you have done this too, it’ll display a perfect top left round corner (the perfection level of the round corner depends on your designing skills of course).

What I did next, is just repeat this step with all the divs and only change some small things. With top-right you should use float:right; and define another background image but the logic behind it stays the same.

download files here

Ten steps to learn CSS positioning

1. position:static

The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document.

Normally you wouldn’t specify this unless you needed to override a positioning that had been previously set.

#div-1 {
 position:static;
}

2. position:relative

If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document.

Let’s move div-1 down 20 pixels, and to the left 40 pixels:

#div-1 {
 position:relative;
 top:20px;
 left:-40px;
}

Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. The next element (div-after) did not move when we moved div-1. That’s because div-1 still occupies that original space in the document, even though we have moved it.

It appears that position:relative is not very useful, but it will perform an important task later in this tutorial.

3. position:absolute

When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go.

Let’s move div-1a to the top right of the page:

#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

Notice that this time, since div-1a was removed from the document, the other elements on the page were positioned differently: div-1b, div-1c, and div-after moved up since div-1a was no longer there.

Also notice that div-1a was positioned in the top right corner of the page. It’s nice to be able to position things directly the page, but it’s of limited value.

What I really want is to position div-1a relative to div-1. And that’s where relative position comes back into play.

Footnotes

• There is a bug in the Windows IE browser: if you specify a relative width (like “width:50%”) then the width will be based on the parent element instead of on the positioning element.

4. position:relative + position:absolute

If we set relative positioning on div-1, any elements within div-1 will be positioned relative to div-1. Then if we set absolute positioning on div-1a, we can move it to the top right of div-1:

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}

5. two column absolute

Now we can make a two-column layout using relative and absolute positioning!

#div-1 {
 position:relative;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

One advantage to using absolute positioning is that we can position the elements in any order on the page, regardless of the order they appear in the HTML. So I put div-1b before div-1a.

But wait – what happened to the other elements? They are being obscured by the absolutely positioned elements. What can we do about that?

6. two column absolute height

One solution is to set a fixed height on the elements.

But that is not a viable solution for most designs, because we usually do not know how much text will be in the elements, or the exact font sizes that will be used.

#div-1 {
 position:relative;
 height:250px;
}
#div-1a {
 position:absolute;
 top:0;
 right:0;
 width:200px;
}
#div-1b {
 position:absolute;
 top:0;
 left:0;
 width:200px;
}

7. float

For variable height columns, absolute positioning does not work, so let’s come up with another solution.

We can “float” an element to push it as far as possible to the right or to the left, and allow text to wrap around it. This is typically used for images, but we will use it for more complex layout tasks (because it’s the only tool we have).

#div-1a {
 float:left;
 width:200px;
}

8. float columns

If we float one column to the left, then also float the second column to the left, they will push up against each other.

#div-1a {
 float:left;
 width:150px;
}
#div-1b {
 float:left;
 width:150px;
}

9. float columns with clear

Then after the floating elements we can “clear” the floats to push down the rest of the content.

#div-1a {
 float:left;
 width:190px;
}
#div-1b {
 float:left;
 width:190px;
}
#div-1c {
 clear:both;
}

10. Disclaimer & Resources

These examples are extremely simplified and do not trigger some of the CSS bugs in the Windows IE browser (of which there are many).

CSS transparency settings for all browsers

Transparency is one of those weird things that is treated completely differently in all browsers. To cover all your bases, you need four separate CSS statements. Fortunately they don?t interfere with each other really, so using them all every time you wish to add transparency is no big hassle and worry-free. Here they are, and are currently set to 50% transparency:

.transparent_class {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

Here is what each of those CSS properties is for:

• opacity: 0.5; This is the ?most important? one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all you need if all browsers supported current standards. Which, of course, they don?t.
• filter:alpha(opacity=50); This one you need for IE.
• -moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
• -khtml-opacity: 0.5; This is for way old versions of Safari (1.x) and for other browsers using the rendering engine referred to as KTHML.

SOURCE: css-tricks.com