GFX-Sector - HTML & CSS Tutorials

Moinsen

Mit der Version 3 stehen zahlreiche veränderungen ins Haus.

Die besten werde ich euch heute vorstellen.

Opacity

Mit opacity können wir die Deckkraft eines elements zuweisen.

Values:

1 -0.1

Beispiel:
opacity: 0.5;

Weist dem Element halbe Deckkraft zu.



Multi-column

Multi-column zu Deutsch: mehrere Kolumnen, also "spalten im Text".
Verfügbar für Gecko-basierende (-moz-) sowie Webkit basierende Browser(-webkit-).

column-count - anzahl der Kolumnen
column-width - Optimale weite einer Kolumne
column-gap - padding zwischen den einzelnen Kolumnen
column-rule - border zwischen den Kolumnen
column-space-distribution - Was soll mit dem rest platz gemacht werden? (noch nicht implementiert)

Values:

column-count: Ganze Zahlen (1,2,3,4...)
column-width: normale maßzuweisung
column-gap: normale abstandszuweisung
column-rule: entspricht der zuweisung wie bei border

Beispiel

-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;

Teilt den Text in soviele kolumnen mit 13 em breite, wie platz ist.



Outline


Mit outline können wir einen zusätzlichen border erzeugen, der aussen vom Element steht.
Mit dem Offset steuern wir den Abstand.
(Opera, Firefox, Safari)

Values

outline-offset: normale Abstandszuweisung
outline: wie border zugewiesen

Beispiel

outline-offset: 12px;
outline: 2px solid blue;

Erzeugt eine Outline mit 12px abstand, 2px Stärke und blauer Farbe.



Border


Border colors


Mit CSS3 können Border mit einem Verlauf Koloriert werden.

Values

-moz-border-bottom-colors: farb zuweisung (#fff)
-moz-border-top-colors: farb zuweisung (#fff)
-moz-border-left-colors: farb zuweisung (#fff)
-moz-border-right-colors: farb zuweisung (#fff)

Beispiel

border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;

Weist dem Element einen Rahmen mit einem Verlauf von Grau bis hellgrau zu.



Border Radius


Abgerundete ecken mit border-radius erstellen.
Firefox, Mozilla und Safari.

Values

-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Allen werden maße in pixeln zugewiesen.
Sie können unabhängig voneinander eingesetzt werden.

Beispiel

background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;

Graue Box mti 5px Border Radius und schwarzem Border.


Border Image


Border können durch Bilder ersetzt werden.

Values

border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image

border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

Allen werden die werte nach folgender Syntax zugewiesen:

border-image: url('Quelle') 4x (maße) round/stretch round/stretch;



Dieses Tutorial ist natürlich nicht vollständig , sollte in keinster weise die neuen features aufs kleinste erklären sondern sollte nur eine kleine einführung geben.

Für mehr Informationen:

http://www.css3.info

Have Phun

Brought to you by:

CrAc - Revolution Webdesign