Wie bestimme ich Farbe, Format, Kontur
und Ausrichtung bei den Elementen?

Farbe


Das Video ist eine Übersicht für diesen Bereich und zeigt wie mit CSS gestaltet werden kann.

CSS Farb-Eigenschaften

CSSWerteBedeutung
color:#00ff00; (...)Zeichenfarbe
background-color:rgba(240, 240, 240, 0.5); (...)Hintergrundfarbe
opacity:0.9;Deckkraft. Je höher die Opazität, desto niedriger die Transparenz.
background:linear-gradient(to right, red , blue);Kurzschreibweise für die Hintergrund-Eigenschaften. Ein Farbverlauf ist möglich. Verläufe sollten mittels Editor komponiert werden. Gradient Ergänzt die Eigenschaft background um die Möglichkeit eines Verlaufs. http://www.colorzilla.com/gradient-editor/

CSS Farbwerte und Farbsysteme

CSS-WerteNameBedeutung
red;Color-Key WordDefinierte Farbnamen
#ff0000; #0f0; Hex-RGBHexadezimale RGB. Je niedriger die Zahl, desto dunkler und je höher der Buchstabe desto heller. 0-9a-f
rgb(255, 0, 0); RGBRot, Grün, Blau
rgba(255, 0, 0, 0.4); RGBARot, Grün, Blau, Alpha
transparenttransparentDurchsichtig
currentColorcurrentColorBezieht sich auf die Farbe die bei dem Element über Color eingestellt ist.
hsl(0, 100%, 50%)HSLFarbton, Sättigung, Helligkeit
hsla(90, 100%, 50%,0.6)HSLAFarbton, Sättigung, Helligkeit, Alpha

Box


Das Video ist eine Übersicht für diesen Bereich und zeigt wie mit CSS gestaltet werden kann.

CSS BOX Modell

CSSBeispiel-WerteBedeutung
margin:5px 3px 8px 5px;Aussen-Abstand zum nächsten Element. Im Uhrzeigersinn: 12 Uhr (oben), 3 Uhr (rechts), 6 Uhr (unten), 9 Uhr (links).
margin-top:50%; 10pxMargin kann auch mit -top, -left, -bottom oder-right direkt angesprochen werden.
padding:5px 3px 8px 5px;Innen-Abstand des Inhalts zum Rand. Wie bei Margin: Im Uhrzeigersinn: 12 Uhr (oben), 3 Uhr (rechts), 6 Uhr (unten), 9 Uhr (links)
padding-top:30%; 20pxPadding kann auch mit -top, -left, -bottom oder-right direkt angesprochen werden.
width:200px;Die Breite von Text bestimmen. Hier besteht eine Wechselwirkung mit der Eigenschaft display. Diese ist Standard display: block. Block-Elemente können in der Breite eingestellt werden. Padding, margin und border-width werden darauf addiert.
height:200px;Die Höhe von Text bestimmen
min-width:150px;Für Breite und Höhe lässt sich ein minimaler Wert definieren.
max-width:400px;Für Breite und Höhe lässt sich ein maximaler Wert definieren.
box-shadow:6px 4px 5px 0px #000;Schlagschatten bei dem horizontaler und vertikaler Versatz, Weichzeichner, Intensität und Farbe eingestellt werden können. Empfehlenswert ist dabei die Benutzung von rgba Farben.

Border


Das Video ist eine Übersicht für diesen Bereich und zeigt wie mit CSS gestaltet werden kann.

CSS Border

CSSWerteBedeutung
border2px solid #0f0;Praktische Kurzschreibweise die border-width, border-color und border-style zusammenfasst
border-color:#ff0000; redFarbe kann mit den CSS-Color-Definitionen bestimmt werden: (color-key-word; #hex; rgb; rgba; hsl; hsla;)
border-radius:2px;Stärke der abgerundeten Ecken in Pixel. Verträgt sich in Tabellen nicht mit border-collapse
border-style:none; solid; dotted; dashed; groove;Art der Kontur kann beeinflusst werden: none; solid; dotted; dashed; groove; double; ridge; inset; outset;
border-top-width:6px;Mit top, left, bottom und right kann die Kontur unabhängig voneinander adressiert werden.
border-width:1px; 5px 2px 8px 2px;Stärke der gesamten Kontur. Einzelne Rahmen ansprechen.
outline:1px solid red;Erzeugt weitere Kontur allerdings unabhängig vom Box-Modell.
outline-offset:15px;Bestimmt den Abstand der Outline-Kontur

box-shadow


Das Video ist eine Übersicht für diesen Bereich und zeigt wie mit CSS gestaltet werden kann.

Box-Shadow

CSSBeispiel-WerteBedeutung
box-shadow:6px 4px 5px 0px #000;Schlagschatten bei dem horizontaler und vertikaler Versatz, Weichzeichner, Intensität und Farbe eingestellt werden können. Empfehlenswert ist dabei die Benutzung von rgba Farben.

transform


Das Video ist eine Übersicht für diesen Bereich und zeigt wie mit CSS gestaltet werden kann.

transform:

CSSBedeutung
transform:TRANSFORM kann über diverse Werte das Element manipulieren. Rotieren, Skalieren, Kippen und eine ganze Reihe mehr Veränderungen sind möglich. Es können mehrere Werte mit Leerzeichen aneinandergereiht werden. Die neuen Browser unterstützen TRANSFORM in einfacher Schreibweise. Ältere Versionen der Browser benötigen die Vendor-Prefixe (-moz-, -ms-, -webkit, -o-). TRANSFORM ist bei Animationen besonders gut und damit schnell zu berechnen und daher ausdrücklich empfohlen. TRANSFORM legt die Elemente im Browser auf einen anderen Render-Layer. Dies kann bei dünner Schrift zu Unschärfen führen, da ein Pixel nicht ganz getroffen wurde. In so einem Fall sollte TRANSFORM bereits von Anfang an mit einem Wert zugewiesen werden. Z.B. TRANSFORM: translateZ(0) wird dafür gerne genommen.
perspective:Bestimmt Entfernung der Beobachter Perspektive für die KINDER des 3D Elements. Der Wert NONE zeigt die 3D-Kinder ohne Verzerrung. Ein niedriger Wert lässt die Kinder nah erscheinen.
perspective-origin:Quelle der 3D Kinder. Ein Wert von 50% 50% lässt sie genau in der Mitte entstehen.
backface-visibility:Regelt die Sichtbarkeit der Rückseite einer gedrehten Ebene.

Werte für transform:

WertBedeutung
translateVerschieben auf der X und Y Achse
translate3dVerschieben auf der X, Y und Z Achse
translateXVerschiebt nur auf der X-Achse
translateYVerschiebt nur auf der Y-Achse
translateZVerschiebt nur auf der Z-Achse
scaleSkaliert Breite und Höhe
scale3dSkaliert Breite und Höhe sowie Z Achse
scaleXSkaliert nur die Breite
scaleYSkaliert nur die Höhe(YAchse)
scaleZSkaliert nur die Z-Achse(Z Achse)
rotateDrehen
rotate3d3D Rotation
rotateXDreht um die X-Achse
rotateYDreht um die Y-Achse
rotateZDreht um die Z-Achse
skewKippen der X- und Y-Achse
skewXKippen der X-Achse
skewYKippen der Y-Achse
matrixZusammenfassung der sechs 2-D Werte
matrix3dZusammenfassung der 16 3-D Werte

► Weitere Infos

Interne Quellen


Im Skript gibt umfangreiche Informationen zum Sehen, Farben, CSS Farben, dem CSS Boxmodell und die gesamten Tabellen der Übersichten zu den CSS Eigenschaften..


Externe Quellen

Kompatibilität

http://caniuse.com/#search=transform

Die Unterstützung der Farben und des Boxmodell sowie Border und Box-Shadow ist sehr gut. Bei 2D oder 3D transform ist der Support ebenfalls sehr gut. Vendor-Prefixe und der IE sind jedoch zu beachten.


CSS Color Module Level 3

http://www.w3.org/TR/css3-color/

Original W3C CSS3 Recommendation für das Color Modul.


CSS basic box model

http://www.w3.org/TR/css3-box/

Original W3C Working Draft für das Box Modell. Das Modell rund um width, padding, margin, Border und height ist aus dem Jahr 2007.


CSS Transforms Module Level 1

http://www.w3.org/TR/css-transforms-1/

Original W3C Working Draft für transform aus dem Jahr 2013.


CSS Backgrounds and Borders Module Level 3

http://www.w3.org/TR/css3-background/

Original Candidate Recommendation für Hintergründe, Border und auch Box-Shadow aus dem Jahr 2014.


Farbe, Box-Modell, Box-Shadow, Verläufe und transform auf selfhtml.wiki

http://wiki.selfhtml.org/(...)/Farbangaben
http://wiki.selfhtml.org/(...)CSS/Box-Modell
http://wiki.selfhtml.org/wiki/(...)linear-gradient()
http://wiki.selfhtml.org/wiki/(...)/box-shadow
http://wiki.selfhtml.org/wiki/CSS/(...)Transformationen

Umfangreiche Erklärungen für den Gebrauch Farbe, Box-Modell, Box-Shadow, Verläufe und transform in deutscher Sprache.


Ultimate CSS Gradient Generator

http://www.colorzilla.com/gradient-editor/

Der Name ist Programm. Kein Weg führt am Colorzilla Gradient Generaotr vorbei, wenn es um die Erstellung von CSS Verläufen geht.


CSS3 Patterns Gallery

http://lea.verou.me/css3patterns/

Innovative Anwendungen von CSS 3 Verläufen