Category: CSS

CSS Animated Progress Bar

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 - Letter Press for the Digital Age

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 Sprite Generator

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.

Typographical and Grid Layout CSS Framework

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.

CSS Frame Generator

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

Rounded CSS Box Generator

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.

Grid Layout Maker

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.

A CSS Hacks Archive

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.