CSS Text Wrapper

CSS Text Wrapper

Generate HTML/CSS to wrap content to any shape or curve.

Not Just Rectangles Anymore

The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website. Get to it!

Tested in Internet Explorer 6+, Firefox, Safari, Opera, and Netscape.

— (Via » CSS Text Wrapper).

30 Exceptional CSS Techniques and Examples

When you are under time crunch and want to achieve something fairly fast, it is a big time savor not having to weed through Google results to find the best CSS approach for the specific effect you want to achieve. The following listing at Six Revisions has some really great links and tutorials on how to accomplish CSS related tasks. Here a small snippet of it:

Six Revisions

30 Exceptional CSS Techniques and Examples
April 25th, 2008 by Jacob Gube

In this article, I’ve pieced together 30 excellent CSS techniques and examples that showcases the capabilities and robustness of CSS. You’ll see a variety of techniques such as image galleries, drop shadows, scalable buttons, menus, and more – all using only CSS and HTML.

Clicking on the title will direct you to the documentation/tutorial, while clicking on the accompanying image will direct you to the demo page if it’s separate from the documentation.

1. Hoverbox Image Gallery
A pure css-based gallery; hovering over an image enlarges it.

2. Advanced CSS Menu
A creative and complex navigation scheme.

3. Sliding Photograph Galleries
An accordion effect; hovering over an image expands it.

4. Lightbox Slides
Part of an article entitled “Supercharge your image borders” showcasing how you can use


Make sure to checkout the full list and their links at Six Revisions » 30 Exceptional CSS Techniques and Examples).

960 Grid System

Very useful, incredible helpful when you don’t want to go through the same grid drawing motions every time you begin a new project. NIcely presented:

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Definitely download and check it out at » 960 Grid System.