ref.thorstn.com /
private moziloCMS und CSS Referenzseite

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;
}

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...

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;
}


Newsbox mit Schatten
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;
}

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]>
        <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]-->
    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.