CSS statt Bilder: 5 Tricks Sonntag 7 Feb 2010
CSS ist ein sehr mächtiges Instrument. Dies zeigt auch der Artikel «Forget About Photoshop: 5 More Ways To Stop Using Images In Your Designs». Die dort verwendeten CSS-Properties sind zwar aufgrund der noch fehlenden, finalen CSS3-Standards fast alle browserspezifisch (-moz-, -webkit usw.), dafür aber gibt es auch die entsprechenden Internet Explorer Filter.
Unter anderen wird die Technik für Dropshadows und Text Shadow gezeigt, welche ich ebenfalls für die neue Version von www.derfinger.ch (wobei ich die IE-spezifischen Definitionen noch einfügen muss) verwendet habe.
.module {
background-color: #cccccc;
/* offset left, top, thickness, color with alpha */
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
/* IE */
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
/* slightly different syntax for IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')";
}
Hoffentlich wird CSS3 bald verabschiedet und entsprechend von allen Browser-Herstellern implementiert. Die Herstellerspezifischen Hacks sind halt doch ziemlich viel “redundanter” Code.
