Wednesday, 21 September 2011

Rounded corners for IE

 <div class="rounded-corners"> This rounded corner will

also work in IE </div>


.rounded-corners{border: 1px solid #fff;
padding: 60px 0; margin:20px;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 0px 0px;
-moz-box-shadow: #666 0px 0px 0px;
box-shadow: #666 0px 0px 0px;
background: #333333;
background: -webkit-gradient(linear, 0 0, 0 bottom,

from(#333333), to(#cccccc));
background: -webkit-linear-gradient(#333333, #cccccc);
background: -moz-linear-gradient(#333333, #cccccc);
background: -ms-linear-gradient(#333333, #cccccc);
background: -o-linear-gradient(#333333, #cccccc);
background: linear-gradient(#333333, #cccccc);
-pie-background: linear-gradient(#333333, #cccccc);
behavior: url(PIE.htc);}


Rounded-corner-generator

Tuesday, 20 September 2011

CSS Hack

Hacking for Chrome

@media screen and (-webkit-min-device-pixel-ratio:0) {
.myClass { background-color: #FF0000; }

Hacking for Safari only

@media all and (-webkit-min-device-pixel-ratio: 0) { selector { property: value; } }

Hacking for Safari 3 only

selector:not(:root:root) { property: value; }

Hacking for IE6- only

/*\*/ * .class { margin:20px 0; } /**/  }

Hacking for IE5/Mac only

/*\*//*/ .class { height:320px; } /**/