Really nice to see some CSS3 on the Transport for London (TfL) site. This is a great example to show that CSS3 can be added to high profile sites to enhance, but not hinder, the user experience and design.

It doesn't have to look exactly the same in every browser

 

This is a screenshot of the journey planner in Firefox 3.6

 

The same form in Internet Explorer 8

The core focus of the site, like any other, is content and access to forms. By using a small amount of CSS3 the developers have added extra visual effects without having to add aditional images or markup onto the page. This is important on sites like TfL, where high performance is cruicial and bandwidth ideally kept low. 

So what was used?

 

Text shadow

On the highlighted tab an submit button.

Background gradient

On the submit button containing div.

Border radius

On the submit button and the bottom left and right of the whole panel.

Box shadow

Around the entire panel. 

How to take this further.

This is a great example to show clients and design teams that sites do not have to look the same in every browser and that you can, and should, be using CSS3 in your current projects.