CSS3Pie: Facelifting für IE 6-8
CSS3Pie bietet für die ältere Browsergeneration einige nützliche Features, die sich sehr einfach mittels CSS einbinden lassen. Das von Jason Johnston erstellte Script ist derzeit in der Version 1.0beta5 erhältlich und lässt sich entweder als .htc Datei oder mittels Javascript einbinden.
Derzeit unterstützt Pie unter anderem die folgenden CSS3 Befehle:
- border-radius (abgerundete Ecken)
- box-shadow (Schatten für Blockelemente)
- border-image (Bilddateien als Rahmen)
- gradients (Verläufe)
Eine CSS Datei mit Pie Unterstützung könnte folgendermaßen aussehen (.htc Variante):
.round {
border: 1px solid #000;
border-radius: 20px;
}
.gradient {
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33); /* pie gradient */
}
.shadow {
background-color:#fff; /* important for ie */
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
}
.round, .gradient, .shadow { behavior: url(PIE.htc); } /* the magic */
border: 1px solid #000;
border-radius: 20px;
}
.gradient {
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33); /* pie gradient */
}
.shadow {
background-color:#fff; /* important for ie */
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
}
.round, .gradient, .shadow { behavior: url(PIE.htc); } /* the magic */
