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 …

Delicious RSS Icons – set of 5 free RSS feed icons at 128x128px, 64x64px, 48x48px and 32x32px size.

The PSD file of the icons has full layers organized in folders for each icon.

Social Media Bubblicons – a Free set of 20 social media icons in PNG format and at 48×48px size.

The set contains popular social media sites such as Twitter, Facebook, StumbleUpon, Mixx, etc. It also includes an RSS feed icon.

The set is completely free for commercial and personal work, attribution is not required (but is greatly appreciated).

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.

WooCons #1 – 170 tasty and free web icons available as 32×32 PNG’s from WooThemes.

‘#1′ definitely suggests that we can expect some more icons in near future from WooThemes.

TopUp Lightbox – Unobtrusive & highly customizable jQuery/jQuery UI driven pop-ups with fancy layouts, animations and transitions.

With TopUp you can display images (image galleries), flash content from sites like Youtube, SWF files and FLV video, QuickTime movies, Windows Media and Realplayer, iframes, DOM elements and raw HTML.

With a current release 1.7.2 it is possible to specify which jQuery libraries to auto-include or not to auto-include at all, enable fast mode and override the assets (host, images_path and players_path) variables.

A few features:

• TopUp is absolutely free, also for commercial use
• A very easy setup process: only one include
• Using TopUp presets keeps your HTML code 100% clean
• TopUp can be used along with Prototype
• Usage of CSS sprites to reduce the amount of image requests
• Cross-browser compatibility
• It’s open source
• and many more…

MooGeo geolocation, reverse geocoding and content analysis – a simple MooTools plugin that answers most of your geo questions.

With MooGeo you can get information from visitor IP’s using W3C geolocation API, get the place from an IP number, get geographical data from text, get all kind of data from a latitude/longitude pair, grab your IP and place on the map and more.

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.

table2chart - Mootools plugin which allows you to easily create a pie chart from valid data tables.

Simply add the script to the end of the body and it will convert all tables with a class ‘toChart’ to pie charts. You can define the chart size and the chart color within the class like:

class="toChart size700x300 color29b34f"

table2chart is a light-weight plugin, only 1Kb compressed and gzipped.