Cross browser drop shadow with CSS3

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.

Read more →

Cross browser CSS3 border-radius (rounded corners)

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.

Read more →