Hinweis:
Diese Website ref.thorstn.com wird nicht weiter aktualisiert. Die hier vorliegende Version der Webpräsenz wird nicht mehr mit dem CMS realisiert, sondern mittels HTML-Dateien als Archiv dargestellt. Datum: 7.1.2021
Diese Website ref.thorstn.com wird nicht weiter aktualisiert. Die hier vorliegende Version der Webpräsenz wird nicht mehr mit dem CMS realisiert, sondern mittels HTML-Dateien als Archiv dargestellt. Datum: 7.1.2021
CSS3 - Abgerundete Ecken
Abgerundete Ecken:
Dieser Effekt wird bereits bei der "abgerundeten Newsbox" angewendet.
Die für die Rundung notwendigen Angaben im CSS sind wie folgt notiert (beispielhaft):#myBox {
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Nur einzelne Rundungen:
Kompatibilität:
Leider stellen derzeit nicht alle Browser diese Effekte dar, insbesondere der Internet Explorer 8 (und darunter) spielt da nicht mit. Aber siehe die Tricks weiter unten...
Leider stellen derzeit nicht alle Browser diese Effekte dar, insbesondere der Internet Explorer 8 (und darunter) spielt da nicht mit. Aber siehe die Tricks weiter unten...
Reihenfolge der Pixelangaben:
links-oben / rechts oben / rechts unten / links unten
#myBox {
-webkit-border-radius: 10px 10px 0 0;
-khtml-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
-webkit-border-radius: 10px 10px 0 0;
-khtml-border-radius: 10px 10px 0 0;
-moz-border-radius: 10px 10px 0 0;
border-radius: 10px 10px 0 0;
}
Newsbox mit Schatten
Diese Newsbox ist via CSS3 realisiert.
Diese Newsbox ist via CSS3 realisiert.
Abgerundete Newsbox mit Schlagschatten
An dieser Stelle sind die für den Schatten notwendigen CSS-Angaben notiert:
#myBox {
-webkit-box-shadow: 5px 5px 5px #626262;
-moz-box-shadow: 5px 5px 5px #626262;
box-shadow: 5px 5px 5px #626262;
}
-webkit-box-shadow: 5px 5px 5px #626262;
-moz-box-shadow: 5px 5px 5px #626262;
box-shadow: 5px 5px 5px #626262;
}
Tricks für Internet Explorer 6 bis 8:
Ab Internet Explorer 9 wird auch CSS3 unterstützt. Für die Versionen 6 bis 8 stellt die Webseite css3pie.com eine auf Java basierende Lösung, ebenfalls einige CSS3-Effekte darzustellen, bereit.Weitere Informationen bitte der Webseite www.css3pie.com (englisch) entnehmen!
Die hier oben angewendeten Effekte für IE 6-8 mit PIE: (angewandt auf moziloCMS)
- Download der benötigten Dateien von der Webseite css3pie.com
- Entpacken der ZIP-Datei in den Ordner moziloCMS-Instanz/layouts/layoutname/pie
- Angaben für die .css Datei des Layouts:
Die nötigen Angaben sind bereits oben beschrieben (z.B. border-radius:10px; für die abgerundeten Ecken). Für die Einbindung des PIE wird noch eine zusätzliche Angabe benötigt:
behavior: url('../pie/PIE.htc'); - Anpassung der template.html des Layouts:
In den <head> Bereich folgendes eintragen:
<!--[if lte IE 8]>Für jede Class oder ID (z.B. div.newsboxrundschatten) muss die Angabe in den <head> Bereich getätigt werden - natürlich nur für die unterstützten CSS3-Effekte.
<style type="text/css">
div.newsboxrundschatten {behavior:url({LAYOUT_DIR}/pie/PIE.htc);}
div.newsboxrund {behavior:url({LAYOUT_DIR}/pie/PIE.htc);}
div.newsboxrundoben {behavior:url({LAYOUT_DIR}/pie/PIE.htc);}
</style>
<![endif]-->