Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us [email protected].

Cool Tools and Toys for Web Developers

John, the lead developer (ok, pretty much the only developer) of Style Master is an avowed hacker. He loves exploring and experimenting with the latest features in browsers. Here's a collection of tools for web developers he's put together to help you analyse and debug your sites (and other people's sites as well), play with CSS3 features (bleeding edge browsers recommended) and more.

XRAY

XRAY works in Safari, Firefox and Internet Explorer. It helps you visualize the layout of your page. Add it to your bookmarks, and then on any web page, use it to see the position, margins, padding, dimensions and more details of any element. Try it now.

XRAY uses lots of cool CSS3 features like border-radius, opacity, box and text shadow, as well as the HTML5 canvas.

MRI

MRI helps you create the best possible selectors for your CSS. Add MRI to your bookmarks bar, then for any page, click an element, and MRI suggests selectors for that element. You can also test selectors with it. Try it now

MRI also uses lots of cool CSS3 features like border-radius, opacity, box and text shadow, as well as the HTML5 canvas.

CSS3 Sandbox

Gradients

Explore CSS gradients (both linear and radial) (an experimental feature in Safari 4, and a proposed addition to CSS3). You'll need Safari 4 or a webkit nightly to see the gradients in action, or Firefox 3.6

Shadows

CSS now lets you create drop shadows on text, and on the box of an element. Explore CSS3 transforms (supported in Opera 9, Firefox 3.5 and Safari 1.2 and higher), and box-shadows (supported in Firefox 3.5 and Safari 3.1).

CSS Transforms

You can rotate, scale, skew, and otherwise transform HTML elements with CSS 3. Explore CSS3 CSS Transforms (supported in Opera 10.5, Firefox 3.5 and Safari 4 and higher).

CSS Text Stroke

You can stroke text with experimental CSS text-stroke, supported in Safari 4

Coming soon

We've got more cool tools coming soon to the sandbox, including tools to help explore opacity, multi-column text, transitions, animations and embeddable fonts. Subscribe to our feed to keep up to date.