Interaktive Medien 1. Semester Martin Vollenweider

Farben im Web

Interaktive Medien 1. Semester, Martin Vollenweider

09.07.2020

2

Farben im Web

Codecademy: Styling with CSS > Colors

3

Farben > Vorder- und Hintergrund, Umrandung

color: red; background-color: yellow; border: blue 2px solid;

4

Farben > CMYK, Pantone Cyan, Yellow, Magenta, Black

Im Internet nicht unterstützt

5

Farben > benannte Farben

color: red; background-color: yellow;

6

Liste aller benannten Farben

Farben > RGB, RGBA Rot, Grün, Blau, Transparenz (Alpha)

color: #FFFF00; (#rrggbb; hexadezimale Angabe 0-9 und A-F) color: #FF0; (#rgb; Hexadezimale Angabe 0-9 und A-F) color: rgb(255,255,0); (rgb von 0 bis 255) color: rgba(255,255,0,0.50); (rgb von 0 bis 255; a von 0 bis 1) Umrechner 1 Hex <-> RGB Umrechner 2 Hex <-> RGB

7

Farben > HSL, HSLA Hue (Farbwert), Saturation (Sättigung), Lightness (Helligkeit), Alpha

color: hsla(60,100%,50%,0.50); h von 0° bis 360°; s,l von 0-100%, a von 0 bis 1 Gelb hat z.B. den h Wert von 60 s gibt die Sättigung (Aussen am Kreis) an l spezifiziert, wie weit die Farbe von Weiss oder Schwarz weg ist (Mitte: 50%). Achtung: Das Photoshop- und Illustrator-HSB-Modell sind nicht identisch mit dem Web-HSL-Modell. Umrechner

8

Adobe Color Wheel, ein cooles Werkzeug Adobe Color Wheel

9

Interaction of Color, fast Pflichtlektüre Josef Albers: Interaction of Color

10

Farben von Links & Navigation CSS erlaubt das Formatieren von Links:

Formatieren aller Links: a

Normaler, noch nie besuchter Link: a:link

Besuchter Link: a:visited

aktiver Link (man klickt mit Maus): a:active

Maus über Link: a:hover

11

Links ohne Unterstreichung a:link { text-decoration: none; }

Links mit bestimmter Farbe hervorheben a:link { text-decoration: none; color: #FF0000; background-color: #FFFF00; }

12

Cursor über Link ändern a:link { text-decoration: none; color: #FF0000; cursor: crosshair; } Die Reihenfolge der Formatierungen ist wichtig: Zuerst a:link, dann a:visited, dann a:hover (oder zuerst a, dann a:hover).

13

Übung 1 Übung (css_farben_unfertig.html). Erstellen Sie im Dokument folgende Farben in den unten gegebenen Farbmodellen:

Textfarbe: rot

Hintergrundfarbe: gelb

Umrandungsfarbe: grün

14

Lösung der Übung 1

Fertiges Beispiel (css_farben.html)

15

Übung 2 Übung (css_farben_2_unfertig.html). Alle Texte dunkelgrau, ausser h1, h2 und h3 in Rot. Die ganze Seite hat eine hellgraue Hintergrundfarbe. Den ersten Article mit einem sich wiederholenden Hintergrundbild hinter_lightgrey.jpg. Den letzten Article mit einem 25% transparenten gelben Hintergrund.

16

Lösung Übung 2 Lösung (css_farben_2.html)

17

Inhaltsverzeichnis Farben im Web ..................................................................................................................... 2

Farben > Vorder- und Hintergrund, Umrandung .......................................................... 3

Farben > CMYK, Pantone ................................................................................................ 4

Farben > benannte Farben ............................................................................................. 5

Farben > RGB, RGBA ....................................................................................................... 6

Farben > HSL, HSLA ........................................................................................................ 7

Adobe Color Wheel, ein cooles Werkzeug .................................................................... 8

Interaction of Color, fast Pflichtlektüre ......................................................................... 9

Farben von Links & Navigation .................................................................................... 10

Übung 1 .......................................................................................................................... 13

Lösung der Übung 1 ...................................................................................................... 14

Übung 2 .......................................................................................................................... 15

18

Lösung Übung 2 ............................................................................................................. 16