CSS Transparency Effect for All Browsers

Another interesting property of CSS or Cascading Style Sheets is transparency. Like the border radius property, which you can see on my post about CSS rounded corners with no images, this is treated differently in all browsers. It will take a four statements to completely make transparency effect in all browsers. But you don't have to worry on this statements because they will not interfere with each other. Below is the CSS statements for a class to make a 50% transparency effect.

.transparent_class {
    opacity: 0.5; /* standard CSS */
    filter:alpha(opacity=50); /* Internet Explorer */
    -moz-opacity:0.5; /* Mozilla Firefox */
    -khtml-opacity: 0.5; /* Safari */
}

Javascript Floating Images on a Web Page

Here is a javascript code which will make images floating and moving in any direction on your web page. You can see the demo of this functionality at SEMAJ - The Officail Site of James Cuerpo Figues. Notice the two animated butterflies looks like flying around my web page. If you want this on your website, I provided the download link below. Just open the index.html on your browser and you can see the sample page containing floating images. You can copy the codes easily and apply it to your web page if you want.

Download the source code of floating images in zip file by clicking here.