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 …

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.

Remote Linking – a single anchor link has multiple clickable areas in different locations.

It can be used for pretty neat effects and requires nothing but CSS.

View Example

CSS & JS Clock – created using a combination of CSS and Javascript. The Javascript gets the user’s local time and updates the CSS <div> tags with the appropriate hour and minute classes.

Clock is broken down into 3 layers. Hour/Min/Sec arms are created using transparent PNG files and layered on top of each other using absolute positioning.

The clock moves in increments of five minutes. The author was hesitant to make 60 segments of the arm since this was just an experiment.

View DEMO

Fixed Footers without JavaScript – How to create a page footer which would stick to the bottom of the browser window if the content didn’t fill the window, but behave normally (i.e. be pushed down by the content) when the content was tall enough.

The technique described in this article is purely a CSS solution and works in all modern browsers, tested down to IE5.5.

Scalable graphical CSS menu – Craig Grannell shows you how to bring a little visual flair back to your navigation bars, and ensure that everything remains flexible when text is enlarged. Tutorial PDF and support files download available.

CSS Tutorial on how to produce a product category list with associated images and text. The final result should look like this