Using CSS 3, we can create multiple background image on an website in one div…

Here is a very simple example showing the use of multiple background images in one div.
Is this the end of nested elements with tons of CSS to create a layered effect? Hope so…

This is the syntax of CSS about multiple background  image:

#multipleBG {
border: 5px solid #cccccc;
background:url(img1) top left no-repeat, url(img2) bottom left no-repeat, url(img3) bottom right no-repeat;
padding: 15px 25px;
height: inherit;
width: 590px;
}

Browser Support:
FireFox 3.6 and later, Google Chrome 1.0, Opera 9.6, Safari 3.2.1

EXAMPLE

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.

Another exciting new border feature of CSS3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image. These two values are shorthands for:

• border-image:
  • border-top-image
  • border-right-image
  • border-bottom-image
  • border-left-image

• border-corner-image:
  • border-top-left-image
  • border-top-right-image
  • border-bottom-left-image
  • border-bottom-right-image

border-image currently works in Safari and Firefox 3.1 (Alpha). The syntax to use it is:

border-image: url(border.png) 27 27 27 27 round round;

Which results in:

Lorem ipsum dolor sit amet.

or

border-image: url(border.png) 27 27 27 27 stretch stretch;

Which then results in:

Lorem ipsum dolor sit amet.

For those of you not so lucky as to be able to see this, here are screenshots of the two examples.
Number One :

Number Two :

W3C has offered some new options for borders in CSS3, of which, next to rounded borders, border-color is also very interesting.

Mozila/Firefox has implemented this function, which allows you to create cool colored borders.

This is an example:

The CSS code for this is:

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;

And of course, you can also do cool color stuff: