One of the most notable new additions in Firefox 4 is support for CSS3 Transitions (with the -moz- prefix). Webkit based browsers (such as Safari / Chrome) and Opera have supported CSS3 Transitions for some time, almost three years in Webkit’s case, and it is reassuring to see that Mozilla have finally made an effort to catch up with the competition in this area.

According to the Mozilla Hacks blog;

This beta release contains a nearly complete implementation of CSS Transitions, privately namespaced with a -moz prefix. The only big things left here are the animation of transforms and gradients. (Gradients is still waiting on working group feedback, code for transitions is under review.)

You can read more on Mozilla’s implementation of CSS3 Transitions on the Mozilla Developer Center along with several examples.

What Else is New?

Firefox 4 also brings several other improvements/changes in terms of CSS3 support including:

* Resizable textarea Elements – Textarea elements are now resizable by default. You can use the -moz-resize property to change the default.

* New CSS3 calc() support – This beta includes support for the new CSS3 calc() value. This lets you specify sizes that include a combination of percentages and absolute values and is hugely popular with developers. More info here.

* Selecting a section of a background image – You can now use the new -moz-image-rect selector to select only a section of a background for display.

* Removed support for -moz-background-size – The -moz-background-size property has been renamed to its final background-size name. -moz-background-size is no longer supported.

* Privacy and the :visited selector – Implementation of changes, announced in March, with regard to what information can be obtained about the style of visited links using CSS selectors. This may affect some web applications. More information here.

In addition to the above, Mozilla have also added a new -moz-any selector. Although not part of the CSS3 specification, -moz-any is a powerful selector that lets you replace large and complicated selectors with much smaller ones. More details can be found on the Mozilla Hacks blog.

You can read more on The Mozilla Blog or Mozilla Hacks and, if you haven’t already, you can download the beta release here.

Mozilla have promised a new beta release every two to three weeks.

The following showcase includes some examples of brilliantly illustrated web designs to help inspire you for your next project.

31. Arbel Designs

A very cool one page portfolio site. Click around on the navigation here to see all of the various levels of the design.

32. Katherine Designs

Who doesn’t love a site with robots? This site sports a pastel color scheme and lots of little robot illustrations.

33. Cool Brush Design

This sit sports a very detailed graphic of a castle and ocean scene that works with Flash.

34. Bird Boxx

A large illustration on this website easily translates that sites name to help make it more memorable.

35. Ready Made Design

A nice color scheme and illustrations make this website very easy on the eyes.

36. Olive Crush

These guys use a simple illustration and textures to help add some personality to the site design.

37. Chirp

Designed entirely with the hand drawn style in mind, Chirp has an artistic style that is very much its own.

38. Dedoce

This underwater scene has a bit of a grunge feel to it that helps keep it from looking like another vector illustrated website.

39. PSD to WP

Here is a one page site that uses a powerful background image to build its sites personality and brand off of.

40. Morphix

This site mixes a creative blog layout with nice illustration to create a blog design that is very untypical, but very memorable.

The following showcase includes some examples of brilliantly illustrated web designs to help inspire you for your next project.

21. Indofolio

This is a must see side scrolling site. Aside from the amazing artwork, it also has a nice transition from page to page to helps added to the feel of the site.

22. Pralinen Schachtel

I like that the illustration on this site has made sure to create some depth to the picture. This is something many vector illustrations lack.

23. Branded 07

This site is full of outstanding illustration. Be sure to check out the footer area on this one.

24. Vindem Teren

I’m not really sure what this site does, but based on the illustration it looks to be some sort of real estate based site. Goes to show you that images can speak volumes.

25. Digital Impact Outdoors

The illustration in this website design does an excellent job at conveying the overall message of the website and adding to its value.

26. Store Envy

Here is a site that mixes very modern user interface style with some bright and colorful illustration work.

27. Los Colores Olvidados

If Tim Burton were a web designer, I would think that his website would look a little something like this.

28. Andy Adventure

One would expect that animated games would have a bold and artistic website. While this isn’t the most clever design, it is certainly big and bold.

29. The Pixel

Simple animation, outstanding artwork, and clever layout; this website has it all.

30. Synch Media

A combination of unique colors, layout, and illustration make this website very unique and different.
(Next to Illustrated Web Designs Part 4)

The following showcase includes some examples of brilliantly illustrated web designs to help inspire you for your next project.

11. Atomic Cartoons

This is just an amazing website. You MUST check this site out and click around a bit.

12. Kidd 81

Here is another site with a style that stands out from the crowd and one that the designer has used to brand them self very well.

13. Grepit

This site offers a very slick and clever looking diagram type illustration to convey what it is they do.

14. Bimbi Sicuramente

I have no idea what this site is about, but I like that the vector illustration is full of texture and offers a bit of depth to it.

15. Abduction Lamp

This site even comes in 3D! Well, not really, but it’s still a clever aspect of the design.

16. Outlaw Design Blog

It is all about the little details in this site. The gun in holster on the menu, random bullet holes, and other touches help make this site a bit different.

17. Blossoms Village

While not the greatest looking website on this list, it just goes to show that some bold illustration work can go a long way in making your design look even better.

18. Attack of the Web

This is one of those websites that just make you wonder where they got the idea from. This is a clever and funny one page layout.

19. Bet Your Followers

I don’t really get the point of this website, but it shows very creative use of some excellent stock illustration work.

20. Camellie

Creating a clever and artistic website is easy when you have as much talent as Camellie does. If only we were all this talented.
(Next to Illustrated Web Designs Part 3)