The CSS+ bundle is a project I've been working on for a while. It is a vast collection of CSS snippets and commands which has completely changed the way I write CSS.

When I started using TextMate for development I was amazed by the simplicity and flexibility of its Bundle Editor. This, coupled with existing bundles such as Minimal Design's mCSS bundle inspired me to find ways to use it to speed up my general development. While the mCSS bundle is an amazing piece of work, I felt it could do so much more. With this in mind, I started my own bundle, with the view that I would never need to write a line of CSS by hand again.

Using the bundle

The CSS+ bundle contains (nearly) every line of CSS you will ever need to write, all mapped to Tab Triggers. All the shortcuts have been set up so you can write the first letter of each word in the line you want, then hit tab to expand the full line.

c  -> colour: #fff;
b  -> border: 1px solid #777;
mt -> margin-top: 10px;
ts -> text-shadow: 1px 1px 2px #000;

Read More

This is the result of a long evening playing with box shadows and gradients — an iPhone icon made with CSS.

Make sure you hover for yet more outrageously complicated styling.

You've probably seen similar experiments where people have used hundreds of empty <div> and <span> elements to recreate similar details to a pixel perfect level. I decided to take a different approach and write my optimal HTML first.

<span class="iphone">iPhone</span>

That's all there is! Although limiting, I still managed to achieve a fairly impressive result using this one element and its :before and :after pseudo elements. The <span> element itself forms the iPhone body, the :after pseudo element handles the lock / home screen whilst the :before pseudo element forms the home button.

The bulk of the styling makes use of multiple background gradients, sizes and positions. Combine that with the fact that every CSS3 property is duplicated 5 times with various vendor prefixes and the overall CSS file length of 200 lines doesn't seem too crazy.

Here is the exact same icon, this time scaled up three times to allow you to see the finer details (or lack of).

There is a tiny amount of JavaScript in use on this demo — it updates the :after pseudo element's content property to ensure the icon is always displaying the correct time.

You may also notice at this zoom level that the icon is modelled on an iPhone 3GS — this demo has been living on my hard drive for a while!

Disclaimer: This is an experiment and was a great learning experience. I would never recommend using something this complicated or pointless on an actual site.

Demo Source

Multiple document windows are a little known Photoshop feature that saves a lot of zoom effort! To open a second window for an open document, go to Window > Arrange > New Window for [filename].

This comes in very useful when you need to zoom in to a high level but would still be able to see realtime changes to your document at 100%. I mainly use this when designing icons, with two or three copies of a document open simultaneously, each at a different zoom level.

There are countless examples of people making progress bars using nothing but CSS — this one is different.

There are no images, the HTML is extremely minimal and the animation is handled by a pseudo element. Unfortunately this means it's only animated in Firefox for now.

The CSS above is interactive — change the width value in Firefox to see the animation in action.

This is the only example I have seen so far that makes use of a negative background-position to animate the colour of the bar from red, through orange and yellow, to green — depending on the amount of progress made.

For those of you who don't want to wake the slumbering beast that is Firefox, here are a few more examples of the colour changing goodness that you are missing.

I've hard-coded non-animated widths on these to illustrate how the progress bar looks at vartious stages of its transition, at 0%, 25%, 50%, 75% and 100% progress.

Pros

The markup is beautiful! No wrapping or empty elements.

<div role="progressbar">85% Complete</div>

Switching the <div role="progressbar"> for a <progress value="85%" max="100%"> would make this semantically better but browser support for styling progress elements is extremely poor at the moment.

An actual implementation of this would also need some method of updating the value(s) within the markup.

Cons

This is a prototype that is not yet ready to be unleashed on the world. I have set up this demo to animate using CSS transitions whereas a real implementation would probably need some JavaScript interaction to dynamically calculate the user's actual progress. Using JS to handle the animation would also negate some of the browser compatibility issues which the :after pseudo element causes.

I could also have increased browser support for this demo by using extra markup instead of pseudo elements but this goes against what I was trying to achieve.

Demo Source

I often find clients want good Google Maps integration on their sites — Some more than others! After the first few, I decided to put together a handy Photoshop document containing all the common assets needed when coming up with concept designs involving maps.

Some components in the template have been converted to vector for easy resizing, while others (such as the zoom control) have been split into parts. I've tried to keep all components as pixel perfect as possible.

Download