I generally have been using loading gifs in my work most of the time to inform the user that the resources are being fetched asynchronously from the server. Ajaxload website is perhaps one of the most used site to download a suitable gif. In this post I will demonstrate a css3 only way to create a nice loading simulation Basic Code We will use nested divs to create the loading animation control ```

When I first started web programming, creating a center aligned div was one of the most common task that I saw myself doing. since div is a block element, i.e. it takes up the full width available, and has a line break before and after it, it can easily be centered using relative styling { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; } However lately I have preferred using absolute positioning technique over relative, this works for all browsers and is best for login screens or alert messages over a translucent shim.

When css3 arrived, one of the goodies that I found was, the inclusion of Drop Shadow effect, namely **Box Shadow *and Text Shadow. Here I present a cross browser utility css class which can be used for a drop shadow effect, without any image. .shadow { / For IE 8 / -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; / For IE 5.5 - 7 */ filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3px 4px #000; box-shadow: 3px 3px 4px #000; } For cross browser text shadow effect ,I found a nice article here.

When I started programming and had to begin designing my first user interface in HTML, I was always puzzled as to why are all visual elements in HTML rectangular. I soon learned that in those days if one would want a circle to be drawn on a page, then the only way possible was using an image, the same was true for drawing elements with rounded corners. Thankfully HTML5/CSS3 guys were listening and the latest css3 standard supports defining the corner radius of a circle, this can be used to make an element look like a circle too if you want.

Css has a very useful property called Opacity, which basically is a measure of transparency of an element. All modern browsers Yes yes even IE has support for it. In most browsers the value is between 0 minimum [transparent] i.e not visible to 1 maximum [opaque] i.e. completely visible In IE the value is between 0 and 100 ,don’t ask why they just like to make us unhappy. Here I present a helper css class which will work in all browsers.