CSS: Rounded corner, gradient, drop shadow and opacityDec 22, 2010

As a web developer have you ever deal with a designer who is very fond of using rounded corners, drop shadows, gradients and opacity in his/her designs and made you pull your hairs, during my 2nd job I had experience to deal with such a designer.

Let's have a look how we can create rounded corners, gradient backgrounds, drop shadow box and opacity by following simple CSS techniques.

Rounded corners

.curve {
    -moz-border-radius : 5px; /* Firefox */
    -webkit-border-radius : 5px; /* Safari & Chrome */
    -khtml-border-radius : 5px; /* Linux browsers */
    border-radius : 5px; /* CSS3 compatible browsers */
}

Gradient background

.gradient {
    background : -moz-linear-gradient(top,  #FFF,  #000); /* Firefox 3.6+ */
    background : -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#000)); /* Safari & Chrome */
    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#000000'); /* IE 5.5 - 7 */
    -ms-filter : "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF0000FF, endColorstr=#FFFFFFFF)"; /* IE 8 */
}

Drop shadow box

.shadow_box {
    -moz-box-shadow : 4px 4px 5px #000; /* Firefox 3.5+ */
    -webkit-box-shadow : 4px 4px 5px #000; /* Safari 3+ & Chrome */
    box-shadow : 4px 4px 5px #000; /* CSS3 compatible browsers */
    filter : progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000'); /* IE 5.5 - 7 */
    -ms-filter : "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')"; /* IE 8 */
}

Opacity

.opacity {
    -moz-opacity : 0.8; /* Firefox & Netscape*/
    -khtml-opacity : 0.8; /* Safari 1+ & Chrome */
    opacity : 0.8; /* CSS3 compatible browsers */
    filter : alpha(opacity=80); /* IE 5 - 7 */
    -ms-filter : "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
}