Anleitung im Internet unter http://stellatest.de

css altes und neues in css3

Die Systematik dieser Darstellung ist in Anlehnung an die englischsprachige Seite von w3school.com entstanden. Dort ist zu CSS3 und vielen anderen Themen umfangreiches Schulungsmaterial zu finden. Interessante Online-Editoren erlauben es auf dieser Seite, sebständig mit eigenem Code zu experimentieren.

CSS-Befehle als Inline-style, im Headbereich oder extern

Die Verwendung von CSS-Befehlen im HTML-Dokument hat sich nicht geändert. Folgende Möglichkeiten sind aber so entscheidend, dass sie hier dennoch nochmal aufgeführt werden.

CSS direkt im HTML-Text als Inline-Style

<p style="color: blue">Absatz mit Farbauszeichnung direkt im Text</p>

Diese Auszeichnung direkt am Element macht nur dann Sinn, wenn sie nur an dieser einen Stelle gelten soll.

Auszeichnung außerhalb des HTML-Elementes im Style-Bereich des HTML-Textes

<style>

p {color: blue;}

</style>

<p>Absatz erhält seine Farbauszeichnung im Html-Dokument</p>

Die Auszeichnung im Style-Bereich gilt für alle Elemente im selben Dokument

Auszeichnung in einer externen CSS-Datei

Im HTML-Dokument werden externe CSS-Dateien verlinkt

In einer angelegten externen CSS-Datei stehen die Befehle

/* CSS Datei screen.css mit Befeheln für die Bildschirmansicht */

p {color: blue;}

/* CSS Datei print.css mit Befeheln für den Druck*/

p {color: black;}

Die Auszeichnungen in der externen CSS-Datei gelten in allen HTML-Dokumenten, die mit dieser Datei verlinkt sind.

NEU in CSS3: runde Ecken

border-radius ermöglicht es jedem Element "runde Ecken" zuzuweisen.

Beispiele und der Code dazu

.RundeEcken {

border-radius: 25px;

background: #73AD21;

padding: 20px;

width: 500px;

height: 150px;

}

.RundeEcken2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 500px;
height: 150px;
}

.RundeEcken3 {

border-radius: 25px;
background: url(steine.png);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 500px;
min-height: 150px;

}

Das Bild für den Hintergrund finden Sie unter: steine.png http://stellatest.de/anleitungen/css/steine.png

Die Ecken lassen sich auch einzeln definieren mit: border-top-left-radius, border-top-right-radius, border-bottom-right-radius und border-bottom-left-radius; es ist auch möglich alle vier Werte in dieser Reihenfolge hinter den Befehl border-radius zu schreiben. Beispiel: border-radius: 5px 20px 5px 20px;

Farben - Beispiel: RGBA Colors

RGBA Farbwerte sind eine Erweiterung der RGB-Farben um einen Alphakanal, der eine Transparenz (opacity) ermöglicht.

Der Alphakanal kann Werte von 0.0 (100% Transparenz) bis 1.0 (0% Transparenz) einnehmen.

Example

.rgbaeins {background-color: rgba(255, 0, 0, 0.3);} /* Rot mit Transparenz */

.rgbazwei {background-color: rgba(0, 255, 0, 0.3);} /* Grün mit Transparenz */

.rgbadrei {backgound-color: rgba(0, 0, 255, 0.3);} /* Blau mit Transparenz */

.rgbavier {background-color: rgba(0, 0, 255, 0.3);} /* Schwarz mit Transparenz */

CSS3 box-shadow Property

Der Befeht box-shadow ermöglicht es, einem Element Schatten hinzuzufügen.

Die ersten beiden Werte legen den horizontalen und vertikalen Abstand fest
Der dritte Wert legt die Unschärfe fest.
der vierte Wert legt die Farbe fest.

div {

box-shadow: 10px 10px 5px rgba(0,0,0,0.3);

background: yellow;

width: 600px;
}

CSS3 Hintergründe (background)

Neue Eigenschaften ermöglichen mehr Einstellungen für Hintergrundbilder

background-size (Größe des Hintergrundbildes)
background-origin (Startposition des Hintergrundbildes)
background-clip (Beginn der Farbe eines Hintergrundes)

CSS3 Multiple Backgrounds

Die Hintergrundbildeigenschaften ermöglichen es, mehrer Bilder im Hintergrund zu platzieren.

Example

(Das Blumenbild für den Hintergrund finden Sie unter: blumen.png http://stellatest.de/anleitungen/css/blumen.png)
(Das Sandbild für den Hintergrund finden Sie unter: sand.png http://stellatest.de/anleitungen/css/blumen.png)

.background1 {
background-image: url(blumen.png), url(sand.png);
background-position: right top, left top;
background-repeat: no-repeat, repeat;
background-size:150px,auto;
padding:20px;
}

CSS3 Festlegung der Hintergrundgröße (background-size)

Seit CSS3 kann die Größe des Hintergrundbildes definiert werden. Zum Beispiel durch die Angabe der Größe, eine Prozentangabe oder durch die Schlüsselbegriffe contain (Größe in Bezug auf den Textinhalt) oder cover (Größe bezogen auf die Gesamtgröße des Hintergrundbereichs.

Hervorzuheben sind vor allem die beiden Größeneigenschaften contain und cover.

background-size: contain skaliert das Hintergrundbild so groß wie möglich, aber nur so weit, dass sich die Breite und Höhe eines Bildes innerhalb des Hintergrundbereiches befinden. Es kann daher in Abhängigkeit von den Bildproportionen sein, dass ein Teil des Hintergrundes nicht vom Hintergrundbild bedeckt ist.

background-size: cover skaliert das Hintergrundbild so, dass in jedem Fall so, dass der gesamte Hintergrundbereich komplett bedeckt wird. Das kann - abhängig von den Bildproportionen - dazu führen, dass ein Teil des Bildes nicht sichtbar ist.

Hier zwei Beispiele

Beispiele

(Das Blumenbild für den Hintergrund finden Sie unter: blumen.png http://stellatest.de/anleitungen/css/blumen.png)

.bgcontain {
background: url(blumen.png);
background-size: contain;
background-repeat: no-repeat;
}

.bgcover {
background: url(sand.png);
background-size: cover;
background-repeat: no-repeat;
}

CSS3 background-origin Eigenschaft

Die Eigenschaft background-origin bestimmt, an welcher Stelle das Bild positioniert wird.

border-box: Das Hintergrundbild beginnt an der oberen linken Ecke am äußeren Rand der Umrandung.
padding-box: (Standardeinstellung) Das Hintergrundbild beginnt am innerhalb der linken oberen Ecke.
contet-box: Das Hintergrundbild beginnt an der linken oberen Ecke, an der der Text beginnt. Beginnt der Text z.B. durch eine Padding-Einstellung 15px vom oberen Rand entfernt, beginn dort auch das Hintergrundbild.

Example

.bgcontentbox

{

border: 10px solid black;

padding: 15px;

background: url(blumen.png);

background-repeat: no-repeat;

background-origin: content-box;

background-position: right;

background-color: #ffff00;
background-clip: content-box;

}

CSS3 background-clip Property

Wird kein Hintergrundbild sondern eine Hintergrundfarbe verwendet, legt background-clip fest, wo die Hintergrundfarbe positioniert wird.

Folgende Werte können verwendet werden:

border-box: (Standardeinstellung) Die Farbe beginnt am äußeren Rand der Umrandung
padding-box: Die Farbe beginnt am inneren Rand der Umrandung
content-box: Die Farbe beginnt dort, wo auch der Inhalt beginnt.

stellaplan Verlag | Johannes Bucka. Diese Anleitung steht unter Creative Commons Lizenz mit folgenden Merkmalen: Namensnennung | Keine kommerzielle Nutzung | Weitergabe unter gleichen Bedingungen