Useful CSS Stylesheet Tips & Trick-part 1

by Mohan 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: progidVery Happy
XImageTransform.Microsoft.BasicImage(rotation=3);
}

Tagged in:

639
like
0
dislike
0
mail
flag

You must LOGIN to add comments