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 */ }
blog comments powered by Disqus
