CSS3 Rundungen und Farbverlauf

Da man mit CSS3 mittlerweile so einige Dinge anstellen kann, hab ich kurzerhand mein Template hier auf das Standard „Twentyten“ umgestellt und ein wenig herumgebastelt. „Just for fun“.

Leider unterstützt der Internet Explorer in Version 9 keine der neuen Möglichkeiten, die CSS3 bietet und glänzt mit Nichtachtung der entsprechenden CSS Statements.

Im aktuellen Firefox siehts so aus wie es sein soll:

Der IE sagt DANKE, aber im Moment leider „NEIN DANKE“:

 

Die verwendeten CSS3 Eigenschaften

Für die Rundungen + Schatten des Wrapper:

• -moz-box-shadow: inset 0 0 5px 5px #888;
• -moz-border-radius:15px;

Für die Rundungen der Widgetfenster + Überschriften in den Widgets (zb. Archive) kommt ebenso die Eigenschaft -moz-border-radius zum Einsatz.

Sollen auch andre Browser, die CSS3 „verstehen“ diese Eigenschaften umsetzen können muss man die entsprechenden CSS3 Eigenschaften in die CSS Datei eintragen. Hierfür wird eine Art Präfix verwendet:

• Bei Mozilla: -moz-
• Bei Webkit (Safari, Chrome…): -webkit-
• Bei Opera: -o-
• Für den IE10 (BETA!): -ms-

Aus -moz-box-shadow, wird also zb.: -webkit-box-shadow, -o-box-shadow oder auch -ms-box-shadow

Body Background

Als Hintergrund für den Body werden folgende CSS3 Eigenschaften verwendet:

• background:-moz-radial-gradient(center, #fff, #adf);
• background:-webkit-gradient(radial, center center, 80, center center, 400, from(#fff), to(#adf)); background:-webkit-radial-gradient(center, #fff, #adf);
• background:-o-radial-gradient(center, #fff, #adf);
• background:-ms-radial-gradient(center, #fff, #adf);

Man darf gespannt sein, wie sich das noch weiter entwickelt. Jedenfalls bietet CSS3 einige sehr interessante Aspekte, um ansprechende Websites zu gestalten, ohne -wie bisher – auf grafische Elemente zurückgreifen zu müssen (Bsp.: Schattendarstellung.)