farben im web - interaktive medien · css erlaubt das formatieren von links: formatieren aller...
TRANSCRIPT
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