Useful CSS Stylesheet Tips & Trick-part 1
by Mohan[ Edit ] 2012-09-18 14:38:14
<h2>1. Round Corners without images</h2>
Here is a simple CSS technique of rounding off the corners of the DIV using some css attributes. This technique will work in Firefox, Safari, Chrome and any other CSS3-compatible browser. This technique will not work in Internet Explorer.
div {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
To round a specific corner (top-left or bottom-right) use below stylesheet.
div {
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
}
<h2>2. Create an IE Specific Stylesheet</h2>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->
IE 7 Only
<!--[if IE 7]>
<link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->
<h2>3. Background Image of Textbox</h2>
input#sometextbox {
background-image:url('back-image.gif');
background-repeat:no-repeat;
padding-left:20px;
}
<h2>
4. Cross Browser Opacity
</h2>
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
<h2>5.Rotate Text using CSS</h2>
This example rotates text 90 degrees counterclockwise.
.rotate-style {
/* Safari */
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid
XImageTransform.Microsoft.BasicImage(rotation=3);
}
