Group items tagged

100+ CSS Tool box including layout/menu generators and more

CSS Cheat Sheets CSS Need to know Stuff CSS Tutorials CSS Layout Tools CSS Navigation and Menus Tools Other CSS Tools CSS Web Designs

There are web-based generators for almost everything; stripes, buttons, forms, loader icons, etc. CSS Arrow Please focuses on another niche; yes, totally CSS-based (no images) arrows. This CSS trick is great for using in tooltips, the generator offers multiple options for customization (the position, color and border values) and auto-creates the related CSS code.

batch process many images: allows you to send a zip file containing your images. It will returns you your images combined into a sprite, and even better, the CSS code that you'll just have to paste in your main css file. The CSS sprite generator takes a number of source images and combines them into a single "sprite" image and supplies CSS to map to each image within the sprite. The technique this tool employs is often used to improve the performance of a web site by reducing the number of HTTP requests that the client's browser needs to make.

This is a nice collection I've put together of both online CSS web applications and desktop applications to assist the web developer with his/her project. Both the CSS veterans and beginners should find these tools useful and at least worth a bookmark or quick download.

Considered the best online CSS optimizer by bloggingpro.com

While a lot of people are out to optimize their sites/blogs, most everyone seems to skip over CSS. I have been spending some time looking at CSS Optimization tools today. I wanted something free, online, and easy to use. And of course, something that worked.

Patternify is a simple CSS pattern generator. Its graphical web-based interface lets you draw the pattern you want, and then it generates the CSS code for you. Instead of having to launch your graphics editor and creating a 2px by 2px image, you can just build your pattern online using this. And with the base64 code, you don't even need an image file anymore: just include the code in your CSS and you're ready to rock.

This is the direct link from http://elliottback.com/wp/archives/2005/04/25/convert-image-to-css/
 Convert Image to CSS
Posted in Code, Plugins, Graphics by Elliott Back on April 25th, 2005. [Del.icio.us]

Ever wanted to take an image and convert it, pixel by pixel, into CSS, HTML, or xHTML? Well, now you can, thanks to my handy conversion tool! Just give it the URL of the image to convert, select a pixel resampling ratio, a mode, and off you go. You can also save the html. Just right click on the permalink and "save target as" to your favorite location.

    * Example: Born into Brothels [via]
    * Example: Cambridge, England [via]
    * Massive deforestation [via]

Note: If you give a very large image, with a very small pixel ratio, the image could take a long time to load, or eventually overload your browser with multiple megabytes of web information. These "images" are very large!

CSS Formatter and Optimiser

CSS Optimizer optimizes and reduces the file size of the Cascading Style Sheets

Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them. It is very useful for web developers who are looking for just the right font/style/color to use in their pages. To use it all you have to do is simply enter the text you would like to preview, modify the various CSS properties until you find a style you like, and then click on the Get CSS Code button to generate all the necassary CSS code to reproduce those styles in your webpage.

Drawter is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website's code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn. Currently Drawter is available in Pro version, which means that it is intended for webmasters use only - knowledge of HTML and CSS is required. Drawter is not a tool for laymen, for the time being, but the whole team behind the project is putting every effort to launch a new version called "Amateur". Soon you will be able to draw your websites without any knowledge of HTML or CSS. Launching 2010.

Drawter is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website's code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn.

It's a simple and quick web toy that lets you explore CSS in real time. Just click and see the effect instantly, no Reload needed. It's fast and funny!

 All the effects are fully customizable and you can choose from all the popular CSS3 properties.

Typechart lets you flip through, preview and compare web typography while retrieving the CSS.

2008-06-19 Skybound offers a free version of Stylizer Basic (formerly StyleSpread) in addition to the non-free Stylizer Ultimate. Stylizer is a CSS editor with live preview, automatic validation, diagnose tool, FTP upload, etc. (Windows, free basic version)

ptimize CSS via URI or via File Upload or via Direct Input