Zwischenprüfung 2013 – Thema 5: CSS3 Farbe

Schöne neue Farbenwelt! Seit den Anfängen des Internet plagen sich die (selbsternannten) Webdesigner damit ab, Ihre Webseiten auffällig, bunt und teilweise auch wirklich schön zu gestalten. Seit CSS3 gibt einem das W3C eine ganze Fülle an Möglichkeiten mit auf den Weg, genau diese Ziele zu erreichen. Diesmal nur eben ohne Bilder die man immer wieder wiederholen lassen musste um einen Farbverlauf im Hintergrund darstellen zu können. Jetzt reichen dafür wenige Zeilen Code aus. Für die Digitalmediengestalter sind die folgenden Informationen wahrscheinlich kalter Kaffee, die Printmediengestalter können sich aber hoffentlich noch die eine oder andere nützliche Information herausziehen.

Zuerst sollten wir uns aber ansehen, wie es früher war. Denn gerade in solchen Übergangszeiten von einer Technik zu einer anderen stellen die Prüfungsausschüsse gerne mal Fragen nach den Unterschieden, oder auch den Vorteilen der neuen Technik.

Als gegen Mitte bis Ende der 90er Jahre das Internet seinen Siegeszug begann, waren die Möglichkeiten von HTML noch recht begrenzt. Vollflächige Hintergrundfarben, ein bisschen Schriftfarbe und die Rahmenfarbe von Tabellenkästchen. Viel mehr war damals nicht geboten. Wollte man mehr, musste man sich mit Hintergrundbildern und den damit verbundenen Nachteilen zufrieden geben: Lange Ladezeiten, pixelige Bilder und viele Besucher, die die Seite entweder gar nicht zu Gesicht bekamen, oder nur in den seltensten Fällen so, wie es sich der Ersteller der Website ursprünglich gedacht hat. Vorallendingen waren die Websiten der damaligen Zeit katastrophal aufwändig zu warten.

Einfache Änderungen „mal schnell“ konnten schnell große Auswirkungen haben: Ein kleines bisschen zuviel gelöscht und das Layout ist zusammengebrochen, oder Schriftformatierungen zogen sich ins endlose durch, oder waren dann auch ganz weg. Natürlich wurden dafür Workarounds geschaffen: animierte GIF-Bildchen, Verläufe mit JavaScript, das damals auch noch jeder Browser anders interpretierte oder kleinste Hintergundbilder, die dann durch Wiederholung einen halbwegs gutaussehenden Hintergrund ergaben, sei es nun ein Verlauf gewesen, oder auch ein Muster.

Heute und spätestens seit CSS3 funktioniert das alles viel komfortabler und ressourcenschonender:

html { height:100%; }
body { background: -moz-linear-gradient(top, #900, #079); }

Dieser kleine CSS Ausdruck erstellt dir im Firefox schon mal einen ansehnlichen Verlauf. Doch was genau passiert hier? Das ist eigentlich ganz einfach: Zuerst gibt man dem Browser an, das man den ganzen Viewport verwenden möchte und dann gibt man dem Firefox die Anweisung n den Hintergrund einen Verlauf von dunkelrot nach blau zu zeichnen. Das Präfix -moz- gibt dabei an, das diese Anweisung explizit für den Firefox und alle Browser gilt, die Mozilla Browser-Engine verwenden. Doch dazu später mehr.

Das Thema für die Zwischenprüfung lautet bekannterweise ja CSS3-Farbe. welche Möglichkeiten hast Du nun also Farbe in CSS zu verwenden? Um Farbe für die Gestaltung einer Website verwenden zu können gibt es unterschiedliche Schreibweisen. Ganz früher verwendete man die HTML4- und SVG-Farbnamen.

HTML4- Farbnamen
aqua
black
blue
fuchsia
gray
green
lime
maroon
navy
olive
purple
red
silver
teal
white
yellow

 

SVG- Farbnamen
aliceblue
antiquewhite
aqua
aquamarine
azure
beige
bisque
black
blanchedalmond
blue
blueviolet
brown
burlywood
cadetblue
chartreuse
chocolate
coral
cornflowerblue
cornsilk
crimson
cyan
darkblue
darkcyan
darkgoldenrod
darkgray
darkgreen
darkgrey
darkkhaki
darkmagenta
darkolivegreen
darkorange
darkorchid
darkred
darksalmon
darkseagreen
darkslateblue
darkslategray
darkslategrey
darkturquoise
darkviolet
deeppink
deepskyblue
dimgray
dimgrey
dodgerblue
firebrick
floralwhite
forestgreen
fuchsia
gainsboro
ghostwhite
gold
goldenrod
gray
green
greenyellow
grey
honeydew
hotpink
indianred
indigo
ivory
khaki
lavender
lavenderblush
lawngreen
lemonchiffon
lightblue
lightcoral
lightcyan
lightgoldenrodyellow
lightgray
lightgreen
lightgrey
lightpink
lightsalmon
lightseagreen
lightskyblue
lightslategray
lightslategrey
lightsteelblue
lightyellow
lime
limegreen
linen
magenta
maroon
mediumaquamarine
mediumblue
mediumorchid
mediumpurple
mediumseagreen
mediumslateblue
mediumspringgreen
mediumturquoise
mediumvioletred
midnightblue
mintcream
mistyrose
moccasin
navajowhite
navy
oldlace
olive
olivedrab
orange
orangered
orchid
palegoldenrod
palegreen
paleturquoise
palevioletred
papayawhip
peachpuff
peru
pink
plum
powderblue
purple
red
rosybrown
royalblue
saddlebrown
salmon
sandybrown
seagreen
seashell
sienna
silver
skyblue
slateblue
slategray
slategrey
snow
springgreen
steelblue
tan
teal
thistle
tomato
turquoise
violet
wheat
white
whitesmoke
yellow
yellowgreen

 

So, wer jetzt noch nicht an Augenkrebs leidet, dem ist dann auch nicht mehr zu helfen. Aber mal Spaß beiseite. Ich habe diese Farbnamen in meinem Leben noch nicht benutzt. Mir ist das ganze zu aufwändig.Mir zu merken, wie braun sandybrown jetzt ist, oder was zum Geier ich mir unter peachpuff und papayawhip vorstellen soll hat für mich niemals Sinn gemacht. Ausserdem hat man bei der Verwendung dieser Farbnahmen schon mal ein Problem: Den Browser. Einige der Namen sind in jedem Browser nicht, oder zumindest nicht ordentlich implementiert und man konnte am Ende nur hoffen, das das herauskam, was man zeigen wollte. Gottseidank hat sich parallel dazu eine Möglichkeit zur Notation von Farben ergeben, die erstens wesentlich sinnvoller ist und zweitens auch viel mehr Möglichkeiten, genauer gesagt 16,7 Millionen Möglichkeiten bietet! Einziges Problem daran: Mann musste sich Farben gut Vorstellen können.

Die Notation von Farben mittels Hexadezimal-Code
Das Hexadezimal System ist eigentlich nichts anderes als unser bekanntes 10-stelliges Zahlensystem, nur mit eben 16 Zahlen bestehend aus den Zahlen 0-9 und den Buchstaben A-F. Wer sich mehr für Zahlensysteme interessiert findet am Ende des Artikels einige Links zu den gängigsten Zahlensystemen. Wie kann ich nun Farbe Hexadezimal darstellen? Das ist eigentlich ganz einfach. Ausgehend vom RGB Farbsystem habe ich zur Darstellung eines Farbigen Pixels auf dem Bildschirm drei Angaben zu machen: Den Wert für den roten Farbkanal, den Wert für den grünen Farbkanal und den Wert für den blauben Farbkanal. Tada! Schon haben wir unsere Farbe gemischt. Ok – Noch nicht ganz: In der Berufsschule bekommt man beim RGB-Farbraum ja Werte zwischen 0 und 255 für die einzelnen Farbkanäle beigebracht. Wobei 0 = Schwarz, oder besser aus ist und 255 der Kanal in seiner vollen Pracht. Wenn man alle Kanäle zusammen nimmt  bekommt man dann  Werte wie 0,0,0 oder 255,255,255 zu sehen. Und genauso läuft es mit der hexadezimalen Schreibweise. Schwarz entspricht im hexadezimalsystem folgender Zahlenkolonne: 000000 – Weiß hingegen entspricht der Zahlenkolonne: FFFFFF. Zahlenkolonne deswegen, weil es sich dabei ja um Zahlen im hexadezimalsystem handelt. Bei 00 ist also der jeweilige Kanal komplett aus, bei FF komplett aufgerissen. Für ein reines RGB-Rot ergibt sich dann also FF0000, für grün entsprechend 00FF00 und für blau also 0000FF.
Daraus lassen sich dann insgesamt 16,7 Mio Farben zusammenmischen, mitsamt der Grauwerte. Schiebst Du vor die Zahlenkolonne  noch eine # dann kannst Du Sie in Deinem CSS-Code verwenden. Mit der Raute erkennt der Browser, das jetzt eine Zahlenkolonne kommt, und er interpretiert sie als Farbangabe, wenn Sie mit dem richtigen Schlüsselwort daherkommt.

Schlüsselwörter – Oder wie baue ich das jetzt in mein CSS ein?
Das ganze in Dein CSS einzubauen ist eigentlich ganz leicht. Willst Du den hintergrund einer Box oder einer ganzen Seite einfärben, verwendest Du:

background-color: #000000;

Willst Du die Rahmenfarbe ändern, verwendest Du:

border-color: #000000;

Willst Du die Schriftfarbe ändern, verwendest Du:

color: #000000;

rgb und hsl – Die anderen Arten Farbe in CSS zu notieren
Soweit so gut. Natürlich gibt es neben der hexadezimalen schreibweise auch noch andere Schreibweisen. Seit CSS2 kannst Du das oben bereits genannte RGB-Schema natürlich auch direkt notieren und sparst Dir somit die Umrechnung in das hexadezimale Format. Dafür wandelst Du die oben angegebenen Code-Schnipsel einfach folgendermaßen ab:

background-color: rgb(0,0,0);

Genauso kannst Du im Übrigen auch mit den anderen Beispielen von oben verfahren.

Um nun die hsl-Werte angeben zu können müssen wir wieder ein kleines bisschen Farbraum-Theorie voran stellen. hsl steht für Hue (Farbton), Saturation (Sättigung) und Luminance (Helligkeit). Um nun eine Farbe bestimmen zu können wählst Du zuerst einen Farbwert aus dem Farbkreis aus. Diese Zahl liegt zwischen 0 und 360 Grad. Danach wählst Du den Sättigungsgrad in Prozent, also zwischen 0 und 100%, aus und bestimmst danach die Helligkeit ebenfalls in Prozent.

Der Farbkreis als Balken - Quelle: Wikipedia
Der Farbkreis als Balken – Quelle: Wikipedia

Viele finden diese Form der Farbangabe um einiges intuitiver. Zu diesem gehöre ich zwar nicht, aber die Geschmäcker sind eben verschieden. Um nun ein sattes blau zu erzeugen sieht die Angabe in Deinem CSS dann folgendermaßen aus:

background-color: hsl(240,100,50);

Für schwarz und weiß spielen die ersten beiden Werte keine Rolle! Setze die Luminanz auf 100 um ein reines weiß zu erhalten, oder auf 0 um ein reines schwarz zu erhalten. Für die beiden anderen Anwendungsbereiche (Rahmen und Schriftfarbe) kannst Du genauso vorgehen, wie in diesem Beispiel! Möchtest Du mehr Informationen rund um die Farbräume RGB und HSL erfahren, dann findest Du am Ende enstprechende weiterführende Links.

Der Alpha-Kanal, das unsichtbare Wesen!
Bereiche auf Deiner Website farbig machen zu können ist ja schon mal eine tolle Sache. Seit CSS3 gibt es jedoch noch eine weitere Möglichkeit, wie Du Deine Seite ansprechend gestalten kannst: Transparenzen. Und hierfür brauchst Du den Alpha Kanal. Dieser Kanal regelt die Opazität deiner Farbe ähnlich wie bei transparenten PNGs, mit hilfe derer Du freigestellte Bilder ohne Rahmen auf Deiner Website plazieren kannst. Und das auf eigentlich erstaunlich einfache Weise. Du fügst Deiner Farbe einfach noch einen Wert für die Opazität bei. Dieser Wert, der zwischen 0 und 1 liegen sollte entspricht einer Blickdichte von 0 bis 100%. 0 wäre demnach vollkommen transparent und 1 entsprechend vollkommen massiv. Ein Wert von 0.5 entspräche demnach 50% etc. Damit die Browser das auch richtig interpretieren können musst Du in den Schlüsselworten noch darauf hinweisen, das Du auch einen Alphakanal verwenden willst. Das obige Beispiel sähe demnach folgendermaßen aus und würde ein 50%iges blau anzeigen:

background-color: rgba(0,0,100,0.5);

oder

background-color: hsla(240,100,50,0.5);

Aufmerksame Leser haben den Fehler oben bemerkt und gleich aufgeschrien: „Ein 50%iges blau? So ein Blödsinn!“ Und ja, Du hast recht: Natürlich ergibt das nur ein 50%iges blau auf einem weißen Hintergrund. Tatsächlich färbt das so hinterlegte Feld den Hintergrund mit 50% blau ein. Dabei ist es egal, ob es ein Bild, eine andere farbige Fläche, oder ein Verlauf ist.

Einsatzgebiete von Farben – Die schöne neue Farbenwelt
Mit CSS3 sind eine vielzahl an Möglichkeiten entstanden, wie Du Farbe auf Deiner Website verwenden kannst: Hintergrundfarbe für Boxen und ganze Seiten, Textfarben, Rahmenfarben, transparenzen, verschiedenfarbige Schatten, Animationen und es wird wohl noch das eine oder andere in der Entwicklung für zukünftige Versionen sein. Ob und wie Du die Möglichkeiten anwendest, das musst Du für Dich selbst entscheiden. Für die Zwischenprüfung sollten diese Anwendungsmöglichkeiten wohl eher eine untergeordnete Rolle spielen. Deswegen werde ich auf weitere CSS-spezifische Details im Rahmen dieses Artikels nicht weiter eingehen. Wichtig ist meiner Meinung nach, das Du weist, wie Du Farben in deine Website bekommen kannst. Wenn Du das anders siehst und eine Aufzählung der Möglichkeiten haben willst, dann schreibe das bitte in die Kommentare oder hinterlasse mir eine Nachricht per Mail.

Wie sage ichs dem IE? Das Problem von CSS3
Hier möchte ich zwei Fliegen mit einer Klappe schlagen und dabei gleichzeitig noch auf ein großes Problem bei der Verwendung von CSS3 auf Deiner Website hinweisen:
Obwohl CSS3 mittlerweile als Standart vom W3C freigegeben ist hapert es bei einigen Browsern noch mit der Umsetzung des Standarts. Die Browserhersteller, namentlich Mozilla, Apple, Google und Microsoft haben lange Zeit mal wieder ein eigenes Süppchen gekocht, was zur Folge hat, das die Implementierungen des Standarts in den Browsern noch nicht so umfangreich sind, wie sie sein könnten. Es besteht also die Gefahr, das dein Code im Firefox anders aussieht als in Chrome oder Safari. Es können sogar unterschiede bestehen zwischen dem offiziellen Release der Webkit-Browser Chrome und Safari und den täglichen nightly Builds. Davon ausgehen, das es anders aussieht, kannst Du bei unserem Freund, dem IE. Deswegen solltest Du Deine Website in sovielen Browsern wie möglich testen und darauf achten, das sie überall zumindest benutzbar ist! Was hilft Dir die schönste Website, wenn der Besucher sie nicht benutzen kann, weil irgendein Browserbug deine Navigation unter ein anderes Element schiebt? Nichts. Also testen testen testen!

Weiterhin gibt es auch die Möglichkeit, die Herstellereigenen CSS3 Interpretationen zu verwenden, solange der eigentliche Standart noch nicht implementiert ist. Dies ist aber ein wenig mit Vorsicht zu genießen, da die Ergebnisse hier abweichen können. Zum Rumspielen, ist es aber eine tolle Sache! Und um das machen zu können, brauchst Du die Browser Präfixe. Eines davon, nämlich -moz- hast Du oben bereits kennengelernt. Natürlich haben die anderen Browser ähnliche Präfixe, die ich Dir hier einmal in dieser Tabelle zusammengestellt habe:

Präfix Browser
-moz- Firefox
-ms-, mso- Internet Explorer
-khtml- Konqueror
-o- Opera
-webkit- Chrome, Safari

Anwendung finden diese Präfixe direkt im Aufruf der entsprechenden CSS3 Funktion:

div.eckenrundung { 
  border-radius: 10px;         // Standart CSS3
  -moz-border-radius: 10px;    // Präfix des Firefox
  -webkit-border-radius: 10px; // Präfix der Webkit-Browser
  -o-border-radius: 10px;      // Präfix des Opera
  -khtml-border-radius: 10px;  // Präfix für KHTML
}

Das soll es dann schon wieder von mir zu diesem Thema gewesen sein. Direkt im Anschluss findest Du eine recht umfangreiche Linkliste mit weiterführenden Informationen. Ich hoffe, Du kannst mit dem hier dargelegten etwas anfangen und gut für Deine Prüfung lernen. Wenn dem so ist, freue ich mich natürlich, wenn Du den Artikel teilst und/oder mir einen Kommentar hinterlässt.

Ich möchte Dich aber auch darauf hinweisen, das es immer Sinn macht aus mehreren Quellen zu lernen. Auch wenn ich Dir die hier Angebotenen Informationen sehr gut recherchiert habe und Dich nicht absichtlich aufs Glatteis führen will, kann ich Rechtschreibfehler oder sonstige Fehler nicht ausschließen. Die Verantwortung für deine Note liegt ganz alleine bei Dir!

Weiterführende Informationen:
http://www.filefishstick.com/laurin99/colorchart.htm
http://de.wikipedia.org/wiki/Webfarbe#CSS_3

http://de.wikipedia.org/wiki/RGB-Farbraum
http://de.wikipedia.org/wiki/HSL-Farbraum
http://www.w3.org/TR/css3-color/

http://de.wikipedia.org/wiki/Dualsystem
http://de.wikipedia.org/wiki/Dezimalsystem
http://de.wikipedia.org/wiki/Hexadezimalsystem

// Edit:Fehler bei der Formatierung der Textfarbe behoben. Danke Kevin!

Themen für die Zwischenprüfung 2013

Jedes Jahr gibt die zfa die Themen für die Prüfungen der Mediengestalter im Vorfeld bekannt. So natürlich auch in diesem Jahr. Knappe zwei Monate vor der Zwischenprüfung gibt es jetzt die sieben Themen, von denen die angehenden Mediengestalter insgesamt sechs bearbeiten. Die Zwischenprüfung findet in diesem Jahr am 18. April statt. Die Themen stellen sich wiefolgt dar:

1 Den Medienbetrieb und seine Produkte präsentieren:
Lieferungs- und Zahlungsbedingungen beim Papiereinkauf
2 Medienprodukte typografisch gestalten:
Seitenlayout
3 Ausgabedateien druckverfahrensorientiert erstellen:
Druckverfahren unterscheiden
4 Computerarbeitsplatz und Netzwerke nutzen, pflegen und konfigurieren:
Speichermedien
5 Eine Website gestalten, erfassen und bearbeiten:
CSS3 – Farbe
6 Bilder gestalten, erfassen und bearbeiten:
Text-/Bild-Kombination
7 Daten für verschiedene Ausgabeprozesse aufbereiten:
Datenkompression

Mediengestalter Abschlussprüfung Winter 2012 – Die Themen

Auch in diesem Jahr finden die theoretischen Prüfungen für die Abschlussprüfung im Winter Anfang Dezember statt – die Themen wurden bereits vor einigen Tagen vom ZFA-Medien veröffentlicht (wo Du auch sicherheitshalber nachsehen solltest, ob die Daten hier korrekt sind – Alle Angaben hier sind ohne Gewähr!). Grund genug, sich das einmal näher anzusehen.

Mediengestalter Abschlussprüfung Winter 2012 – Die Themen

An der Struktur und dem Ablauf der Prüfung hat sich auch in diesem Jahr nichts geändert. Die Aufgaben U1 – U9 aus beiden Prüfungsbereichen müssen von jedem Prüfling bearbeitet werden. Die Aufgen U10 bis U12 sind unterteilt nach den jeweiligen Fachrichtungen. Bist Du also in der Fachrichtung Gestaltung und Technik mit der Spezialisierung auf Printprodukte tätig, interessieren Dich nur die Themen aus dem entsprechenden Bereich Gestaltung und Technik (Print). Analog verhält es sich bei den anderen spezifischen Themenbereichen.

Von den 12 Themengebieten sind 10 zu bearbeiten. Zwei Themengebiete können gestrichen werden. Pro Themengebiet gibt es 10 zu erreichende Punkte, maximal also 100 Punkte.

 

Allgemeine Themengebiete (von allen zu bearbeiten):

Konzeption und Gestaltung

Medienproduktion

U1 Produktpolitik Druckkostenberechnung
U2 Gesprächsführung Rastertechnologie
U3 Schriftauswahl Netzwerk-Topologie
U4 Mikrotypografie Display-Berechnung
U5 Screenlayout-Optimierung HTML5-Neuerungen
U6 Bildrecht RAW-Daten
U7 E-Book Datenkompression
U8 Variabler Datendruck Datenbank-Begriffe
U9 Hinweisschilder Layoutberechnung

 

 

Fachrichtungsspezifische Themengebiete (bitte entsprechendes auswählen):

Beratung und Planung

Beratung und Planung

U10 Soziale Medien Markenschutz
U11 Druckkalkulation Newsletter-Marketing
U12 Copy-Strategien Vernetzte Produktion

 

 

Konzeption und Visualisierung

Konzeption und Visualisierung

U10 Metaphern Markenschutz
U11 Semiotischen Analyse Verpackungen
U12 Copy-Strategien Usability

 

 

Gestaltung und Technik (Print)

Gestaltung und Technik (Print)

U10 Infografik Digitaldrucksysteme
U11 Messverfahren Ausgabeprofile
U12 Proof Dateiformate

 

 

Gestaltung und Technik (Digital)

Gestaltung und Technik (Digital)

U10 Infografik Media-Query
U11 Barrierefreiheit WCAG 2.0 Tag-Cloud
U12 Kamera-Einstellungen Audio-Aufnahme

 

Wenn man sich diese Themen ansieht, dann ist man doch schon mal ganz froh, das man die Prüfung schon hinter sich hat. Allen, die die Prüfung noch vor sich haben, sei gesagt, das es kein Hexenwerk ist die Prüfung zu bestehen, sofern man gut vorbereitet ist. Und um Dir dabei ein bisschen zur Seite zu stehen will ich in loser Reihenfolge Links zu Seiten und Informationen posten. Wenn Du auch Hinweise hast oder denkst, es fehlt hier etwas, dann schreibe es einfach in die Kommentare oder schicke mir eine Mail.

Ein paar Links zu Seiten, die allgemein Informationen rund um Deine Prüfung liefern habe ich Dir hier schon einmal zusammengestellt.

Facebookgruppe zur Prüfungsvorbereitung
Eine weitere Facebookgruppe zur Prüfungsvorbereitung
Umfangreiche Informationen zum Thema Mikrotypografie
Übungsaufgaben bei Mathemedien.de
Prüfungswiki der zfa: mediencommunity
Die Mediengestalterin hat ebenfalls einige der Themen zusammengefasst.
Und natürlich der Klassiker: mediengestalter.inf
HTML5 und CSS3 Videoserie bei youtube