Visual-Blast Magazine

CSS Compressors  - CSS Optimizers

One of the most important thing when developing websites is page loading speed, to load as quickly as possible, especially in the case of large websites with lots of CSS code where faster loading means increased usability and user satisfaction.

CSS Compression tools improves your load time performance by removing comments from code, placing each command in one single line, removing unneeded ‘white space’ characters like space, new line, and tab to reduce its size.

Keep in mind, if you really want to optimize website performance, after the development stage, you should go further with CSS sprites, minifying JavaScript, gzip compression and caching your files.

Try out these online CSS optimization tools, some of them also offer JavaScript compression, and see how they can  speed up website response time and save your bandwidth as well.

Online CSS Compression Tools

1. cssdrive.com CSS Compressor – comes in 2 modes: Normal and Advanced. You can choose from three levels of compression. The ‘Normal’ mode should work well in most cases, creating a good balance between the two.

2. Clean CSS – CSS Formatter and Optimiser based on csstidy available in English, German and French.

Continue reading …

CSS 3.0 Maker – a free CSS3 generator tool to experiment with CSS3 properties and values and easily generate and download a simple stylesheet for your site.

When changing the different settings in CSS3 Styles Panel, all CSS3 properties like Border Radius, Gradients, CSS Transforms, CSS Animations, Text Shadow and so on, are instantly applied with generated CSS code and preview.

There is also CSS3 browser compatibility panel where you can see browser support for all CSS3 properties you experiment.

Atatonic CSS Framework – as vertical rhythm is one of the most important things in design, this lightweight CCS framework has it’s main focus on typography, with added grid support.

The main goal of this project is to provide a solid base to start with every project. The combined file is only 5kb (gzipped~3kb).

View DEMO , or checkout the code

Atatonic CSS Framework is still very young. Extra features will be added as plugins, like a stylesheet for forms, icons for buttons, better form controls and maybe some GUI standards such as dialogs, bars, buttons and more.

HTML5 Reset – is a set of HTML5 and CSS3 templates you can use as a base template to start a new project.

This reset package by Monkey Do is more than just a single style sheet. It includes a basic HTML5 document structure, with all the every day stuff like title, header, footer, etc., clearing floats, correcting IE problems, and much more.

You can choose from two versions, the ‘full version’ (fully commented or without comments) and one that has just the basic features.

P.S. Another similar project we mentioned 2 days ago at V-B Magazine: HTML5 Boilerplate - Base HTML/CSS/JS Template.

CSS3 Playground – online tool – web application to experiment and learn about  new CSS3 capabilities. Primarily those than conform to the progressive enhancement philosophy, which means that the styles can be used on all sites without severely changing the experience on browsers that does not support them.

When changing the different settings in the panels at the left, all CSS3  properties like CSS3 radius, box-shadow, text-shadow, transforms,  are instantly applied with generated CSS code.

The styles applied when changing the different settings should follow the principles of progressive enhancements and will work in all browsers like Firefox, Chrome, Opera, Safari and Internet Explorer, but some properties will not have an effect when changed depending on the browser capabilities (IE 8 and older versions).

HTML5 Boilerplate – is a base HTML/CSS/JS template that helps you develop a fast, performance optimized, robust and future-proof site.

With HTML5 Boilerplate you’ll get the best practices baked in:
cross-browser compatibility, including IE6, performance optimizations, optional features like cross-domain Ajax and Flash, mobile browser optimizations, graceful degradation and more.

A starter apache .htaccess config file prepares your site to serve HTML5 video, use @font-face, and gzip compression.

CSS3 PIE – Progressive Internet Explorer – makes Internet Explorer 6-8 capable of displaying a number of CSS3 decoration properties.

CSS3 PIE doesn’t require any browser hacks or loads of javascript, you just need to add the following line in the CSS file like: behavior: url(PIE.htc);

Currently supported CSS3 features are:

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

Documentation section describe in detail the exact levels of support PIE has for certain CSS3 properties.

CSS3 Click Chart by Impressive Webs – CSS3 “help chart” that displays examples of the new features in CSS3.

Each example visually displays the CSS3 feature, with a clickable heading that opens a box at the bottom of the page to see CSS codes used to create them, feature description and browsers support on that particular feature.

The CSS3 properties currently included (with more to come) are: box-sizing, border-radius, shadows, RGBA colors, multiple columns, HSLA colors, gradients, multiple backgrounds

If you have any corrections, suggestions, additions, post a comment on the original CSS3 Click Chart article.

Nav-o-Matic is a free online tool for creating navigation sprites in a few simple clicks.

You will need an image with 2 rows (no vertical navigation yet) like this one, then lay down some guides like in Photoshop, define the CSS options and Nav-o-Matic will generate all the code you’ll need to get your navigation working.

There is a lot more functionality planned, but for now, Nav-o-Matic only support for 2 states: Normal and hover, hover also acts as the active/on state.

TemplateMo.com – providing 180+ high quality and free CSS templates for your personal or commercial websites.

All css templates are absolutely free to download, modify and apply for your websites without any restriction. All CSS templates are W3C standard compliant XHTML/CSS website layouts.