CSS3


Mit CSS (Cascading Style Sheets) lassen sich Seitenlayout und Inhalte voneinander getrennt und formatiert darstellen, CSS3 kann eine Menge weiterer Formatierungsmöglichkeiten ausgeben, falls dies der Browser unterstützt.

Eingebunden in HTML wird die CSS3 wie die CSS2 Datei und in den HTML Kontainer zugewiesen.

...
<div id="id_name">Hier können weitere HTML Kontainer angegeben werden,<br />
diese werden dann wie in der CSS Datei Formatiert.</div>
...

HTML Code Beispiel:




Alles was mit Schriftart, Schriftgröße, Farbe, Ausrichtung zu tun hat.

font-family


Mit CSS3 kann eine eigene Schiftart installiert werden. Diese wird dann beim Aufruf der Webseite im Browser ausgegeben.

Die gewünschte Schriftart wird zuerst mit „@font-face“ in der "*.css" Datei festgelegt. Das „font-family“ Element legt den Namen der Schriftart fest, das „src“ Element verweist auf die Quelle der Schriftart.

@font-face {
    font-family: GoudyBookletter1911;
    src: url(GoudyBookletter1911.ttf);
}

CSS Code Beispiel:

Die zuvor Definierte Schriftart wird dann wie im unteren Beispiel ausgegeben.

#id {
    font-family: GoudyBookletter1911;
}

CSS Code Beispiel:


Ausgabe im Browser:




Mit CSS3 stehen neue Optionen für „border“ zur Verfügung.

  • border-radius ⇒ Ecken abrunden.
  • box-shadow ⇒ Schatten.
  • border-image ⇒ Rahmen aus Bild erzeugen.




border-radius


Ecken vom (Rand)Rahmen abrunden.

#br {
border: 2px solid #000000;
padding: 10px 30px; 
background: #02dd02;
width: 300px;
border-radius: 25px;
-moz-border-radius: 25px; /* Firefox 3.6 und < */
}

CSS Code Beispiel:


<div id="br">Das border-radius Attribut erlaubt, die Ecken eines Elements abzurunden.</div>

HTML Code Beispiel:

border-radius.jpg
Ausgabe im Browser:



box-shadow


Schatten an Element hinzufügen.

#bs {
border: 2px solid #000000;
padding: 10px 30px; 
background: #02dd02;
width: 300px;
border-radius: 25px;
-moz-border-radius: 25px; /* Firefox 3.6 und < */
box-shadow: 10px 10px 5px #888888;
-moz-box-shadow: 10px 10px 5px #888888; /* Firefox 3.6 und < */
}

CSS Code Beispiel:


<div id="bs">Mit dem Element box-shadow kann man einen Schatten hinzufügen.</div>

HTML Code Beispiel:

box-shadow.jpg
Ausgabe im Browser:



border-image


Eine Grafik als Rand verwenden.

Im Beispiel mit der Grafikdatei border-image.png



Es können die Attribute

  • round ⇒ Grafik umrandet Element.
  • stretch ⇒ Grafik wird gestreckt.


verwendet werden.

#bi {
padding: 10px 30px; 
width:300px;
border-image:url(border-image.png) 10 10 round;
-moz-border-image:url(border-image.png) 10 10 round; /* Firefox */
-webkit-border-image:url(border-image.png) 10 10 round; /* Safari and Chrome */
-o-border-image:url(border-image.png) 10 10 round; /* Opera */
}

CSS Code Beispiel:


<div id="bi">Mit border-image kann man eine Grafik als Rand verwenden.</div>

HTML Code Beispiel:

border-image-round.jpg
Ausgabe im Browser:



#bi {
padding: 10px 30px; 
width:300px;
border-image:url(border-image.png) 5 5 stretch;
-moz-border-image:url(border-image.png) 5 5 stretch; /* Firefox */
-webkit-border-image:url(border-image.png) 5 5 stretch; /* Safari and Chrome */
-o-border-image:url(border-image.png) 5 5 stretch; /* Opera */
}

CSS Code Beispiel:

border-image-stretch.jpg
Ausgabe im Browser:



Cloud